A prototype connects real (or near-real) screens together into something a person can actually click through — the step where a static design starts behaving like a real product, before any code gets written.
| Low-fi wireframe | Hi-fi prototype | |
|---|---|---|
| Visual detail | Grey boxes, placeholder text | Real colors, real copy, close to final visuals |
| Interactivity | Static, one screen at a time | Clickable — screens are connected, buttons actually navigate |
| Used for | Fast structural feedback, early exploration | Realistic testing, stakeholder demos, developer handoff reference |
| Built in | Paper, or simple shapes in Figma | Figma's Prototype tab, connecting frames with interactions |
In Figma's Prototype tab, selecting an element reveals a connection node — dragging it onto another frame creates a clickable link. Stacking several of these across a flow (a button that goes to a detail screen, a back arrow that returns) produces something a real person can click through as if it were the finished app, covered hands-on in this site's Figma course.
Testing doesn't require a lab or dozens of participants — even 5 people trying a task on a prototype reliably surfaces most major usability problems. The core method: give someone a specific task ("find and add this item to your cart"), watch them attempt it without helping, and note exactly where they hesitate, click the wrong thing, or get stuck.
Resist the urge to help
Never explain how the prototype works before a test — if a real user would be confused without an explanation, a real customer will be too. Silence during the test is where the honest feedback lives.