Your first interactive flow
A pile of beautiful screens proves nothing — a stakeholder cannot tell whether the idea works until they can tap it, and a static mockup hides every dead end and missing back button until someone tries to use it.
Choose your track
Read this module through your lens
Screens are not a product
You can have a folder of gorgeous screens and still not know whether the design works. Works means: can a person move through it and accomplish the task. A static mockup cannot answer that, because it hides the joints — the missing back button, the screen with no exit, the step that assumes information the user does not have yet. Those gaps are invisible until someone tries to tap through.
A prototype closes that gap cheaply. You connect the screens into the actual path a user takes, then click through it yourself or hand it to someone. Within minutes you discover the dead ends and the leaps in logic that looked fine as separate frames. It is the cheapest usability test that exists, and it costs only wiring you already have the screens for.
Anatomy of a connection
A prototype is built from one repeated unit: a connection. Each connection has three parts. A trigger — usually On tap, but also drag, hover, or after-delay — is what the user does. A source — the specific element that listens, ideally the actual button, not the whole frame. And an action with a destination — most often Navigate to another frame, but also Back, or Open overlay for modals and menus.
You make one by switching to the Prototype tab and dragging the little handle from an element to the destination frame, then setting the trigger and action. One frame is flagged as the flow’s starting point. Press Present and you are clicking a working draft of the product.
The most common beginner error hides here: wiring the entire frame instead of the button, so tapping anywhere advances the flow. Connect the real interactive element, the way the real product will.
Try a real prototype, then walk your own
Below is a slot for a live, interactive Figma prototype — the official embed lets you click through a real flow inside this page. (Drop an embed URL in to populate it.)
The point of presenting is not to admire it; it is to walk the flow as a user with a goal: “buy the thing,” “change my address,” “get back to the start.” Every time you reach a screen with no way forward or no way back, you have found a real gap in the design — not a visual flaw, a thinking flaw. Note it, fix the wiring, and walk it again. Overlays matter here too: a menu or confirmation should open over the screen, not replace it, or the user loses their place.
Hands-on exercise
Take two or more screens you built in Course 1 and wire one core flow in Figma’s Prototype tab: connect the real buttons, set a starting frame, add a Back path on every screen, and use an overlay for any modal. Present it and walk the flow as a user trying to complete the task. Find at least one dead end or logic gap, fix the wiring, and note what clicking through caught that the static screens did not.
Second case · a checkout flow
The same lesson, a different object
Cart -> Shipping -> Payment -> Done, each screen connected on tap to the next.
Presenting it, there is no way back to fix the address, the 'Done' screen traps the user, and tapping anywhere (not just the button) advances because the whole frame was wired.
Wire the actual Continue button (not the frame), add Back on each step, make the order-summary a tap-to-open overlay, and loop Done back to the store. The flow now survives a real tap-through.
Common failures · spot them fast
The failure gallery
Connecting frames with no way back (dead-end screens)
Wiring the whole frame instead of the actual button
Forgetting to set the starting frame
Overlays vs navigate confused (modal should overlay, not replace)
Prototype 'works' in editor but flow makes no sense when presented
Each of these is caught by a quality gate — keep the cheatsheet open while you work.
Worked example
Watch the journey
The pattern
Cheatsheet
Cheatsheet
Recipe & shortcuts
Switch to the Prototype tab (right panel).
Drag the node handle from an element -> to a destination frame.
Set trigger (On tap / drag / hover) and action (Navigate to / Back / Open overlay).
Set the starting frame (flag). Press Present (play) to test.
Failure modes
- Connecting frames with no way back (dead-end screens)
- Wiring the whole frame instead of the actual button
- Forgetting to set the starting frame
- Overlays vs navigate confused (modal should overlay, not replace)
- Prototype 'works' in editor but flow makes no sense when presented
Key operations
- Connect an element to a destination (On tap -> Navigate to)
- Add Back actions and overlays where needed
- Set the flow's starting frame
- Present and click through as a user would
Quality gates
- Can a user complete the core task end to end?
- Is there a way back from every screen?
- Are triggers on the real interactive elements (buttons), not whole frames?
- Do modals overlay rather than replace the screen?
Workflow steps
- Lay out the screens of one flow
- Connect each action to its destination
- Add back paths and overlays
- Present and walk the flow as a user
Next module
- proto_smart_animate — making the transitions between these screens move.
Reflection
Reflection card
Active retrieval — answer from memory before re-reading. Saved to this browser.
You've completed this module when…
- A prototype of one core flow that can be completed end to end in Present mode.
- A way back from every screen (no dead ends).
- One flow gap discovered by clicking through, and the fix.
Next: proto_smart_animate — making the transitions between these screens move.
Finish — back to Prototyping & Animation →