Related Videos

• Accessible prototypes in Figma

  Accessible prototypes in Figma allow you to navigate through content using a screen reader. To use accessibility mode in a prototype, you’ll first need to install a supported screen reader.

  Accessible prototypes are only available in the desktop browser and on the Figma desktop app. Accessibility mode does not work for mobile or mobile web prototypes. View a list of supported browsers →

  Supported screen readers

  Mac

  • VoiceOver: View the VoiceOver user guide for macOS →

  Windows

  • JAWS (Job Access With Speech): View Freedom Scientific's JAWS documentation →
  • NVDA (NonVisual Desktop Access): View the NV Access NVDA user guide →
    •  

  Activate accessibility mode

  After a screen reader is installed and enabled, you can activate accessibility mode in a Figma prototype a few different ways:

  Keyboard controls

  1. Press Tab to focus on the hidden Skip to content button. This button is the first interactive item on the page.
  2. Press Enter to turn on accessibility mode for the current prototyping session.

  A self-dismissing message that reads “Now adapting content for screen readers” displays at the bottom of the page. If enabled, your screen reader will also verbalize this message.

  Note: The Skip to content button is also available in screen reader menus, such as VoiceOver’s Form Controls rotor.

  Accessibility settings

  1. Select Options > Accessibility settings in the toolbar.
  2. Toggle Adapt content for screen readers to turn accessibility mode off.

  Deactivate accessibility mode

  To deactivate accessibility mode:

  1. Select Options > Accessibility settings in the toolbar.
  2. Select Adapt content for screen readers to turn accessibility mode off.

  Figma design to HTML mapping

  While in accessibility mode, Figma design elements are translated to HTML or HyperText Markup Language. Screen readers interpret HTML tags to understand the content and sections of a document, as well as which elements are available for a user to interact with on a page. Semantic HTML tags also allow a screen reader to communicate content that may be highlighted visually to a user.

  When considering how your Figma design elements translate to HTML:

  • The prototype actions Navigate to and Open link are seen by screen readers as links; all other actions are seen by screen readers as buttons
  • Any element in a prototype with an On click interaction is seen by the screen reader as an accessible button or link, depending on its triggered action
  • The screen reader navigates through links and lists within design text
    • Ordered and unordered lists are read as structured and nested lists
    • Inline links are seen by screen readers as accessible links
  • Any shapes with an image fill appear as an image and have their alt text populated with the layer’s name
  • Top-level frames, components, and component instances become labelled sections using layer names as the accessible label

  Using Tab to navigate follows the layer order of your prototype. If your content isn't read in the order you expect, open the Figma design file and change the layer order in the left sidebar. For frames with auto layout, navigation follows the order of the layout—either top to bottom or left to right.

  To learn more about accessible prototypes in Figma, check out this playground file and try it out yourself!

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

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

  1. Click outside the prototype - or hover over the top of the Presentation view area - to show the menu bar.

  2. Click Options in the top-right corner and select Disable default keyboard navigation to apply.

  3. A check will appear next to the setting to indicate the setting is enabled.

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

  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:
     • Mac: ⌘ 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:

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

  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 prototype connections

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view or can edit access access can view prototype connections and flows.

  Anyone with can view or can edit access to the file can view prototype flows and connections. This applies to anyone who views or accesses the file without explicit edit permissions.

  People with view access can see interactions between variants in a component set (interactive components). Viewers can only see variant interactions on main components, not instances.

  Note: There isn't currently a way to share a file with prototype connections turned on by default for viewers.

  View access

  Viewers can access all prototype connections on the current page, including any flows and starting points.

  To view connections on another page, viewers can select another page in the left sidebar.

  

  Connections and interactions

  1. Use the shortcut ⇧ ShiftE to toggle the visibility of any prototype connections. Figma will show any connections between frames, as well as the starting points for any flows.
     • Frames can have connections related to multiple flows. To view details of a specific interaction, select the connection and not the frame.
     • If a starting frame has multiple connections, select the starting frame to view all connections and interactions.
  2. View the connection details in the Interactions section of the sidebar.
     1. Type of interaction that triggers the flow. Prototype triggers →
     2. Prototype action and the destination. Prototype actions →
     3. Type of Animation. If this is an animation that supports a direction, you'll see the origin direction next to the animation name. For example: If the next frame comes from the right and moves left, Figma will show this as Right. Prototype animations →
     4. The easing curve for the interaction. This can be a preset value, like Ease out, or a custom easing curve. Prototype easing curves →
     5. Duration of the animation in milliseconds (ms).

  

  Tip! You can also toggle prototype connections from the toolbar. Select view settings (current zoom percentage) and toggle Prototype flows off or on. Adjust view settings →

  Prototype flows

  View prototype flows in the inspect panel of the right sidebar.

  1. Select Inspect in the right sidebar.
  2. View a list of any Flows on the current page.
  3. Prototype connections are hidden by default for anyone with view access.
     • Select to toggle visibility on.
     • Select to toggle visibility off.

     Note: This is the same setting as both the Prototype flows view setting and the keyboard shortcut (⇧ShiftE). Adjusting either of those settings will also toggle visibility in the Inspect panel.

  4. Hover over the flow to view the actions you can take:

     • Select to select the starting frame in the canvas. This will also allow you to view details in Interaction section of the sidebar
     • Select to copy link to clipboard
     • Select to open the flow in presentation view. Present designs and prototypes →

  

  Edit access

  If you have edit access to the file, you can view and edit any prototype flows and connections. This applies to any flows and starting points, as well as variant interactions on both main components and instances.

  Anyone with edit access to the file can access prototyping settings in the right sidebar. The Prototype tab allows you to view, edit, or create interactions and animations.

  There are a few ways editors can access prototype settings:

  • Select Prototype tab in the right sidebar to enter prototype mode.
  • Use the shortcut ⇧ ShiftE to open the Prototype tab and view any connections.

  

  Note: Figma won't display the inherited connections on the canvas by default. Select the instance to view its inherited connections.

• Comment on prototypes

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with at least can view access to a file can add and view comments.

  New to comments in Figma? Get started with 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 using the browser or Figma desktop and mobile app.

  Comment on prototypes

  Comment on prototypes in presentation view. You can comment if you have at least can view access to the file and 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. View prototypes →

  Add comments

  1. Open the prototype in Presentation view.
  2. Navigate to the screen you'd like to comment on.
  3. Click in the toolbar or press C. Your cursor will turn into a .
  4. Select a location to comment on:
     1. Click the location on the canvas where you'd like the comment to be pinned.
     2. Or, click and drag your cursor to select a region to comment on.
  5. Type your comment in the field provided. You can mention collaborators or add emoji to your messages.
  6. Click to send your message.

  Click again or press Esc to exit comment mode.

  Learn how to comment on prototypes using the Figma mobile app →

  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 to send your message. Figma will add your comment to the thread.

  Resolve comments

  When you've reached an agreement, or have resolved an issue, click [ICON] to resolve 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. Click to enter presentation view for the file.
  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.

  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. Click to enter presentation view for the file.
  2. Click Options in the toolbar.
  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.