Link screens into a flow

A screen on its own shows what one page looks like. Linked screens show how the product moves: what the person taps, where they land and how they get back. Link your screens, then click through them in Preview the way a person would.

Link a button to another screen

1. Select the layer

   Select a button, a link, a card, a row or another layer a person can press. Text and headings can't lead anywhere; use a Link for words that do (Layers › Add › Link).

2. Choose what it does

   In the inspector, open Interaction and choose When pressed:

   • Go to screen: choose the Screen, and optionally the state it Opens in (for example, Empty).
   • Go back: returns to the screen before.
   • Open over this screen: shows another screen as a sheet over this one, such as a picker or a dialog.
   • Open web address: a page outside your app. Previews show the address; they never open it.

3. Save

   Select Save. Links can only go to screens in the same project.

Links to this screen in the same section lists the buttons on other screens that come here.

Click through in Preview

Select Preview to open a screen full-window. Click a linked button, or focus it and press Enter or Space, to go to its screen in the same device frame.

Key	Action
Alt ←	Back to the screen before
hold Shift	Show what can be clicked
← / →	Previous or next screen in the list
Esc	Close the overlay, or the preview

Clickable areas in the toolbar keeps the outlines on. A link to a web address shows the address at the bottom instead of leaving the preview.

The flow map

Select Flow in the canvas tools to see every screen as a box and every link as an arrow. Dotted arrows open a screen over another. List shows the same links in words, which works well with a keyboard or a screen reader.

• Flows names a path through the product, such as Sign up, and its start screen. The start screen is marked Start, and the play button previews the flow from there.
• A link to a screen that was deleted is broken: its arrow is red and ends at Missing screen. Choose another screen in that layer's Interaction.

Share and build

• Guests with a review link to a release can open View large and click through the release's screens. A link to a screen outside the release says so instead of opening it.
• When you implement a release, the implementation contract lists each screen's route and the links between them, so the coding agent wires the same navigation.
• The design agent can link screens too: ask it to "link Continue to the Checkout screen".