How to Add Animation in Figma Prototype Easily

To add animation in a Figma prototype, use the Prototype tab to connect frames and select an Interaction like On Click or After Delay. Then choose an Animation type such as Smart Animate or Instant to create smooth transitions between frames.

Syntax

In Figma, animations in prototypes are created by linking frames with interactions and selecting animation types.

• Trigger: The user action that starts the animation, e.g., On Click, While Hovering, or After Delay.
• Action: Usually Navigate To another frame or Open Overlay.
• Animation: The transition style, such as Instant, Dissolve, Move In, Push, or Smart Animate.
• Duration: How long the animation lasts, in milliseconds.

text

Trigger: On Click
Action: Navigate To Frame 2
Animation: Smart Animate
Duration: 300ms

Example

This example shows how to animate a button click that smoothly moves from Frame 1 to Frame 2 using Smart Animate.

text

1. Create two frames: Frame 1 and Frame 2.
2. Add a button shape in Frame 1 and a similar shape in Frame 2 but moved or resized.
3. Select the button in Frame 1.
4. Go to the <Prototype> tab.
5. Drag the interaction handle to Frame 2.
6. Set Trigger to <code>On Click</code>.
7. Set Action to <code>Navigate To</code> Frame 2.
8. Choose Animation as <code>Smart Animate</code>.
9. Set Duration to 300ms.
10. Click <Present> to test the animation.

Output

When you click the button in Frame 1, the shape smoothly moves or changes to match Frame 2's design over 300 milliseconds.

Common Pitfalls

• No matching layers: Smart Animate requires layers with the same name in both frames to animate smoothly.
• Wrong trigger: Forgetting to set the correct trigger like On Click can stop the animation from starting.
• Instant animation: Choosing Instant will skip animation and jump immediately.
• Overlapping frames: Overlapping frames without clear navigation can confuse the prototype flow.

text

Wrong way:
Trigger: On Click
Action: Navigate To Frame 2
Animation: Instant

Right way:
Trigger: On Click
Action: Navigate To Frame 2
Animation: Smart Animate

Quick Reference

Property	Description	Common Values
Trigger	User action that starts animation	On Click, After Delay, While Hovering
Action	What happens after trigger	Navigate To, Open Overlay
Animation	Type of transition effect	Instant, Dissolve, Move In, Push, Smart Animate
Duration	Length of animation in ms	100ms - 1000ms

Key Takeaways

Use the Prototype tab to link frames and add animations in Figma.

Smart Animate creates smooth transitions by matching layer names across frames.

Set the correct trigger like On Click to start your animation.

Avoid Instant animation if you want visible motion effects.

Name layers consistently to enable Smart Animate to work properly.