For years the joke about animating in Figma was that you couldn't, not really. You strung frames together, prayed Smart Animate matched the layers, and accepted that anything past a simple crossfade meant opening another app. That era just ended. Figma Motion, announced at Config 2026, drops a real timeline onto the canvas, and it changes where interface motion gets made.
So what actually changed? Not a plugin, not a prototype trick. A native keyframe timeline, sitting in the same file as your components, working on the properties you already know.
TL;DR: Figma Motion is native timeline and keyframe animation on the Figma canvas, launched at Config 2026. You set keyframes on position, scale, opacity, and rotation, then shape easing on a curve editor, all inside the file where your design already lives. It handles UI motion without the round trip to After Effects or Rive.
What Is Figma Motion, Exactly?
Figma Motion is keyframe animation built into Figma Design itself. You pick a layer, open the timeline, and set keyframes at points in time for properties like X and Y position, scale, rotation, opacity, and corner radius. Figma fills the frames between them. You shape how that in-between feels using an easing curve editor, the same bezier control motion designers already live inside.
The important word is native. This isn't Smart Animate guessing at what moved between two boards. It's an explicit timeline where you own every keyframe, and it reads the real layers of the real design. No export, no re-linking, no separate source of truth drifting out of sync with your components. The frame you designed becomes the frame that moves.
Here's my honest take after a week of poking at it: the win isn't raw power, because After Effects still buries it on sheer capability. The win is that the animation and the design finally share one home. That collapse of the round trip is worth more to a working product team than another easing preset ever could be.
How Do You Make Your First Animation?
Start small. Pick one button and make it settle on appear. The whole loop takes about two minutes once you know the beats.
- Select the layer you want to move, then open the Motion timeline panel.
- Set a starting keyframe at 0ms with the layer at opacity 0 and scale 0.9.
- Move the playhead to roughly 200ms and set a second keyframe at opacity 1 and scale 1.
- Open the easing curve on that segment and pull it to an ease-out, so the motion decelerates into place rather than stopping cold.
- Scrub the timeline back and forth to feel the timing, then nudge that 200ms until the settle reads right.
That's it. You just built a reveal that, a year ago, meant a prototype interaction plus a lot of hoping. When I ran this on a card grid, the thing that surprised me was how fast the curve editor let me kill the default snap. I dropped the settle from a lifeless linear ramp to a soft ease-out in one drag, and the difference between cheap and considered was that single move.
A few habits carry over straight from timeline work. Stagger children instead of firing a whole list at once. Keep motion to transform and opacity where you can, since those are the cheap properties on the web too. And respect prefers-reduced-motion in the built version, because a switch some users rely on doesn't stop mattering just because the animation was born on the canvas.
Where Does It Fit Your Toolkit?
Figma Motion doesn't erase the specialists. It changes the default. Most UI motion, the micro-interactions, transitions, loaders, and reveals that make a product feel finished, now has a natural home where the design already sits. You leave the canvas when the job truly needs it: cinematic layering in After Effects, or runtime state machines in Rive.
| Tool | Best For | Where the Work Lives |
|---|---|---|
| Figma Motion | Micro-interactions, transitions, loaders, reveal choreography | Native, inside the same file as the components |
| After Effects | Cinematic, layered, effect-heavy sequences | Separate app; still wins on sheer capability |
| Rive | Interactive state machines, runtime-driven animation | Separate app; built for input-reactive motion |
If you're still mapping out your stack, our motion design tools for UI designers guide covers where After Effects, Rive, and Lottie each earn their place, and Figma Motion now sits in front of them as the first stop rather than a step you take after exporting. For the code side of the same question, web animation with CSS versus GSAP walks through what to reach for once the design leaves Figma and becomes a shipped page. And if the destination is a React codebase specifically, the Framer Motion guide covers the library that picks up where Figma Motion's export leaves off.
What's the Short Version?
Figma Motion puts a real keyframe timeline on the Figma canvas, so UI motion gets made where the design lives instead of in a separate app. Set keyframes on position, scale, and opacity, shape the easing, scrub until it feels right. It won't replace the specialist tools for cinematic or runtime work, and it doesn't need to. For the everyday interface motion most teams ship, closing the round trip is the whole point, and that's the part it nails.
