Present in a device

When you present a prototype, it plays inside a mockup: a phone for a phone screen, a browser window for a desktop page. You choose the mockup and the colour around it once per page, and every screen on it uses them. On a real phone, the prototype fills the screen like an app.

Choose the mockup

1. Click an empty spot on the canvas so nothing is selected.
2. Open the Prototype tab. The Present section is at the top.
3. Choose the Mockup:

Mockup	What it shows
Automatic (default)	Each frame in what suits it: the matching phone or tablet when it was made from a size preset, otherwise a phone up to 480 wide, a tablet up to 1,100, and a browser window above that.
Browser	A browser window.
Phone	A phone.
Tablet	A tablet.
None	The screen alone.

The icon in the field shows what Automatic chose.

4. Choose the colour around it in the second field: Black (default), Graphite, Light grey or White.

Press the play button in the Present section, or ⌥⌘↩, to present.

Present

Presenting opens Preview in a tab beside your file, scaled to fit your window, mockup and all. In Preview:

• Options, then Show device frame, hides or shows the mockup for you.
• Options, then Hide UI, removes the bar and the footer for a clean screen. Move the pointer to bring back Show UI.
• F goes full screen.
• Responsive scaling drops the mockup and fills the window, so you can resize it and watch your breakpoints switch.

All the options are in Preview options.

Share it

Each flow has Copy link, which plays that journey. Whoever opens it needs access to the file; see Share a file. The bar in Preview shows who else is watching.

Play it on a phone

Open the file in uxdeck on your phone and press Play prototype. The prototype fills the screen: no mockup, no bar.

• A pager with the previous and next screen shows for a moment as it opens, on each new screen, and when a tap lands on nothing.
• A desktop design shows in its own shape while the phone is upright; turn the phone and it fills the screen.
• Press and hold with two fingers for the menu: Flows, Screens, Restart, Hotspot hints (a tap that misses outlines what can be tapped), Share prototype, View file and Go to Home.

A tip explains the two-finger hold the first time.

Catches

• The mockup is set per page, not per frame. Automatic is how a page with phone and desktop screens gets the right one for each.
• The mockup is for presenting only. It never appears in your published site or exports.
• On a phone, uxdeck does not edit. Tablets 768 wide and up get the full editor.
• Hover does not exist on a touch screen. Prototypes that rely on While hovering need a click as well to work on a phone.

Presenting is on every plan.