Tip! Want to change how your Prototype looks in Presentation View? Check out our Adjust your Prototype Settings article.
The Anatomy of a Connection
Prototypes replicate how users might interact with our designs. We can build Connections between Frames to create these flows, or pathways.
The Connection consists of three parts:
We added a Hotspot to the Frame on the left. The Connection takes us to the Destination, which is the Frame on the right.
You can link Frames together using Hotspots and Connections.
A Hotspot is where the user's Interaction will take place. A Hotspot can be the Frame itself, or an Object within the Frame. You could create a Hotspot on anything e.g. a button, icon, or heading.
The Connection is the arrow or "noodle" that connects the Hotspot to the Destination. We determine both the Interaction and Animation through the Connection.
The Destination is the next step in our Prototype - where this specific Connection ends. The Destination must be a "Top-level" Frame and not an Object within the Frame.
What are Top-level Frames? They are Frames that you have added directly to the Canvas. In a Prototype, this would be a screen in your design.
In Figma, you can place a Frame within another Frame. We call this process nesting. For us to consider a Frame as a Top-level Frame, you must not place it within another Frame.
We bold Top-level Frames in the Layers Panel.
Choose an Interaction
Once you have created a Hotspot, you can define the type of Interaction.
Like a Connection, an Interaction consists of three parts:
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.
Figma has 9 triggers:
On Click / On Tap
Key/Gamepad 🕹✨ (New! Learn more about keyboard and gamepad triggers)
Mouse Down (Touch Press)
Mouse Up (Touch Release)
Learn more about our Prototyping Triggers
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 6 actions:
- Navigate to
- Open Overlay
- Swap With (Overlay)
- Close Overlay
- Open URL
Tip! Learn more about our Prototyping Actions
The Destination is the next step in our prototype. This could be the next screen in the prototype, or an overlay that appears above the current screen.
Use the destination field to select the frame the interaction will end on. Or, you can click on the connection in the canvas and drag it to the next frame. Figma will make that next frame the destination.
Apply an Animation
The Animation settings determine how the Prototype moves from one Frame to the other.
Within the Animation settings you can:
- Select a Transition type
- Choose the Direction the Transition will come from
- Adjust the Easing of the Transition
- Set the Duration of the Transition
- Decide whether to Smart Animate matching layers
- View a Preview of the Transition
We have eight (8) Transitions available:
- Smart Animate
- Move In
- Move Out
- Slide In
- Slide Out
Tip! Learn more about our Prototyping Transitions
You can then adjust a few settings related to the transition:
- Direction controls which direction you want the transition to move in. You can choose between: Left
- Objects rarely move at a constant speed. Easing controls the acceleration of the Transition i.e. whether it starts slow or fast. This allows you to build Transitions that feel more natural.
- Duration controls how long it takes to complete the Transition. You can choose a Duration between 1ms and 10000ms (10 seconds).
- Choose whether to Smart Animate matching layers to automatically transition any layers that match between Frames.
Preserve scroll position
If you choose an Instant or Dissolve transition, you will have the option to Preserve scroll position. For animations using Smart Animate, Figma will automatically preserve your scroll position.
Preserve scroll position allows you to maintain the same scroll location when you transition between two screens. This applies to vertical scroll depth, as well as location in a horizontal scrolling overflow.
This is helpful for interactions where the user doesn't actually leave the current screen. In our example below, we want a user to click the black rectangle to expand the content.When checked, the prototype will remember what part of the frame we were viewing. This lets us create a prototype that looks like the content expands.When unchecked, the prototype will take us to the top of the next screen instead. This makes it obvious to the user that we have moved to a different screen in the prototype.
Define the Overflow Behavior
Overflow Behavior allows you to define how your Prototype responds to scrolling. This allows you to create more advanced user interactions within a Prototype.
You can only apply Overflow Behavior to Frames. This could be a Top-level Frame, or a Frame that's nested within your Prototype. You can only apply one behavior to each Frame.
We have three (3) Overflow Behaviors available:
- Vertical Scrolling
- Horizontal Scrolling
- Vertical and Horizontal Scrolling
Tip! Learn more about using Overflow Behavior
Video Tutorial: Presentation View and Prototyping
Next! Now that you've built your Prototype, you can view or share it! Check out our View a Prototype with Presentation View article for more information.