Works with both classic prototype transitions and the new Figma Motion timeline — export either one to production-ready code for six frameworks, or straight to GIF and WebM. No After Effects, no rebuilding motion by hand.
Free: 5 code exports + 2 video exports • No credit card required
Figma Motion lets you keyframe animations on a real timeline. We read that timeline directly — every keyframe, every per-property track, every per-keyframe easing — instead of flattening it to a simple start-and-end state. Then we hand it back to you as code or video.
Multi-stop timelines preserved, not reduced to from/to.
Figma Motion maps almost 1:1 onto Framer Motion’s keyframe model.
Sample the same timeline straight to a GIF or WebM.
Same animation — classic prototype or Figma Motion — your choice of output
Get clean, ready-to-ship animation code that matches your Figma timing and easing — for the framework your project already uses.
Render the exact same animation to a GIF or a transparent WebM — drop it into a deck, a PR, a changelog, or a marketing post without leaving Figma.
It reads what you already designed — nothing to wire up
Finds both classic prototype transitions — Smart Animate, dissolve, slide — and Figma Motion timelines, including animated child elements.
CSS, React, Vue, Vanilla JS, Framer Motion, and React Spring — pick your stack and get the matching code.
Render a single animation to video, including a transparent WebM for overlaying on other content. Sequences and full boards are a Pro upgrade.
Duration, easing curves, and spring settings are read straight from your prototype so the output lines up.
Nested layers that animate inside a transition are picked up and exported alongside their parent.
Tune units, colors, variables, and minification so the code drops cleanly into your codebase.
Readable, structured, and ready to drop in
import { motion } from 'framer-motion'
const AnimatedCard = () => {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 0.5,
ease: [0.25, 0.1, 0.25, 1]
}}
whileHover={{
scale: 1.02,
transition: { duration: 0.2 }
}}
className="card"
>
Your content here
</motion.div>
)
}Start free, pay once if you need more
Perfect for trying it out
For everyday exporting
Install the plugin and export your first animation in a couple of minutes — to code or to video.