Figma Animation Cheat Sheet

Last Updated: November 21, 2025

Smart Animate Settings

Setting Impact
Duration Controls timing in milliseconds
Easing Chooses acceleration curve
Delay Offsets animation start

Interactive Components

Set component variants
Define states like default/hover/pressed
Prototype → Interaction
Link triggers to target variant
Use Smart Animate
Transition between similar objects

Motion Best Practices

Keep animation subtle, avoid incessant looping, and sync timing with micro-interactions.

💡 Pro Tip: Use components with variant states plus Smart Animate to keep motion consistent.
← Back to Data Science & ML | Browse all categories | View all cheat sheets