Smart Animate and motion that communicates
Beginners discover Smart Animate, turn it on everywhere, and ship a prototype where everything slides, bounces, and spins — motion that impresses for five seconds and then exhausts, because it is decorating instead of explaining.
Choose your track
Read this module through your lens
The Smart Animate trap
Smart Animate is the feature that makes Figma prototypes feel alive, and that is exactly why beginners overuse it. The first time you see two frames tween smoothly into each other, the temptation is to put it on every connection with the longest, springiest settings available. The result is a prototype where everything is constantly moving — and within seconds it stops impressing and starts to tire, because none of the motion means anything.
Motion in an interface has a job: to explain what just happened so the user does not lose their place. A panel that slides in from the right teaches that it came from off-screen and will go back there. A card that grows into a full page teaches that the page is that card, expanded. When motion shows a real relationship like that, it reduces confusion. When it just performs, it adds noise. The skill is telling those apart and ruthlessly cutting the second kind.
How Smart Animate actually works
Under the hood, Smart Animate is simple, and understanding it prevents most failures. When you connect frame A to frame B with Smart Animate, Figma looks for layers that exist in both frames with the same name, and smoothly interpolates their differences — position, size, rotation, opacity, colour. Same-named layer in both frames: it tweens. No match: it cuts.
This is why the number-one failure is name mismatch. If a card’s image is “Rectangle 12” in the list frame and “image” in the detail frame, Smart Animate has no way to know they are the same thing, so instead of growing, it pops. The fix is not a setting — it is naming the shared layers identically across both states. (Components and variants make this automatic, which is a reason they pair so well with motion — a later course.)
The second rule: change one property at a time. If you move, resize, recolour, and rotate a layer between states, the eye cannot follow what happened. Move one thing, and the motion is legible.
Duration and easing, briefly
Two settings turn a correct tween into one that feels right. Duration: UI transitions live in roughly 200-300 milliseconds. Shorter feels abrupt; longer than ~400ms feels sluggish and makes the user wait on the animation. When in doubt, faster.
Easing is the curve of the motion over that time. Linear motion — constant speed — looks mechanical, like a machine part, because nothing in the physical world moves that way. Real things accelerate and decelerate. For elements entering the screen, ease-out (fast start, gentle stop) reads as arriving and settling. This is the subject of the next module, but even just switching off linear makes everything feel more alive.
Build before/after states, name the shared layers, change one property, set ~250ms and an ease — and your motion will already be in the top tier of student prototypes.
Hands-on exercise
Build two frames as a before/after state — a good choice is a list card expanding into a detail view. Name the shared layers identically. Connect them with Smart Animate, changing only size and position. Tune to ~250ms with an ease-out, and present. Then deliberately break it by renaming one shared layer to see it pop, and fix it again. Finally, find one purely decorative animation in your prototype and delete it; note why the prototype is better without it.
Second case · a card expanding to a detail view
The same lesson, a different object
A list card should expand into a full detail screen. The beginner connects them with Smart Animate and hopes.
The card pops instead of growing, because the card image is named 'Rectangle 12' on one frame and 'image' on the other — Smart Animate cannot match them, so it cuts.
Rename the shared layers identically across both frames, change only the card's size/position between states, set 260ms ease-out. Now the card visibly grows into the detail view, explaining the navigation.
Common failures · spot them fast
The failure gallery
Smart Animate on, but layer names differ -> it cuts/pops instead of tweening
Animating many properties at once -> chaotic, illegible motion
Durations too long (>400ms) -> feels sluggish
Motion with no meaning (spin/bounce as decoration)
Easing left linear -> mechanical, lifeless movement
Each of these is caught by a quality gate — keep the cheatsheet open while you work.
Worked example
Watch the journey
The pattern
Cheatsheet
Cheatsheet
Recipe & shortcuts
Duplicate the frame, change ONE thing (position/size/opacity) in the copy.
Connect frame A -> B, action = Navigate, animation = Smart Animate.
Match layer NAMES across both frames (Smart Animate tweens same-named layers).
Set duration ~200-300ms and an ease (ease-out for entering).
Failure modes
- Smart Animate on, but layer names differ -> it cuts/pops instead of tweening
- Animating many properties at once -> chaotic, illegible motion
- Durations too long (>400ms) -> feels sluggish
- Motion with no meaning (spin/bounce as decoration)
- Easing left linear -> mechanical, lifeless movement
Key operations
- Create two frames as states (before/after) with matching layer names
- Connect with Smart Animate
- Change one property between states
- Tune duration and easing
Quality gates
- Do matched layers tween smoothly (not pop)?
- Does the motion explain a real change (this became that)?
- Is duration in the ~200-300ms range?
- Is easing applied (not linear), entering with ease-out?
Workflow steps
- Build before/after states, name layers identically
- Connect with Smart Animate
- Change one property; preview
- Tune duration + easing; remove motion that has no meaning
Next module
- proto_easing_timing — the curves and timing that make motion feel right.
Reflection
Reflection card
Active retrieval — answer from memory before re-reading. Saved to this browser.
You've completed this module when…
- A Smart Animate transition where matched layers tween smoothly (no pop).
- The motion expresses one real change (e.g., a card expanding into a detail view).
- Duration and easing tuned; one decorative animation identified and removed.
Next: proto_easing_timing — the curves and timing that make motion feel right.
Finish — back to Prototyping & Animation →