Figma Motion is a powerful timeline and AI animation editor built directly into Figma. What makes it exceptional is that every animation you create can be exported as real, production-ready Motion React code — not just a prototype, but actual code you paste straight into your project.
In this guide we cover three ways to use Motion inside Figma: the Motion animation editor, Figma Sites, and Figma Make.
1. Creating Animations in Figma
Adding animations to your Figma layers is straightforward:
- Select any shape or frame on your canvas.
- In the Animations panel, click the add (+) button to attach an animation.
- Open the full timeline editor by clicking the Figma Motion button at the top of the panel.
- Use the timeline to fine-tune easing, duration, delays, and keyframes — exactly like a video editor, but for UI animations.
The official Figma Motion docs contain a complete usage reference for the timeline editor. Once you are happy with the result, you are ready to export.
2. Export Animations to Motion React Code
This is where the real power lives. Instead of manually translating your Figma animation into code, Figma generates it for you:
- Switch into Dev Mode (toggle at the top right of Figma).
- Select your animated layer.
- In the Motion panel on the right sidebar, choose "React" as the export format.
- Copy the generated code snippet.
The output is fully valid Motion React code you can paste directly into your component:
import { motion } from "motion/react"
<motion.div
className={className}
variants={container}
initial="hidden"
animate="visible"
>
{words.map((word, index) => (
<motion.span
key={index}
variants={child}
style={{ display: "inline-block", marginRight: "0.25em" }}
>
{word}
</motion.span>
))}
</motion.div>Figma Motion can also export to CSS and JSON formats if you need them for non-React projects.
Note on the import path: If your exported code imports from
"framer-motion"instead of"motion/react", that's due to outdated AI training data. Both work, but update it to"motion/react"for best compatibility with the latest docs and examples.
3. Using Motion in Figma Sites
Figma Sites is Figma's no-code website builder, and Motion powers every animation it publishes.
- No installation or setup required. Motion is baked in automatically.
- Open the Interactions panel for any element and add effects like Hover or Press.
- Figma generates the real Motion animation behind the scenes and publishes it live.
This is perfect for designers who want polished, production-quality animations on a site without writing a single line of code.
4. Using Motion in Figma Make
Figma Make is Figma's AI code generator. It accepts text prompts, images, and Figma artboard prompts and outputs React component code.
Motion is deeply integrated — you don't need to ask for it explicitly. Just ask the AI to animate something:
"Animate this hero section with a staggered word reveal on load."
Figma Make will produce React code with motion already imported and configured. If a generated file is missing the import, either prompt the AI:
"Add Motion animations to this component."
Or manually add the import yourself at the top of the file:
import { motion } from "motion/react"5. Installing Motion in Your React Project
The exported code from Figma assumes Motion is already installed. If you haven't set it up yet:
npm install motionThen import it in your component:
import { motion } from "motion/react"For a Next.js project, no extra configuration is needed. Motion works out of the box with both the App Router and Pages Router.
Quick FAQ
Does Figma Motion use the Motion library? Yes. The React export in Dev Mode produces real Motion code, and Figma Sites animations are also powered by Motion under the hood.
Do I need Motion installed to use the exported code?
Yes. Install motion in your project before pasting the exported snippet.
Can I add Motion animations without exporting code? Yes — Figma Sites handles this entirely. Add Hover or Press effects from the Interactions panel and the animations are published automatically with zero setup.
Why does the export say framer-motion instead of motion/react?
Outdated AI training data. Change the import to "motion/react" for the best experience going forward.
Conclusion
Figma Motion bridges the gap between design and production animation code. Whether you are exporting hand-crafted timeline animations from Dev Mode, publishing a no-code site via Figma Sites, or generating components with Figma Make, Motion is the animation engine powering it all. Design your animation once in Figma, then ship it as real React code — no re-implementation required.
Happy animating!