Figma Motion is an animation mode built into Figma: flip a frame to Motion, a timeline slides in under your design, and layers get animated with keyframes, presets or easing curves. Unveiled on stage at Config, Figma's annual conference, it runs as an open beta on every plan, free tier included. Product designers walk away with animations that export as video, GIF or straight code.
Figma Motion switches on from the toolbar, right beside the Design, Draw and Dev modes: a timeline unfolds at the bottom of the screen and every layer animates on position, scale, rotation and opacity. Built-in styles (Fade, Move, Scale, Rotate and friends) stack together or run in sequence with a simple drag.
For finer control, place keyframes by hand or turn on auto-keyframing, which records your tweaks while the playhead runs (a surprisingly addictive mode, so budget some extra time). Bezier curves, spring physics and 3D depth settings then shape the movement.
The Figma agent handles the rest: type 'make the logo bounce, then fade it out', it drops the keyframes on the timeline, and you fine-tune the tempo yourself.
Every animation made in Figma Motion is backed by real, usable code: in Dev Mode, the timeline opens read-only and copies out as CSS, JSON or React, easing values included.
Teams working with coding assistants can also pull animation context through Figma's MCP server. For everything else, classic exports do the job:
| Output | Formats | Best for |
|---|---|---|
| Code | CSS, JSON, React | developer handoff |
| Video | MP4, WebM | product demos, social posts |
| Animated image | GIF, animated SVG | websites, emails, docs |
| Dev Mode | read-only timeline | checking values and timing |
Figma Motion costs nothing during its open beta and appears on every plan, free tier included. Three features do require a paid Full seat: publishing animated components, agent-generated animation and high-resolution video export. The Professional plan starts around $16 per editor per month billed annually. Expect those terms to shift once the beta wraps up; Figma's pricing page has the final word.
One more detail: the tool is absent from Figma for Government plans. And since motion can feel intimidating, Figma released a free set of motion design fundamentals lessons alongside the beta.
Yes, during the open beta, Figma Motion is available on every plan, including the free one, as long as you have edit access to the file. Three features stay tied to a paid Full seat: publishing animated components, generating animation with the agent and high-resolution video export.
For UI animation, in most cases yes: hover states, loaders, transitions and animated components now happen inside Figma. For VFX, particles or character animation, After Effects and Rive keep the upper hand, and many teams simply run both side by side.
Not yet. Figma says the Lottie format sits on its roadmap, with no date announced. For now, exports cover MP4, GIF, WebM and animated SVG on the media side, plus CSS, JSON and React on the code side.
During the beta, no: generating animations with the Figma agent does not touch your AI credit quota. Figma has said this generation will start consuming credits later on, once the beta period ends. A paid Full seat is still required to use it.
Verdict: A loader, a hover state, a bouncing logo: all of it now happens inside the design file itself. Heavyweight VFX will still call for a dedicated tool, but for everyday UI motion, product teams that already live in Figma are the first in line.
Hostinger AI Hub 
Canva AI 
Lovable 
