Chapter 3 › Lesson 11

11. Prototype: Tap Nav Icons to Switch Between Screens

Skills: Create multiple screen frames (Home, Accounts, Payments, Profile); Add interaction: On click → Navigate to; Wire all nav items to their screens; Set active state on current screen

Now you'll wire up a prototype so that tapping a nav item navigates to a different screen, and the nav updates to show which screen is active.

Step-by-step

1. Create 4 screen frames — one for each nav item: Home, Accounts, Payments, Profile
2. Copy your nav bar component onto each screen frame, positioning it at the bottom
3. In each screen, set the matching nav item variant to Active (e.g. on the Accounts screen, set the Accounts nav item to Active)
4. Switch to Prototype mode (top right tab)
5. Select the Home nav item on screen 1, click the + on the handle that appears
6. Drag the connection arrow to the Accounts screen frame. In the Interaction panel, set On click → Navigate to — choose Smart Animate or Instant transition
7. Repeat for each nav item: connect it to its corresponding screen
8. On each screen, wire all 3 inactive nav items too — so every tap navigates correctly
9. Set the Home screen as the Starting frame (the play icon icon in the Prototype panel)
10. Press the Present icon (▶) in the top toolbar and tap through your nav to test