Definition
Prototyping is the practice of creating an interactive, clickable simulation of a digital product — typically in design tools like Figma — that can be tested with real users before any production code is written.
Prototypes exist to answer questions that static designs can't. Does the user understand the flow? Do they hesitate at the right places? Where do they get stuck? A prototype turns a hypothesis about the design into a testable experiment — and the answers it produces save weeks of misdirected engineering effort.
There's a fidelity spectrum: low-fi click-throughs (wireframes wired together), mid-fi prototypes (real components, real flow, basic visual design), and high-fi prototypes (production-quality visuals with motion and edge cases). The right fidelity depends on the question being asked. Testing whether users understand the flow needs only mid-fi; testing whether users find the brand trustworthy needs high-fi.
Origin
Industrial design has used physical prototypes for centuries. Digital prototyping for UX emerged in the early 2000s with tools like Axure (2003) and matured dramatically with Figma's launch (2016).
How it works
- Identify the specific question the prototype needs to answer.
- Choose appropriate fidelity for that question (don't over-build).
- Wire the relevant screens together in Figma (or similar tool).
- Add interactions only where needed for the test.
- Test with 5-8 target users — observe, don't lead.
- Iterate based on observation, not stated preferences.
When to use it
Use when
- Before committing engineering time to a new flow.
- When the design involves new patterns the user might not recognise.
- When stakeholders disagree about whether a flow works.
Skip when
- For trivial UI changes within established patterns.
- When the cost of building exceeds the cost of just shipping and observing.
Key metrics
- Task completion rate in usability tests (target 80%+)
- Time on task
- Confidence in flow before engineering build
- Re-work avoided post-launch
Examples
- The prototype test caught a confusion in the onboarding that would have shipped if we'd skipped it — easy fix in Figma, expensive fix in production.
- Five rounds of prototype iteration is cheaper than one round of production rework.
- Our high-fi prototype convinced the stakeholder team to fund the build. Static screens hadn't moved them at all.
In practice at Makreate
Makreate UX engagements always include a prototype phase before engineering kickoff. We use Figma's native prototyping for almost all engagements — it's fast, lets us test with real users inside a working week, and produces a clickable artifact engineers can pull components directly from. Most projects see a clean 3-round iteration: build prototype, test, iterate; second round, second test, refine; third round, lock for build.
UX Design →Common mistakes
- Building prototypes at too high a fidelity too early.
- Skipping user testing — a prototype that's never tested is just a static design with hover states.
- Asking users 'do you like this?' instead of giving them a task.
- Iterating on stakeholder feedback instead of user feedback.
- Treating the prototype as the final design instead of a learning tool.
Frequently asked
How many users do I need to test a prototype with?
5-8 target users surface 80% of usability problems. Diminishing returns kick in after that for any single round of testing.
What's the right tool for prototyping?
Figma is the industry standard for most digital product work. Tools like ProtoPie, Framer or Origami are useful when you need motion, complex state, or device APIs.
Should the prototype look real?
Match fidelity to the question. Real-looking prototypes are needed for brand and trust testing; lower fidelity is fine for flow and IA testing.