Related Videos

• 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.

  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.

  Learn how to set a device and starting point →

  

  From Presentation view you can:

  1. Click to show and hide the left sidebar
  2. Click to enter comment mode and add comments to the prototype
  3. View and select flows
  4. View a flow's description
  5. Set the prototype view Options and hide the toolbar or comments
  6. Click to enter fullscreen mode
  7. Figma will present the device against the Background Color you selected
  8. View the Device you selected in your prototype settings
  9. View your cursor or touch indicator (mobile device prototypes only)
  10. Interact with hotspots or enter keyboard shortcuts within your prototype
  11. Use and to move between screens. Or use your arrow keys on your keyboard
  12. 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:
    • Show Resolved Comments
    • Show Only Your Comments
    • Show Hotspot Hints
    • 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.

  Scale

  Scale determines what size we display your prototype. 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.

  1. Click Options in the menu bar.
  2. Select Show Resolved Comments. A check will appear next to the setting when this is enabled.
  3. You can also choose to Show Only Your Comments in Presentation view.
  4. 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.

  1. Click the screen - or hover over the top of the screen - to show the menu bar.
  2. Click Options in the menu bar and select Show Hotspot Hints on Click to apply.
  3. A check will appear next to the setting when this is enabled.
  4. 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=1 variable.
  • 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:

  1. Click the Present icon in the toolbar.
  2. Click Options in the toolbar.
  3. A check will appear next to Show Toolbar and Footer when this is enabled. Select the setting to remove the check.
  4. Or, use either of the keyboard shortcuts:
     • macOS: ⌘ Command \ or ⌘ Command .
     • Windows: Control \ or Control .
  5. 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.

  1. Click the in the top-right corner of Presentation view.
  2. Press Esc or F on your keyboard to exit full screen view.

  Ready to share your designs? Check out our Share your prototypes article.

• View prototypes on a mobile device

  Before you start

  Who can use this feature

  Anyone on any team or plan can view prototypes on mobile devices.

  Anyone with at least can view access to a file can preview prototypes on mobile. Anyone with can view prototype only access can view prototypes.

  Prototypes replicate how users might interact with your designs. Once you have created a prototype, you can view it on both desktop and mobile devices.

  It's only possible to preview frames with prototyping connections. If you don't have any connections set up yet, check out our Build prototypes with interactions and animations article.

  There is no way to hide the address bar of your mobile browser for prototypes. To view prototypes on mobile, without seeing the address bar, we recommend using the Figma mirror app.

  Mobile browser

  The only thing you'll need to open a prototype link on a mobile device is a reliable internet connection.

  You can only interact with prototypes on mobile devices using hotspots. Using the browser back action isn't supported on mobile devices.

  1. Copy the prototype link from the browser in Presentation View, or from the share modal.
  2. Click on the link to open the prototype, or paste the URL in your mobile browser.
  3. Figma will recognize what device you are using and scale the prototype to your display. 
  4. Interact with the prototype using any hotspots.

  There isn't currently a way to remove the browser UI in the mobile browser. Check out the Figma mirror app instructions below for a more immersive experience.

  Want to use your mobile device as a remote? Control Prototypes in Presentation view using Observation mode.

  1. Log in to Figma on a desktop computer.
  2. Log in on your mobile device (not supported via Figma Mirror).
  3. On your desktop, click on your mobile avatar to observe your actions.
  4. Use your device to navigate between frames.

  Figma Mirror

  Preview static designs and interactions in the Figma mirror app. This allows you to create a more realistic and immersive environment, without the browser header and footer.

  Note: Some prototyping interactions aren't supported in the Figma Mirror app. One example is overflow behaviors.

  Preview prototypes

  1. Log in to the Figma Desktop or Figma web app on a desktop device.
  2. Open the file you want to preview and select the starting frame of the prototype.
  3. Log in to the Figma Mirror app on your mobile device, using the same login details.
  4. Figma will then load the same frame in the Figma Mirror app.
  5. You can then interact with any frames in that file with Prototyping connections.

  Tip! You can also use Figma Mirror in the browser. Visit figma.com/mirror instead of opening the Figma Mirror app on your mobile device.

• Comment on prototypes

  Before you start

  Who can use this feature

  Users on any team or plan can leave comments on prototypes. You will need to be logged into your Figma account to add and respond to comments.

  Anyone with access to the prototype can leave comments.

  Comments takes collaboration to the next level. They are a great way to give and receive feedback. You can add and reply to comments on files and prototypes.

  To add comments to prototypes:

  • Log in to your Figma account
  • View a prototype in Presentation view
  • View other comments on prototypes in Presentation view

  Comment on prototypes

  Comment on prototypes in Presentation view. You can comment if your have can view or can edit access, as long as you are logged in to Figma.

  Note: Prototypes with the toolbar and footer hidden will not display comments. You will need to show the toolbar and footer to comment.

  New comments

  1. Open the prototype in Presentation view.
  2. Go to the screen you'd like to comment on.
  3. Click on the comment icon in the menu bar. Your cursor will turn into a pin icon.
  4. Click on a location in the prototype.
  5. Type your comment in the field provided. You can @mention collaborators or add emoji to your messages. Click Post when you're ready.
  6. Click the comment icon again or press Esc to exit comment mode.

  Reply to comments

  You can only view and reply to these comments from Presentation view.  When you click on a comment, you'll be prompted to join the conversation. Figma will thread any replies.

  1. Click the on the comment to view the message.
  2. Click in the Reply field to enter your response. You can @mention collaborators or add emoji to your messages.
  3. Click Reply to post. Figma will add your comment to the thread.

  Tip! You can add Mentions or Emoji to your Comments. Learn more in our Give Feedback with Comments article.

  Resolve comments

  When you've reached an agreement, or have resolved an issue, click Resolve on the comment.

  Figma will remove the comment icon from the prototype. You can still access resolved comments, if you enable that setting (see below).

  Adjust your Comment Settings

  Show Resolved Comments

  As long as you are logged in to your Figma account, you will be able to make comments on a prototype. You will be able to respond and resolve comments.

  You can decide if you would like to show resolved comments on the prototype. This will display any comments you've already resolved alongside new or outstanding comments.

  1. Access Presentation view from your file by clicking the Present  button.
  2. Click Options  in the toolbar.
  3. Select Show Resolved Comments. A check will appear next to the setting when this is enabled.
  4. Select the setting again to remove the check and hide any Resolved Comments. disable.

  Note: If there are no comments on the prototype, then this setting will be greyed out and can't be updated.

  Show Only Your Comments

  You can also choose to only view your own Comments.

  1. Access Presentation View from your file by clicking the Present icon.
  2. Click Options  in the menu bar.
  3. Select Show Only Your Comments. A check will appear next to the setting when this is enabled.
  4. Select the setting again to show comments from all collaborators.