Build Prototypes with Interactions and Animations
In this article we're going to step you through the process of creating a Prototype.
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 simply time elapsed.
We have nine (9) Triggers available:
- On Click / On Tap
- On Drag
- While Hovering
- While Pressing
- Mouse Enter
- Mouse Leave
- Mouse Down (Touch Press)
- Mouse Up (Touch Release)
- After Delay
The Action defines what happens when the user triggers the Hotspot. This could mean moving to another Frame, engaging an Overlay, or opening a link.
We have six (6) Actions available:
- Navigate to
- Open Overlay
- Swap With (Overlay)
- Close Overlay
- Open URL
As we learned above the Destination is the next step in our Prototype.
You can use this field in the Prototype Tab to choose which Frame is the Destination. Or, you can click on the Connection in the canvas and drag it to a new 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
You can then adjust a few settings related to the Duration:
- Direction controls which direction you want the transition to move in. You can choose between: Left (→) , Right (←), Down (↓) or Up (↑).
- 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.
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
Learn more about using Overflow Behavior in our Prototype Scroll Interactions with Overflow Behavior article.
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.