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.
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.
- View the Device you selected in your Prototype settings
- FIgma will present the device against the Background Color you selected
- View your cursor or touch indicator (mobile only)
- Interact with Hotspots or enter Keyboard/Gamepad 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
- Access the Prototype settings
- Add comments to the Prototype
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 Settings
You can adjust a few settings while in Presentation View.
Want to adjust your device or prototype settings? Learn more in our Adjust your Prototype Settings article.
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.
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
Enter Full screen to make the Prototyping process more immersive.This will hide the Presentation View UI, soviewers aren't distracted by the additional settings. This is particularly handy when testing a Prototype with real users.
Click the Expand icon (two arrows) in the top-right corner of Presentation View.
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 the View icon (👁️) 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 the View icon (👁️) 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.