Present designs and prototypes
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.
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
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.
To access presentation view from any Figma design file, click in the toolbar, or use keyboard shortcut:
- Mac:⌘ Command⌥ Optionreturn
- Windows: ControlAltenter
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.
From presentation view you can:
- Click to show and hide the left sidebar
- Click to enter comment mode and add comments to the prototype
- View and select flows
- View a flow's description
- Set the prototype view Options and hide the toolbar or comments
- Click to enter fullscreen mode
- Figma will present the device against the Background Color you selected
- View the Device you selected in your prototype settings
- View your cursor or touch indicator (mobile device prototypes only)
- Interact with hotspots or enter keyboard shortcuts within your prototype
- Use and to move between screens. Or use your arrow keys on your keyboard
- Use the Restart button or press R to return to the starting point
Presentation view options
You can set your prototype's starting point, 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:
- Disable default keyboard navigation
- Show resolved comments
- Show only your comments
- Show hotspot hints on click
- Show sidebar to select a flow starting point when more than one exists
- Show Figma UI to display or hide the header, footer, and sidebar
- 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.
Frame ordering and navigation
In presentation view, you can navigate your prototype using →, Space, or N to navigate to the next frame, and the ← to navigate to the previous frame. This setting is enabled by default.
The next frame and previous frames are determined by the frames's position on the canvas or by the prototyping connections you've created.
Prototypes with a flow starting point
If your prototype has a starting point, Figma will create a "history" of frames you've visited when viewing the prototype.
-
←will go to the previous frame, if one is available. -
→will navigate to the next frame. If there is no history—like after using←—then it will navigate to an adjacent frame you haven't visited.
Prototypes without a flow starting point
If a prototype doesn't have a flow staring point, 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.
-
←will go to the previous frame if one is available. -
→will navigate to the next frame. First by x co-ordinate, then y-co-ordinate.
Learn how to set a device and starting point →
Disable default keyboard navigation
You may want to disable the default keyboard navigation. This can be useful when using prototypes for user tests to discourage a study participant from using the keyboard.
To disable keyboard navigation:
-
Click outside the prototype - or hover over the top of the Presentation view area - to show the menu bar.
-
Click Options in the top-right corner and select Disable default keyboard navigation to apply.
-
A check will appear next to the setting to indicate the setting is enabled.
-
Click the setting again to remove the check and enable keyboard navigation. A toast notification will appear at the bottom of Presentation view to confirm the changes.
Scale
Scale determines what size we display your prototype. Choose from:
- Actual size (100%): 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 to screen: Shrink the prototype so that it fits within the viewer's screen dimensions.
- 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.
- Fill screen: Scale the prototype so that it fills the entire display, on any screen size or resolution. Unlike Fit width, Fill screen allows the prototype to be scaled up to fill larger screens.
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.
Show sidebar
Prototype flows are listed in the left sidebar, along with any descriptions added to them. To hide or show the sidebar when in presentation view, click in the top toolbar. You can also check Show sidebar from the Options menu in the top toolbar.
When the sidebar is shown, the prototype's share link is updated with a &show-proto-sidebar=1 variant.
Learn more about adding flow and starting points →
Note: The option to Show Figma UI includes displaying the sidebar only when Show sidebar is also checked in the Options menu. When you toggle the Figma UI off and on, the sidebar is displayed only if Show sidebar is checked.
Show Figma UI
You can choose to show or 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 Figma UI in Presentation View, Figma will:
- Hide the toolbar and footer on your current view.
- Hide the flows sidebar if Show sidebar is checked in the Options menu.
- Update the prototype URL with a
&hide-ui=1variable. - Remind you how to restore the toolbar and footer.
- Allow you to copy the updated share link. If you share this link, Figma will hide the toolbar, footer, and sidebar 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:
- Mac: ⌘ 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:
- Mac: ⌘ 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.
