Skip to main content

Figma Motion

Create precise, production-ready animations right on the canvas.

Get startedTry Figma Motion

Motion design, where you design.

Whether you’re motion-curious or an easing expert, it’s easy to stretch, bounce, and squash your designs.

  • Someone is using Figma's AI agent to prompt an animation for an outdoor activities app. The prompt box asks the agent to create a glitchy type animation, staggering the shapes.Someone is using Figma's AI agent to prompt an animation for an outdoor activities app. The prompt box asks the agent to create a glitchy type animation, staggering the shapes.

    Polished motion in a prompt

    Create pro-level animations using Figma’s agent. Use it for repeated moves or complex storytelling.

  • An animated cover card for an outdoor activities app is shown side-by-side with the timeline and keyframes that make it move in FigmaAn animated cover card for an outdoor activities app is shown side-by-side with the timeline and keyframes that make it move in Figma

    Control every keyframe

    You have full command over the timeline. Set every frame and property exactly how you want them, then bring in teammates to shape the final animation.

Expansive creativity. Precise control.

Bring clarity and expression to your work. Animate loading states, hover interactions, logo styles, and more. The timeline’s the limit.

  • Build fast with pre-made styles

    Animation styles come baked in—including Fade, Rotate, Scale, Resize, and more. Stack styles to realize your vision. Custom styles coming soon.

    Explore pre-made styles

  • Adjust timing automatically

    Use autokey to track and record your motion movements, then customize each keyframe with bezier curves and springs.

    About keyframes
  • Three flat images of an orange domed structure, a white domed structure, and a puffy jacket are being turned into a stack of 3D objects.Three flat images of an orange domed structure, a white domed structure, and a puffy jacket are being turned into a stack of 3D objects.

    Enter a new dimension

    3D transforms give your designs and images depth. Combine with motion to make objects move like they do in the real world. Coming soon.

    Join the waitlist

  • Smooth all transitions

    Every screen-to-screen transition now has a full timeline, and you can adjust the timing for each element. Coming soon.

Build systems once. Apply them everywhere.

Motion systems let your whole team quickly add on-brand motion assets anywhere.

  • Reuse components across assets

    Systematize common moves—no need to build from scratch every time. Create modes and components that work wherever they’re applied.

    Explore systems

  • Swap variables to save time

    Move between different motion values quickly with variables and tokens.

    How to apply variables

Ship animation straight to code.

All of your animations are backed by real, production-ready code and exportable straight from Figma.

  • An animated museum map is shown side-by-side with the code behind it.An animated museum map is shown side-by-side with the code behind it.

    Painless dev handoffs

    Developers can inspect the entire motion timeline in Dev Mode, then copy animation code directly into CSS, JSON, or React.

    How to hand off code
  • A pop-up box shows an animation file being moved to an AI coding agent.A pop-up box shows an animation file being moved to an AI coding agent.

    Give full motion context to AI agents

    Send animation code to your agentic coding tools via the Figma MCP server. It preserves all your values, like ease and timing.

    Get the guide
  • An animation of a futuristic silver chair and lamp is being exported as an MP4 file.An animation of a futuristic silver chair and lamp is being exported as an MP4 file.

    Export right from Figma

    Share motion far and wide. Turn any animated frame into an MP4, GIF, SVG, or WebM file.

    How to export files