Set prototype device and starting point
Before you start
Who can use this feature
Supported on any team or plan.
Anyone with can edit access to the file can adjust the prototype Presentation view settings.
Users can preview and interact with prototypes in Presentation view. You can choose how Figma presents the prototype using the prototype settings.
Prototype settings
Access and adjust your prototype settings in the Prototype panel of the right sidebar by clearing your selection in the canvas.
- Select a Device and Model
- Preview your prototype
- Select Background color
- View and present Flows
Tip! You can also access these settings by clicking the Show prototype settings button when editing a connection.
Device
Use Device settings to control how your prototype looks in Presentation view.
Device
Figma has a number of popular device presets. The dimensions of your prototype frames will define what options are available.
- Frame preset: If you used a frame preset, Figma will select a device that matches that preset. You can select another device if desired. For example: if you used the iPhone 11 Pro Max frame preset, Figma will select the iPhone as the device too.
- Custom Size (Fit) will automatically scale the design, so that it fits within the screen you are viewing the Prototype on.
- Presentation Size (Full) will display the Prototype to a size that allows it to be displayed on the screen, in its entirety.
Orientation
Control the orientation of the device in Presentation view. Choose from:
- Portrait
- Landscape
Note: It's not possible to switch between orientations within a prototype. This is something to bear in mind if you have frames in your prototype across both orientations.
Model
Some devices offer variations on model. For example: the iPhone 11 Pro Max comes in four different colors. You can choose which color-way you would like to use.
Depending on the device you selected, you can specify a certain Model.
Preview
View a Preview of how the device will look in Presentation view.
Background color
Set the Background color of the prototyping screen. You'll see this color behind your selected device.
Set this to a neutral color, or customize this with a brand color for extra polish.
Starting point
With prototyping in Figma, you can create multiple flows for your prototype in one page to preview a user's full journey and experience through your designs. A flow is a path users take through the network of connected frames that make up your prototype. For example, you can create a prototype for a shopping app that includes a flow for account creation, another for browsing items, and another for the checkout process–all in one page.
When you add a connection between two frames with no existing connections in your prototype, a flow starting point is created. You can create multiple flows using the same network of connected frames by adding different flow starting points.
Note: If there are no prototyping connections between frames in your file, Figma orders frames as they are in the canvas, by row (left to right) then column (top to bottom).
There are a few ways to add a flow starting point to your prototype:
- Select the starting frame, then click in the Flow starting point section of the right sidebar.
- Select and right-click the starting frame, then click Add starting point.
- Add a connection between two frames with no existing connections or starting points.
- Duplicate a frame with an existing starting point.
Edit flow name
Once you've created a flow, Figma will name it Flow 1 by default, with additional flows being Flow 2, Flow 3, and so forth. You can rename a flow and add a description at any time.
There are a couple ways to rename a flow:
- Double-click the starting point flag on the canvas and edit.
- Select the starting frame and edit the name field in the Flow starting point section of the right sidebar.
Once renamed, the flow name is displayed in the frame's starting point flag and the left sidebar in Presentation view. You can see all starting points for a prototype when you clear your selection while in the Prototype tab or the right sidebar.
Add flow description
Flow names and descriptions are displayed in the left sidebar when in Presentation view. Descriptions can be formatted with bold text, numbered or bulleted lists, and hyperlinks. Use descriptions to provide prompts to usability test participants or additional context and documentation for your team.
To add a flow description:
- Select the frame with the flow starting point.
- Click in the Flow starting point section of the Prototype tab.
- Add a rich text description.
- Click to save the description.
Once added, the description is displayed in the left sidebar in Presentation view. You can hide the flows sidebar and descriptions at any time.
Move starting point
By default, Figma uses the first connection you create as the Flow starting point. You can move a starting point to another frame. To do so, click and hold the blue starting point flag next to the current starting frame. Drag the icon to the new starting frame. This must be a top-level frame, a frame that isn't nested within another layer or frame.
Note: If you enter Presentation view with nothing selected, your prototype will start from the set starting frame. If you select another frame in the Editor before presenting, your prototype will start on the selected frame. If you select another frame after presenting it won't impact what you see in Presentation view.
Copy flow link
There are a couple ways to share the flow link for a specific starting point with usability testers and collaborators.
From the Prototype tab of the right sidebar:
- Press Esc or click an empty space on the canvas to clear your selection.
- Hover over the flow name and click to copy the link.
From Presentation view:
- Select the flow you want to share from the left sidebar.
- Click Share prototype in the toolbar.
- Click Copy link.
