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.

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.

Presentation view layout

Presentation view contains various options you can choose from to interact with a prototype.

Options menu

Click to open the options menu for additional settings.

The following options are always available:

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:

• Without a device frame ↓
• With a device frame ↓

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:

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:

Scaling options with a device frame

With device frame, the options menu provides Responsive and Fixed size 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:

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.

Learn how to set a device and starting point →