Prototype
An interactive mockup used to test and demonstrate a design before build.
A prototype is a clickable simulation of a product, ranging from low-fidelity (linked wireframes) to high-fidelity (realistic, animated flows). It lets you test ideas with users, pitch to stakeholders, and catch problems before expensive development.
High-fidelity prototypes — for example built in Framer — can look and behave like the real product, making user testing and fundraising far more convincing.
Key characteristics
- Simulates the real product so flows can be experienced and tested before code.
- Fidelity ranges from clickable wireframes to near-real interactive designs.
- Used for usability testing, stakeholder buy-in and developer handoff.
- Tools include Figma, Framer and code prototypes for the highest realism.
Example
A Framer prototype of an onboarding flow — with real transitions and form validation — is put in front of five users, surfacing a confusing permission screen before any engineering time is spent.
Frequently asked questions
What is the difference between low-fidelity and high-fidelity prototypes?
Low-fidelity prototypes are rough and quick, good for early flow and concept testing. High-fidelity prototypes look and behave close to the real product, good for detailed usability testing and stakeholder sign-off.
Can a prototype become the real product?
With code-based tools like Framer, high-fidelity prototypes can ship as production sites. For app prototypes in Figma, the prototype usually informs — but is rebuilt in — production code.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.