Prototype
Definition
A prototype is an interactive simulation of a product or feature — built before the production version — that allows the team or users to experience the flow, interactions, and behavior of a design to test whether it works as intended.
A prototype differs from a wireframe or mockup in one critical way: it can be used. You can tap through an onboarding flow, see a transition animation, encounter an error state. That interactivity is what makes prototypes powerful for testing.
Prototypes exist on a wide fidelity and interactivity spectrum:
Paper prototype — hand-drawn screens on paper. A facilitator swaps sheets as the user "taps." Fast, cheap, surprisingly effective for testing navigation and comprehension.
Clickable wireframe — lo-fi digital screens linked together in Figma or InVision. Users navigate between screens. Tests flow and structure without visual distraction.
High-fidelity prototype — polished Figma frames linked with realistic transitions. Looks and feels close to the finished product. Used for final usability validation and stakeholder demos.
Coded prototype — working code in a staging environment or on-device. Most expensive to build, most realistic to test. Used for testing performance, animations, or interactions that tools like Figma can't simulate.
The choice of prototype type should match the question being answered:
- "Does the navigation structure make sense?" → paper or clickable wireframe
- "Does the visual design meet the bar?" → hi-fi Figma prototype
- "Does the animation feel right on device?" → coded prototype
Prototyping is often preceded by whiteboard sketching — rough storyboards and flow diagrams that define what the prototype needs to cover. BoardSnap captures those sketching sessions so the prototype scope and rationale are documented before building starts.
Examples
- A clickable Figma prototype for a new board creation flow, tested with six users before engineering picks it up
- A paper prototype of three navigation concepts, tested in a twenty-minute hallway test
- A coded on-device prototype of a camera transition animation to test the feel before committing to implementation
Snap a prototype. Ship its actions.
BoardSnap turns any whiteboard — including this one — into a summary and action plan.