Prototypes replicate how users might interact with your designs. You can make connections between frames to create user flows, or pathways.
Presentation View allows you to see your prototypes in action. Use Presentation View while you build and test your prototype, or when you're ready to share your prototype with others.
Tip! Learn how to set your prototype's starting frame, background color, and device.
Interact with Prototypes
Access Presentation View from any file by clicking the Present button. This is the play icon on the top right side of the toolbar.
Figma will open the current File in Presentation View.
If you have Prototyping Connections, Figma will only display those frames with connections.
If you have no Prototyping Connections, you can click through to view all frames on the current page.
- Add comments to the prototype
- Set the prototype view Options and hide the toolbar or comments
- 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 arrows to navigate between frames
- Use the Restart button or keyboard shortcut [R] to return to the Starting Frame
Tip! Use Presentation View to present a slide deck, without having to create connections between slides. Navigate through Frames using the:
- On-screen arrows < >
- left and right arrow keys on your keyboard
- Enter or Return key
Adjust Presentation View options
You can adjust a few settings while in Presentation View using the Options menu.
Note: Adjusting Presentation View Scale settings in the Options menu will update the prototype's share link. Make sure to copy the updated link after making any changes.
The Scale determines what size we display your prototype in your viewport.
We only apply a Scale Mode to your view of the prototype, so you can adjust this to suit your preferences. 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.
Select a scale from the Options in the toolbar or press the Z key while in Presentation View to cycle between the scale sizes.
Tip! Share a Prototype with a different Scale mode by adding a Scale mode variable to the Prototype's URL:
- 100% - &scaling=min-zoom
- Fit - &scaling=scale-down
- Fill - &scaling=contain
- Width - &scaling=width
Hide prototype toolbar and footer
You can choose to hide the prototype UI in Presentation View. This is particularly handy when you are testing a prototype with real users and want to avoid any distractions.
When you hide the prototyping UI in Presentation View, Figma will:
- Hide the toolbar and footer
- Update the prototype URL with a &hide-ui=1 variable. Make sure to copy the updated link after making any changes.
- Display the option to copy the updated URL
- Remind you how to restore the toolbar and footer
- Keep the UI hidden from viewers unless the keyboard shortcuts to show toolbar and footer are used.
Hide the toolbar and footer
To hide the toolbar and footer:
- Enter Presentation View by clicking the play icon in the editor.
- Click Options in the toolbar.
- Disable Show Toolbar and Footer.
Or, use either of the keyboard shortcuts:
macOS: Command \ or Command .
Windows: Control \ or Control .
Once you've hidden the toolbar and footer, 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, 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 to make the Prototyping process more immersive.
To enter Fullscreen, click the Expand icon (two arrows) in the top-right corner of Presentation View. Press Esc or F on your keyboard to exit full screen view.
Note: If you've set your view options to hide the toolbar and footer, they will also be hidden in Full Screen
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.
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. When enabled, resolved comments 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 Give Feedback on Prototypes with Comments article.
Ready to share your designs? Check out our Share your Prototypes article.