Prototype
Choose the width and scaling Preview plays at, turn hints and shortcuts on or off, and hide the interface.
Checked against uxdeck on 16 October 2026
Preview plays your prototype the way people will meet it. Its top bar lets you pick a screen and a width, choose how the design is scaled to your window, replay motion, and tidy the interface away when you show it to someone. These are your own settings for watching: they never change the file.
The bar
From left to right:
- Flows: the page’s flows, to start another one. Shown when the page has flows.
- Frame: jump to any screen on the page.
- Widths: Phone (390), Tablet (768) and Desktop (1280), plus the frame’s own width when it is none of these. When the screen has linked breakpoints, you see their names instead, and each one plays its own frame.
- Replay and Reduce motion: shown when the screen has motion. Replay plays it from the top; Reduce motion shows the page as people who ask for less motion see it.
- Scaling and Options (the two icon buttons), then full screen.
- Done (Esc) leaves Preview.
At the bottom, a bar steps to the previous and next frame, shows where you are (such as “3 / 8”) and has Restart.
Scaling
The Scaling menu sets how the design fits your window. Z steps through the options.
| Option | What it does |
|---|---|
| Scale to fit (default) | Shrinks the whole screen, mockup included, to fit the window. Never enlarges it past its real size. |
| Actual size (100%) | Shows it at its real size; the window scrolls if it is bigger. |
| Responsive | Takes the window’s width and switches between this page’s breakpoints as you resize. Shown without a device around it. |
| Fit width | Fills the window’s width, larger or smaller. |
| Fill screen | Covers the whole window; some of the design may be cut off. |
Picking a width in the bar leaves Responsive for Scale to fit at that width.
Options
The Options menu holds:
- Enable shortcuts (on): the keys below work. Turn it off when your prototype listens for those keys itself, so only the prototype answers.
- Show hints on click (on): a click that lands on nothing clickable briefly outlines what can be clicked.
- Show device frame (on): the phone or browser drawn around the screen. Offered when the page has a mockup.
- Hide UI: removes the bar, the footer and the flows. Move the pointer and a Show UI button appears to bring them back.
The menu also lists the keys, as a reminder.
Keys
| Action | Keys |
|---|---|
| Next frame | →, Space or N |
| Previous frame | ← |
| Restart | R |
| Change scaling | Z |
| Full screen | F |
| Refresh from the file | ⇧R |
| Leave Preview | Esc |
A key that your prototype uses for a Key/Gamepad interaction belongs to the prototype on that screen, not to Preview.
Who is watching
The bar shows who else has the file open, so you know who can see what you are presenting, and lets you invite someone.
Catches
- Preview’s widths are not the breakpoint sizes. Phone, Tablet and Desktop here are 390, 768 and 1280; a breakpoint you made at another width plays at its own width.
- Fonts this device lacks are mentioned in the bar, so a stand-in font is not mistaken for your design.
- Restart forgets everything the prototype remembered: variables set, modes switched and variants changed.
- Enable shortcuts, Show hints on click and Show device frame are kept in this browser for you alone; another viewer has their own. Hide UI is for this showing only.
Preview and all its options are on every plan.