What a good prototype is for

It is tempting to prototype everything in high fidelity because Figma makes it possible. That is usually a mistake. A prototype is a tool for answering a question, and the right level of detail depends on the question.

Common reasons to prototype

• Usability testing: can people find and complete a task? You need the paths they are likely to take to work, but not every edge case.
• Communicating interaction: how does this bottom sheet open, what happens when you swipe? Developers need precise motion and states.
• Getting buy in: stakeholders understand an idea faster when they can click it. A believable happy path is often enough.
• Exploring options: comparing two navigation models quickly. Low fidelity is fine and faster.

Before building, write one sentence: "This prototype will help us learn or show..." If you cannot finish the sentence, you are not ready to prototype.

Fidelity is not one thing

Fidelity has several dimensions, and you can mix them:

1. Visual fidelity: wireframe grey boxes or polished UI.
2. Interaction fidelity: simple screen links or realistic scrolling, gestures and animation.
3. Content fidelity: placeholder text or real data.
4. Breadth: one path or many branches.

A usability test of a checkout style flow might need high content and interaction fidelity, because people react to real prices and real errors, but only one or two paths.

The travel app project

We will prototype a booking flow for a travel app. The main task in our test will be: "Find a stay in Lisbon for two nights next month under 150 euros a night and reserve it." That task tells us what must work: search, filters, scrolling results, a detail page, a date picker and a confirmation step.

Keep prototypes in their own space

Use a separate page, such as "Prototype: booking test", that references components from your main file. This keeps experimental wiring away from your clean design screens and makes it easy to duplicate a prototype for a second test round.

In the next lesson we will look at the building blocks every interaction is made of: triggers, actions and destinations.