Every prototype connection covered so far jumps instantly (or fades) between two Frames. Smart Animate is a transition type that instead genuinely animates the difference between them — a card growing, a menu sliding in, a color fading — without any keyframe timeline or code.
Smart Animate matches layers by name across the two connected Frames. A layer called "Card" in Frame 1 and a layer also called "Card" in Frame 2 are treated as the same object — Figma animates every difference between them (position, size, rotation, color, corner radius) automatically. Rename either layer and the match breaks, and that piece snaps instead of animating.
Create a prototype connection between the two Frames (covered in the Prototyping lesson) exactly as before, then open the transition dropdown on that connection and choose Smart Animate instead of the default Instant/Dissolve options. An easing curve and duration become available once it's selected.
| Matches (animates) | Doesn't match (snaps or breaks) |
|---|---|
| Same layer name, different position | Different layer names, even if visually identical |
| Same layer name, different size | A layer that exists in one Frame but not the other |
| Same layer name, different color/opacity | A layer nested at a different depth in the layer tree |
Smart Animate is how most of the small "delight" moments in real apps get prototyped before a developer builds them for real: a card expanding when tapped, a tab indicator sliding to the selected tab, a button subtly growing on press. None of it requires more than naming layers consistently across states.