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.

• View prototypes on a mobile device

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view access can view prototypes.

  Anyone with can edit access can mirror frames.

  You will need a Figma account to use the Figma mobile app.

  New to the Figma mobile app? Read our guide to the Figma mobile app →

  Prototypes replicate how users might interact with your designs. Use the Figma mobile app to preview prototyping interactions on the device you're designing for.

  It's only possible to preview frames with prototyping connections. If you don't have any connections set up yet, check out our guide to prototyping in Figma.

  Figma mobile app

  Use the Figma mobile app to preview both static designs and prototyping interactions. You can preview your prototype using presentation view in the app or by mirroring frames from your desktop.

  Note: Video in prototypes are not currently supported on the Figma mobile app.

  Presentation view

  1. Sign in to the Figma mobile app.
  2. Use the Recent or Search tabs to find the file or prototype you want to view.
  3. Tap the file or prototype to open it. From the file, press to present the prototype.

  

  The prototype will play according to its flow starting point.

  Note: Frames must have prototype connections to be interactive in presentation view. Learn how to build prototypes →

  Prototype options

  Prototypes have a hidden options menu bar. To access it, press and hold anywhere on the screen. The menu lets you:

  • Switch between flow starting points
  • Restart the prototype from the flow's starting frame
  • View the file for the prototype
  • Toggle hotspot hints
  • Share the prototype link
  • Exit the prototype and return to the Recent tab

  

  Mirror view

  Use the Mirror tab of the mobile app to view frames that are selected in the file on your desktop.

  • View real-time edits to a frame on a mobile device
  • Preview how assets in your design look scaled to a device screen

  The Figma mobile app will work on either wi-fi or cellular data. You don't need to connect to the same wi-fi network to establish a connection between the two.

  To mirror frames:

  1. Log into Figma and the Figma mobile app using the same login details.
  2. Open the file you want to mirror on your desktop.
  3. From the file on your desktop, select a top-level frame you want to mirror. You must select a frame to mirror to a mobile device.
  4. On your mobile device, navigate to the Mirror tab of the Figma mobile app.
  5. The Figma mobile app will display the selected frame, scaled to the width of the device you are previewing it on.

  If the frame you selected is part of a prototype, you can interact with with any connected frames.

  Tip! If your mobile device isn't supported by the Figma mobile app, you can mirror prototypes using a mobile browser ↓

  Mobile browser

  Presentation view

  You can preview any design on your mobile by opening a prototype link in your mobile browser. This will allow you to navigate through any prototyping connections.

  Figma displays your designs inside a regular browser window, so the browser's header and footer will still be visible. To replicate an in-app experience without an address bar, we recommend using the Figma mobile app.

  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's address bar in presentation view. Or click Share in the toolbar, then Copy link.
  2. On your mobile device, click on the link to open the prototype, or paste the URL in your mobile browser.
  3. Figma will scale the prototype to your display. You can now interact with the prototype using any hotspots.

  Note: If you are sharing your prototype via public link access, anyone with the link will be able to view your prototype. If the file isn't shared via public link access, you will only need a free Figma account to view the file. Share prototypes →

  Mirror view

  You can also mirror frames via the browser. We recommend this approach if your device isn't supported by the mobile app or you want to preview designs in a web browser.

  1. Open the file you want to preview in the Figma desktop app, or in a browser window.
  2. Visit figma.com/mirror from the mobile browser on your device.
  3. Log in using the same account details and the desktop app or browser.
  4. From the file on your desktop, select a top-level frame you want to mirror. You must select a frame from your desktop to mirror to a mobile device.
  5. Figma will display the selected frame in the mobile browser.

  Troubleshooting

  If you are having trouble using the Figma mobile app, we recommend the following:

  • Make sure you're using a supported device.
  • Make sure you have selected a top-level frame to mirror to your mobile device.
  • Make sure you're logged into both the desktop version and Figma mobile app under the same account. You may need to log out and sign in again to confirm.
  • If you're running into issues while previewing, you may need to force quit the app and restart it on your device.
  • If problems persist, we recommend uninstalling the app and downloading it again. Find the Figma mobile app in the Apple App Store or Google Play Store.
  • If you're still having issues, get help from the Figma Support team.

  Visit the Figma Forum to ask questions, share feedback, and connect with the Figma community!