Figma's Smart Animate: Motion Without Keyframes

Why it exists

Smart Animate was created to bridge the gap between static designs and dynamic, interactive prototypes. It lets designers build and demonstrate complex micro-interactions and fluid transitions directly in Figma, without needing specialized animation software or writing code.

The mental model

Think of Smart Animate as an automatic "tweening" engine. You provide two snapshots of your UI—a start frame and an end frame—and Figma automatically generates the animation frames in between for any layers that exist in both. It connects the dots for you, creating motion from static states.

How it works

When you apply a Smart Animate transition, Figma scans for layers that have both a matching name and a matching position in the layer hierarchy. For every matched pair, it identifies changes in four key properties: Scale (size), Position (x/y coordinates), Opacity, and Rotation. It then generates a smooth animation to transition the layer from its starting state to its ending state.

When to use it

Use Smart Animate for any UI element that changes state or position between user interactions. It's perfect for creating loading sequences, parallax scrolling effects, interactive sliders and toggles, expanding and collapsing content cards, and simulating touch gestures like dragging or swiping.

When not to use it

Smart Animate is not a full-featured animation timeline. It's less suitable for complex, multi-stage animations that require precise easing curves or staggered timings. The biggest footgun is layer matching. If a layer's name or its group structure changes between frames, the animation will break. Another common mistake is toggling layer visibility; to make an object appear or disappear, you must animate its opacity property from 100% to 0%, not just hide the layer.

One canonical example

To make a button grow on hover, you create two frames. In Frame 1, you have the default button. In Frame 2, you have the hover state, where the button is slightly larger. The button layer must have the same name in both frames (e.g., "primary-button"). You then create a "While hovering" prototype interaction from the button in Frame 1 pointing to Frame 2, and select "Smart Animate" as the transition. Figma will automatically animate the button growing.