Preview designs and prototypes in Presentation View
Before you start
Who can use this feature
Users on any team or plan can use Presentation view
Anyone with can view access to a file or prototype can interact with prototypes in Presentation view. Anyone can adjust view options in Presentation view.
Prototypes replicate how users might interact with your designs. You can make connections between frames to create user flows, or pathways. Learn more in our Guide to prototyping in Figma.
Presentation View allows you to preview your designs in the browser. Use Presentation view while you build and test your prototype, or when you're ready to share your prototype with others.
- Preview static designs on specific devices
- Present slides for presentations
- Build and test interactions and animations
- Run usability tests with users
Present your designs in Presentation view
Use Presentation view to preview static designs, or interact with prototype connections you've created. Your design must be within a frame to preview it in Presentation view.
Click in the toolbar to access Presentation view from any file.
- If there are prototyping connections, Figma will only display those frames with connections. Click through each screen or interact with any hotspots.
- If there are no prototyping connections, you can navigate through frames on the current page.
Note: Figma orders frames based on their co-ordinates in the canvas. First, by their x co-ordinate from left to right, then their y co-ordinate from top to bottom.
If the y co-ordinate is offset in any way, then frames may appear out of order. To fix, you can set horizontal alignment for each row of frames to align-top.
From Presentation View you can:
- Click to enter comment mode and add comments to the prototype
- Set the prototype view Options and hide the toolbar or comments
- Click to enter fullscreen mode
- View the Device you selected in your prototype settings
- View your cursor or touch indicator (mobile device prototypes only)
- Figma will present the device against the Background Color you selected
- Interact with hotspots or enter keyboard shortcuts within your prototype
- Use the and icons to move between screens. Or use your arrow keys on your keyboard.
- Use the Restart button or press R to return to the Starting Frame
Tip! You can advance the prototype using the Enter or Return keys. Use the left and right arrow keys to navigate between screens.
Presentation view options
You can set your prototype's starting frame, background color, and device in the Editor. You can also adjust a few settings when you're in Presentation View.
- Click Options in the toolbar.
- From the options menu you can:
- Select the Scale of your design(s).
- Choose to Show Resolved Comments
- Choose whether to Show Only Your Comments.
- Choose whether to Show Hotspot Hints.
- Choose whether to Show Toolbar and Footer.
- Click to display Presentation view in fullscreen
Note: Adjusting some settings in the Options menu will update the URL for sharing the prototype. Make sure to copy the new URL if you make any changes.
Scale
Scale determines what size we display your prototype in your viewport. Choose from:
- 100% - Display at full size: Display the prototype based on the full size of the Frame. Depending on the Frame and the screen size, this may result in a cropped prototype..
- Fit - Scale down to fit (Default): Shrink the prototype so that it fits within the viewer's screen dimensions.
- Fill - Scale or up or down to fill: Scale the prototype so that it fills the entire display, on any screen size or resolution. Unlike Fit, Fill allows the prototype to be scaled up to fill larger screens.
- Width - Scale down to fit width: Scale the prototype so the width fits within the viewer's screen dimensions. This option is only available if you are using a custom Frame size and have no device selected.
Tip! Press the Z key in Presentation view to move between scale options.
Show resolved comments
If you are logged into your Figma account, you can make comments on a prototype. This includes responding to or resolving comments.
Choose whether to Show Resolved comments on the prototype. Resolved comments will appear alongside any new or unresolved comments.
- Click Options in the menu bar.
- Select Show Resolved Comments. A check will appear next to the setting when this is enabled.
- You can also choose to Show Only Your Comments in Presentation View.
- Select the setting again to remove the check and hide any resolved comments.
Note: If there are no comments on the prototype, then this setting will be greyed out and can't be updated. Learn more about comments in our Comment on prototypes article.
Show Hotspot Hints
Hotspot Hints help guide users through a prototype. They show where the Hotspots are in the prototype. When a user clicks outside of a Hotspot, Figma highlight any clickable areas with a blue bounding box.
- Click the screen - or hover over the top of the screen - to show the menu bar.
- Click Options in the menu bar and select Show Hotspot Hints on Click to apply.
- A check will appear next to the setting when this is enabled.
- Select the setting again to remove the check and hide Hotspot Hints.
Hide toolbar and footer
You can choose to hide Figma's prototype UI in Presentation view. This is useful when you're testing a prototype and want to avoid any distractions.
When you hide the prototyping UI in Presentation View, Figma will:
- Hide the toolbar and footer on your current view
- Update the prototype URL with a
&hide-ui=1
variable - Remind you how to restore the toolbar and footer
- Allow you to copy the updated URL. If you share this URL, Figma will hide the toolbar and footer for any other viewers.
Hide toolbar and footer
To hide the toolbar and footer:
- Click the Present icon in the toolbar.
- Click Options in the toolbar.
- A check will appear next to Show Toolbar and Footer when this is enabled. Select the setting to remove the check.
- Or, use either of the keyboard shortcuts:
- macOS: ⌘ Command \ or ⌘ Command .
- Windows: Control \ or Control .
- Click Copy Link to add the prototype's URL to your clipboard for sharing.
Show toolbar and footer
To restore the toolbar and footer in Presentation View, press Esc or use either of the keyboard shortcuts:
- macOS: ⌘ Command \ or ⌘ Command .
- Windows: Control \ or Control .
Note: When viewers open a Figma prototype set to hide the toolbar and footer, Figma will briefly show them a loading screen to let them know they are viewing a prototype. This loading screen will not display if the prototype is embedded.
Enter Fullscreen
Enter fullscreen to make the prototyping process more immersive. If you've set your view options to hide the toolbar and footer, they will also be hidden in fullscreen.
- Click the in the top-right corner of Presentation View.
- Press Esc or F on your keyboard to exit full screen view.
Ready to share your designs? Check out our Share your prototypes article.