Previewing prototypes

To start a preview in the Mac app, click the Preview button in the toolbar or press ⌘P. If you’ve set a Start Point, your prototype will start from there. If not, it’ll start from the currently selected frame.

1. Click anywhere in the Preview window to see hints that show you where Links and Hotspots are on the current frame.
2. The back button takes you back a step to the previous frame in your prototype.
3. The flag icon () sets the frame you’re currently viewing as a Start Point.

4. The Frames menu lets you jump to any frame in your prototype. Frames on the current page are listed below any start points; other pages appear as submenus.

   By default, the Preview window updates to show whatever frame you select on the Canvas. Open the menu and turn off Follow Selection to pin the preview to a specific frame — you can then select other frames or Symbols without the Preview window changing. Turning it back on immediately updates the window to match your current selection. Next time you open Preview, it’ll use whichever option you last chose.

5. The View Frame in Canvas icon opens the Mac app and takes you to the frame you’re previewing.
6. Display Mode lets you choose how the prototype displays: Fit, Fill Width, or Actual Size. The menu also includes Float on Top — turn it on to keep the Preview window above all other windows, including those from other apps, while you work. It’s off by default, and the setting carries over across documents and relaunches.
7. The Share icon copies a link to your prototype to your clipboard instantly. You can also share it via AirDrop, email, or other apps on your Mac.

When the Preview window is narrow and items don’t fit in the toolbar, you can still access everything from the overflow menu.

When you open a document in the web app, you can view any prototypes it contains by clicking the Prototypes link in the About tab of the sidebar. Click on a prototype’s thumbnail to open and preview it in your browser.

Hovering over the prototype’s thumbnail and clicking the gives you a couple of options for showing or hiding hints as you play your prototype.

1. Click anywhere in the Preview window to see clickable targets (Links and Hotspots) on the current frame.
2. Click to close the prototype and return to the document overview.
3. Restart Prototype takes you back to the prototype’s Start Point.
4. The Back and Forward buttons will step through frames that you’ve linked.
5. View options control how frames display in the browser window. The web app remembers your last setting:
   • Fit ⇧0: Resizes frames to fit your browser’s viewport.
   • Fill Width ⇧1: Automatically resizes to fill the browser width, keeping the prototype responsive as you resize the window.
   • Actual Size z: Shows frames at their original size.
6. Click Copy Link to share a link to the prototype, with options to show or hide navigational elements.
7. The View Frame button opens the frame being previewed in the web app.
8. The Full Screen button makes the window full screen. Press esc to exit full screen.
9. Click the Comment icon to view and add comments as you navigate the prototype.

When viewing a document, swipe up on the sheet at the bottom of the screen to see any prototypes below the frame thumbnails. Tap a prototype to open it in the prototype player.

As you test a prototype, tapping outside of Hotspots and links on the screen will reveal hints.

To exit a prototype, tap and hold anywhere on the screen to return to the document view.

When you’re viewing a document, tap on the (play) button in the top-right corner of the screen to start playing its prototype. If there are multiple prototypes in the document, tap on the one you want to play from the list that appears.

As you test a prototype, tapping outside of Hotspots and links on the screen will reveal hints.

To exit a prototype, tap and hold anywhere on the screen to return to the document view.