Prototype interactions and animations
Before you start
Who can use this feature
Users on any team or plan can create prototypes.
Anyone with can edit access to a file can create prototypes.
Anyone with can view access to a file, or can view prototypes only access, can view prototypes.
Prototypes replicate how users might interact with your designs. You can make connections between frames to create flows, or pathways, through an interactive design.
Create a connection
The connection consists of three parts:
- Hotspot: where the user's interaction will take place. A hotspot can be the frame itself, or an object within the frame. You can create a hotspot on anything, like a button, icon, or heading.
- Connection: the arrow or "noodle" that connects the hotspot to the destination. Both the Interaction and Animation are determined through the connection.
- Destination: the next step in our prototype where a connection ends. In most cases, the destination must be a top-level frame. Only connections using the Scroll to action can be set to a destination within the same top-level frame.
What are top-level frames? Frames you have added directly to the canvas. In a prototype, this would be an individual screen in your design.
In Figma, you can place a frame within another frame. We call this process nesting. For Figma to consider a frame as a top-level frame, you must not place it within another Frame.
Top-level frames have bolded names in the Layers panel of the left sidebar.
Learn more about parent-child-sibling relationships in Figma →
Create a connection:
- Navigate to the Prototype tab of the right sidebar.
- Select a layer or object for the connection's hotspot.
In our example below, we add a hotspot to the frame on the left. The connection takes us to the destination, which is the frame on the right.
Create and edit connections in bulk
Create connections in bulk
You can create connections from multiple objects at once. This can help you save time when creating multiple connections to the same destination.
- Select your starting objects, or hotspots, where the connections begin. You can select multiple objects via one of the following methods:
- Select an initial object, then hold down shift while clicking additional objects.
- Drag your cursor across any objects you want to select. This will create a blue box around the selected objects.
- Click from the border of one of the selected objects.
- Hold and drag the connections to the destination frame.
All selected objects will now have connections to the same destination frame.
To edit the interactions or animations of the created connections, use the Interactions menu from the Prototype tab of the right sidebar.
Edit connections in bulk
If you have multiple connections, you can edit the destination of those connections at the same time.
- Navigate to the Prototype tab of the right sidebar in order to see all created connections.
- Select the connections you want to edit. You can select multiple connections via one of the following methods:
- Select an initial connection, then hold down shift while clicking additional connections.
- Drag your cursor across any connections you want to select. This will create a blue box around the selected connections.
- Hold and drag the connections to a new destination frame. You can also select the interaction from the right sidebar and change the destination frame from the Interaction details panel.
To edit the interactions or animations of the selected connections, use the Interactions menu from the Prototype tab of the right sidebar.
Create an interaction
Once you have created a connection, you can define the type of interactions users can have with it. You're able to create multiple interactions from the same layer or object.
- Navigate to the Prototype tab of the right sidebar.
- Select a layer or object for the connection's hotspot.
- Click the on the right of the frame's bounding box and drag it to the destination frame. You can also click the in the Interactions section of the Prototype panel, then select the destination frame using the dropdown menu.
- Once the connection has been made, use the Interaction Details panel to adjust the trigger, action, and destination.
A single object can have:
- Any number of Key[board]/Gamepad and Drag interactions. This lets you use multiple drag directions and keyboard/gamepad triggers.
- One of each of the following interactions:
- On Click / On Tap
- While Hovering
- While Pressing
- Mouse Enter
- Mouse Leave
- Mouse Down / Touch Press
- Mouse Up / Touch Release
- After Delay
Note: You're not able to combine On Click / On Tap with While Hovering, since the action for the first interaction will make the action from the second on that object unreachable once executed.
Trigger
The trigger defines what type of interaction will cause the prototype to advance forward. This could be a mouse click, touch gesture, or the time elapsed in the current frame.
Figma has nine triggers available:
- On Click / On Tap
- On Drag
- While Hovering
- While Pressing
- Key[board]/Gamepad 🕹
- Mouse Enter
- Mouse Leave
- Mouse Down / Touch Press
- Mouse Up / Touch Release
- After Delay
Learn more about Figma's prototyping triggers →
Action
The action defines what happens when the user interacts with the hotspot. This could mean moving to another frame, engaging an overlay, or opening a link.
Figma has six actions:
- Navigate to
- Change to (interactive components)
- Open overlay
- Scroll to
- Swap overlay
- Back
- Close overlay
- Open link
- Play video
- Pause video
- Play/Pause video
Learn more about Figma's prototyping actions →
Destination
The destination is the last step in a prototype interaction. This could be another screen in the prototype, or an overlay that appears above the current screen.
Use the Destination field to select the frame that specific interaction will end on. Or, click on the connection in the canvas and drag it to the next frame. Figma will make that next frame the destination.
Tip! Prototype faster by copying interaction details and pasting them on other frames.
- Select a frame with an existing interaction.
- In the Interactions section, click to the left of an interaction until its line is highlighted in blue.
- Press ⌘ Command / Control C to copy the interaction details.
- Select another frame.
- Press ⌘ Command / Control V to paste the interaction details.
Adjust the animation
The Animation settings determine how the prototype moves from one Frame to the other.
- Select a Transition type
- Choose the Direction the animation will come from
- Adjust the Easing of the animation
- Set the Duration of the animation
- Decide whether to Smart Animate matching layers
- View a preview of the animation
Animation
Figma has 8 animations available:
- Instant
- Dissolve
- Smart Animate
- Move In
- Move Out
- Push
- Slide In
- Slide Out
Learn more about Figma's prototyping transitions →
Animation settings
You can then adjust a few settings related to the transition:
Direction
Direction controls which way you want the transition to move in. Choose between Left, Right, Down, and Up.
Easing
Easing determines the acceleration of the transition between a starting frame and its destination, also known as keyframes, by using a mathematical function. Keyframes can be two frames in an interaction, like the transition from one screen to another, or the beginning and end states of a single frame, like an object changing color.
Default presets for easing animations include:
- Linear
- Ease In
- Ease Out
- Ease In and Out
- Ease In Back
- Ease Out Back
- Ease In and Out Back
- Custom
Learn more about Figma's prototype easing options →
Spring animations
Use spring animations to give your toasts, notifications, and transitions a bit more bounce. Choose from a preset curve or set your own.
Learn more about spring animation options →
Duration
Duration controls how long it takes to complete the Transition. You can choose a duration between 1ms and 10000ms (10 seconds).
Smart Animate matching layers
Smart Animate looks for matching layers, recognizes differences, and animates layers between frames in a prototype. Check this box to apply the Smart Animate transition to any layers that match between frames.
Learn more about creating advanced animations with Smart Animate →
State management
By default, Figma uses state management to determine how objects behave between frames. State management controls apply to interactions with interactive components, scrolling, or videos.
- When you navigate back and forth between frames, objects re-open in their last set state
- When you navigate between frames with matching objects, the state of the first object is shared with the second object
If you don’t want to use default state management controls, you can reset the object state between each interaction.
Learn more about state management in prototypes →
Define the overflow behavior
Overflow behavior allows you to define how your prototype responds to scrolling. Use Overflow behavior to add vertical and horizontal scrolling, or multi-directional panning to your prototype.
You can only apply overflow behavior to frames and components.
We have 3 overflow behaviors available:
- Vertical Scrolling
- Horizontal Scrolling
- Vertical and Horizontal Scrolling
Learn more about overflow behavior →
Tip! Now that you've built your prototype, you can view or share it. Learn how to preview designs and prototypes in presentation view →