Play your prototypes
Before you start
Who can use this feature
Users on any team or plan can play prototypes
Anyone with can view access to a file or prototype can play prototypes. Anyone can adjust view options in presentation view.
Prototypes replicate how users might interact with your designs, allowing you to see and test how they work before moving to development. In Figma, build prototypes directly on the canvas. Then, play them to see prototype interactions and animations in action.
Before playing a prototype, prepare the design so that the prototype plays as desired.
Then, choose how you’d like to play the prototype:
- Preview: Play the prototype directly in the editor, with an inline preview. See how the prototype works as you build it—all in the same tab.
- Present: Play the prototype in presentation view, in a separate tab. Share the prototype with others or see how it looks on a specific device.
Prepare prototypes for play
The way frames and connections are set up on the canvas impacts how prototypes are played:
- The design must be within a frame in order to Preview or Present.
- If there are prototyping connections, Figma will only display those frames with connections while playing the prototype. Click through each screen or interact with any hotspots.
- If there are no prototyping connections, you can navigate through frames from the current page.
- Set up a flow starting point to determine where the user’s journey should start. You can set up multiple flow starting points.
- For presentation view, set the prototype’s device type, starting point, and background color in the prototype settings.
Once you’ve prepared the prototype for play, choose to Preview or Present your prototype.
Preview a prototype
Use inline preview to play your prototype directly on the canvas alongside your design. With inline preview, any design changes are immediately reflected in the preview so you can see changes in real time. When you click another frame on the canvas, the preview jumps to that frame.
To open inline preview, do one of the following:
- Click Preview in the top toolbar
- Clicking the preview icon on any flow starting point
- Use ⇧ Shift Space on your keyboard
From inline preview, you can:
- Use the left and right arrows to navigate back or forward through the prototype.
- Restart the prototype from the last selected frame on the canvas. You can also press R to restart.
- Open the overflow menu to choose from different scaling options for your prototype.
- Open the prototype in presentation view in a new tab.
- Click the X to close the inline preview.
- Resize the preview by clicking and dragging the edge of the preview window. Hold ⇧ Shift to scale it proportionally.
Overflow menu options
The overflow menu for the inline viewer contains different scaling and view options for your prototype. The options available will vary depending on whether you have a prototype device selected. Some of these options overlap.
Fit width
Scale the prototype so it fills the width of the display. Available only if the prototype device is set to No device or Presentation on the page.
Responsive
The contents of the prototype will resize and re-layout as the prototype viewer resizes according to the constraints and auto layout properties applied to the design. This allows you to view designs at different window sizes and check their responsive behavior. In order for Responsive to work, there must be constraints and auto layout settings applied to the design.
Follow prototype
The selected frame on canvas updates to mirror the current frame in inline preview. As you navigate through the prototype in preview, your canvas selection and position will follow.
Resize window/device to 100%
Resizes the viewer or device to 100% of the frame size.
Respect aspect ratio
The inline viewer window resizes to match the aspect ratio of the current frame. Available only when a prototype device is set to No device.
Show device frame
Show or hide the physical device frame. Available only when a prototype device frame is selected.
Present a prototype
Use presentation view to play your prototypes in a new tab. you can interact with hotspots or enter keyboard shortcuts within your prototype.
To open a prototype in presentation view on desktop, click Present in the toolbar, or use keyboard shortcut:
- Mac:⌘ Command⌥ Optionreturn
- Windows: ControlAltenter
Figma will present the device against the Background Color you selected.
Tip: Want to share your prototype with others? Learn more about sharing prototypes.
Want to play your prototype on mobile? Learn more about viewing protototypes on a mobile device.
Presentation view layout
Presentation view contains various options you can choose from to interact with a prototype.
From the left side of the toolbar, you can:
- Click the Figma logo to go to the file browser
- Click to show and hide the left sidebar, where you can select flows and view their descriptions.
- Click to enter comment mode and add comments to the prototype.
From the right side of the toolbar, you can:
- Click the arrow next to your avatar and choose to spotlight yourself or follow a presenter
- Share the prototype
- Open the options menu to select different settings for the prototype.
- Click to enter fullscreen mode.
From the bottom of the presentation view, you can:
- Use the left and right arrows to move between screens.
- Use the device switcher to switch to a similar device and access other scaling options. Available if a device frame is selected for the page.
- Click Restart or press R to return to the starting point of the current flow. If there are no flows, it will return to the first frame on the canvas.
Options menu
Click to open the options menu for additional settings.
The following options are always available:
Enable Figma shortcuts
Enable Figma keyboard shortcuts, such as:
- C to open comments
- F to enter fullscreen
When enabled, users can navigate through prototypes with keys, such as the left and right arrows on their keyboard.
When disabled, users can only navigate through prototypes by clicking through hotspots or clicking the left and right arrow icons at the bottom of the screen.
Show hints on click
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.
Make available offline
Preload your prototypes so you can present them while offline.
Accessibility settings
Accessibility settings help those with disabilities access and interact with a prototype. For example, those with visual impairments can adapt a prototype for screen readers and other assistive technologies.
Hide 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.
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.
The options menu also contains content and device scaling options to determine how your prototype or device frame displays and resizes. The types of scaling options available depends on whether you have a prototype device selected:
Scaling options without a device frame
If you don’t have a prototype device selected on the page, the options menu provides the following content scaling options:
Actual size (100%)
Display the prototype based on the full size of the design frame. Depending on the frame and the screen size, this may result in a cropped prototype.
Responsive
The contents of the prototype will resize and re-layout as the prototype viewer resizes according to the constraints and auto layout properties applied to the design. This allows you to view designs at different window sizes and check their responsive behavior. In order for Responsive to work, there must be constraints and auto layout settings applied to the design.
Fit width
Scales the prototype so it fills the width of the display.
Fit width and height
Shrinks the prototype so that both the width and the height fit within the viewer window. It will not scale up the prototype.
Fill screen
Scales the prototype horizontally and vertically so that it fills the entire display. It will not overflow any content of the design.
Depending on the size of frames, the prototype will default to certain scaling settings and different options will show in the Recommended and Other scaling options sections of the options menu:
|
Default scaling setting |
Other recommended and scaling options |
|
|
First frame is wider than 1024px |
Actual size (100%) |
Responsive |
|
First frame is narrower than 1024px |
Actual size (100%) |
Fit width and height |
|
All frames have a 16:9 format, or device type set to Presentation |
Fill screen |
Actual size (100%) |
|
If the device type is set to Custom |
Fit width and height |
Fill screen Actual size (100%) |
Scaling options with a device frame
With device frame, the options menu provides Responsive and Fixed size scaling options.
Responsive
The contents of the prototype will resize and re-layout as the prototype viewer resizes according to the constraints and auto layout properties applied to the design. This allows you to view designs at different window sizes and check their responsive behavior. In order for Responsive to work, there must be constraints and auto layout settings applied to the design.
Fixed size
Shows the design at 100% within the device. Depending on the frame and device size, this may result in a cropped prototype. You can control the size of the device with device scaling options.
If you have a prototype device selected, the device switcher becomes available at the bottom of presentation view, which allows you to choose prototype devices similar to the current one. It also has device scaling options for you to choose from:
Fit device on screen
Shrink the device frame so that it fits within the viewer window.
Zoom device to fill screen
Scale the device so that it fills the entire display.
Show device at 100%
Display the prototype at 100% of the frame’s size. Depending on the frame and the screen size, this may result in a cropped prototype.
Show device frame
If a prototype device is selected, this option allows you to show or hide the physical device frame.
Tip: Press Z on your keyboard while in presentation view to move between scale options.
Frame ordering and navigation
When playing your prototype, you can press →, Space, or N to navigate to the next frame, and ← to navigate to the previous frame. This setting is enabled by default.
The next 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.