Prototyping In Figma
Guide to prototyping in Figma
Who can use this feature
Supported on any team or plan.
Anyone with can edit access can create prototypes.
Anyone with can view access can play back prototypes in Presentation view.
Figma’s prototyping features allow you to create interactive flows that explore how a user may interact with your designs.
Prototypes are a fantastic way to:
Preview interactions and user flows
Share and iterate on ideas
Get feedback from collaborators
Test interactions with users
Present your designs to stakeholders
Watch our video on prototyping below. Or, check out our Prototype & Collaboration Playlist on Youtube.
Flows and starting points
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 the network of frames and connections in a single page. A prototype can map out a user's entire journey through your app or website, or it can focus on a specific segment of it via its own flow. For example: your prototype covers all possible interactions on an eCommerce site. Within the prototype, you have flows for creating an account, adding items to a cart, and checking out.
Figma creates a flow starting point when you add your first connection between two frames. There are a few other ways to add a flow starting point to your prototype:
With the starting frame selected, click in the Flow starting point section of the right sidebar.
Right-click on the frame, then click Add starting point.
Duplicate a frame with an existing starting point.
When it's time to test your designs, you can share the entire prototype or copy the link to a flow starting point.
Learn more about starting points and flows →
Note: A top-level frame can be part of multiple flows, but can only have one starting point. Frames nested within a top-level starting frame can have connections that navigate the user around multiple flows. For example, Log in and Sign up buttons can be nested in the same starting point frame, then be connected to frames in separate flows for each experience.
Create connections
Select the hotspot for the connection.
Click to create the connection.
Drag it to the destination.
If there are no existing connections, Figma will make the first frame a starting point.
Create interactions and animations
Open the Prototype tab in the right sidebar
Add interactions
Set interaction details
Apply an animation
Preview your animation
Adjust prototype settings
Select a Device and Model
Preview your prototype
Select Background color
Set the prototype's Starting Frame
Learn more about prototyping
Get started
Prototype actions, triggers and animations
Advanced interactions
Share and collaborate
Glossary
A hotspot is where the Interaction takes place. A hotspot can be any object within the original frame e.g. a link, button, image or icon, etc.
Connections are the blue arrows or "noodles" that connect the hotspot to the destination. We apply the interaction and animation settings via the connection.
A flow is the network of connected frames that form a path through a prototype. Each flow has its own starting point. You can have multiple flows within a prototype.
The** starting point** is the first frame of a flow. Set multiple starting points to show different flows of the prototype in Presentation view.
The trigger determines what type of interaction with the hotspot will cause the prototype to advance. This could be a mouse or touch interaction e.g. tap, drag, click, hover, etc.
The destination is where the transition ends. This must be a top-level frame - a frame that is added directly to the canvas - and not an object within a frame. If we think of moving from A to B, A is the hotspot and B is the destination.
The action defines the type of progression is occurring in the prototype. For example, the action could be to navigate to another frame, or open an external URL.
The animation settings determine how the prototype moves from one frame to the other. You can control the type of animation, as well as the speed and direction.
A transition is the type of animation. This defines how the action moves to the destination.
The direction controls the direction that the transition comes from. Choose between left, right, top or bottom.
The duration controls the time it takes to complete the animation. The shorter the duration, the faster the transition. Select a duration between 1ms and 10000ms (10 seconds).
Easing affects the acceleration of the animation, i.e. whether it starts slow or fast. This allows you to build animations that feel more natural.
Overlays are frames that appear above the current screen or frame. You can use overlays to create tool-tips, interactive menus, alerts, or confirmations.
Overflow behavior allows you to define how your prototype responds to scrolling. This allows you to create more advanced user interactions e.g. carousels, galleries, or interactive maps.
Choose which device will be shown when presenting your prototype. Define both the device and the model.
The background color lets you define the color in the background of your prototype.
If you have a prototype with portrait and landscape frames, you can select an orientation. The orientation is set for the entire prototype. It's not possible to switch between portrait and landscape view within a prototype.
A preview will show you how something will look or work in the prototype. We show previews for both animations and prototype device settings.
Last updated
