Prototype
Link one screen to another with a drag, then play your prototype in Preview, in a tab beside your file.
Checked against uxdeck on 16 October 2026
A prototype is your screens linked together: press a button on one and the next one shows. You make the links on the canvas by dragging from a layer to a frame, and you play them in Preview, which opens as a tab beside your file and stays live while you keep designing.
Every link is an interaction underneath, so once a link exists you can change what starts it, where it goes and how the screens change. See Interactions for all of that.
Link a layer to a screen
- Open the Prototype tab (⌥9).
- Select the layer people will press, such as a button or a card.
- Point at a side of the layer: a ring appears. Drag the ring onto the frame it should open.
The layer now goes to that frame On click, and a line on the canvas shows the link. A toast confirms it, for example “On click, goes to Checkout”.
Select several layers first and every one of them gets the link. A whole screen can be linked too: select the frame and drag its ring onto another frame.
What else the ring can do
Where you drop the ring decides what the link does:
- Onto a frame: go there on click.
- Onto another variant of the same component: change to it on click.
- Onto a layer in the same screen: scroll to it on click.
- Hold ⌥ while dropping onto a layer: this layer’s motion starts when that layer comes into view.
Edit the links on the canvas
With the Prototype tab open, the canvas draws a line for every link, overlay and swap.
- Click a line to open its interaction beside the panel.
- Drag the end of a line onto another frame to send it there.
- Press Delete to remove a selected line; ⌘Z brings it back.
- Press ⌘C on a selected line, select other layers and press ⌘V: they all get the same interaction.
Play it in Preview
Open Preview in any of these ways:
- Press ⌥⌘↩.
- Press Preview in the top bar.
- Press the play button on a frame’s name bar.
- Press Preview at the bottom of the Prototype tab.
Preview opens in a tab of its own beside your file. If your page has flows, the top bar’s Preview starts where the flow of the selected screen starts, or where the page’s first flow starts; without flows it starts on the selected frame.
Click through as anyone would. The arrow keys step through the page’s screens in order even without links, and R starts again. Press Done or Esc to leave.
Keep it live
Preview is a tab, not a copy. Change something in the file and the Preview tab shows it. If you ever doubt that it has caught up, press ⇧R to refresh it from the file.
Shortcuts
| Action | Keys |
|---|---|
| Prototype tab | ⌥9 |
| Design tab | ⌥8 |
| Preview | ⌥⌘↩ |
| Next frame in Preview | →, Space or N |
| Previous frame | ← |
| Restart | R |
| Leave Preview | Esc |
More keys and the scaling options are in Preview options.
Catches
- A section is not a screen. Select a frame inside it to link from it. A section with Part of the prototype turned off (in its Layout) keeps its frames out of Preview altogether.
- The ring only shows in the Prototype tab. In the Design tab, dragging a side resizes the layer.
- A click inside a card that also has a click runs only the inner layer’s interaction.
- Your browser may block the new tab when uxdeck is open in a plain browser window. uxdeck then plays the prototype in place and tells you so.
Linking and Preview are on every plan.