Chapter 6 › Lesson 33

33. Prototype: Connect a Full Multi-Screen Flow

Skills: Wire all screens together into one complete flow; Use On click, On drag, After delay triggers; Set start frame for presentation; Test full flow end to end; Add back navigation

This is the capstone prototype lesson. You'll wire all your screens together into one complete, navigable flow — with forward navigation, back navigation, and proper starting frame.

33. Prototype: Connect a Full Multi-Screen Flow
Figure: All screens wired together with On Click → Navigate To interactions. Each screen has matching active/inactive nav states.

Step-by-step

  1. Arrange all your screens in a row or grid in the canvas — this makes connections visible
  2. Switch to Prototype mode
  3. Start from the first screen (the Starting frame). Select the element that should navigate forward (e.g. a button or nav item)
  4. Drag the blue connection handle to the next screen. Set: On click → Navigate to → Smart Animate or Instant
  5. Repeat: wire every interactive element to its destination screen
  6. For back navigation: add a back button or a gesture (On drag → Navigate to previous screen)
  7. Use the Prototype panel (right sidebar) to view all connections in a list — check for orphan screens (screens with no connections)
  8. Set the first screen as the Starting frame (click the play icon in the Prototype panel)
  9. Add After delay triggers for auto-advancing elements (e.g. splash screen → home after 2 seconds)
  10. Press Present and test the full flow end to end. Fix any broken connections

Pro tip

The Prototype panel shows all connections. If a screen has no incoming or outgoing connections, it's orphaned — users will never see it. Always check for orphan screens before presenting.