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. Use Preview to 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. Use Present to 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, select to Preview or Present.
Preview your 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.
To open inline preview, click Preview in the top toolbar.
You can also open inline preview by clicking the preview icon on any flow starting point.
Alternatively, use Shift Space on your keyboard.
Use inline preview
From inline preview, you can:
- Click the left and right arrows to navigate through frames.
- Restart prototype: Restart the prototype from the last selected frame on the canvas. You can also press R to restart.
-
Overflow menu:
- Resize to aspect ratio: Adjust the size of the inline preview to match the aspect ration of the current frame.
- Follow active frame: When enabled, 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.
- Open in presentation view: Open the prototype in presentation view.
- Close the inline preview.
With inline preview, you can:
- Resize: Click and drag the edge of the inline preview to resize it. Hold shift to scale proportionally.
- Select frames on canvas: Click another frame on the canvas to jump the preview to that frame.
Present your prototype
Use presentation view to play your prototypes in a new tab.
Tip: Want to share your prototype with others? Learn more about sharing prototypes →
To open a prototype in presentation view, click Present in the toolbar, or use keyboard shortcut:
- Mac:⌘ Command⌥ Optionreturn
- Windows: ControlAltenter
Presentation view layout
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
- 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 of the current flow. If there are no flows, it will return to the first frame on the canvas.
Presentation view options
From the options menu, toggle on/off the following settings:
Disable default keyboard navigation
Disable default keyboard navigation to prevent users from navigating through prototypes with keys. Instead, users can only navigate through prototypes by clicking through hotspots or clicking and at the bottom of the screen.
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.
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.
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.
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.
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
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.