Figma
The collaborative interface design tool
4.9•1.5K reviews•12K followers
The collaborative interface design tool
4.9•1.5K reviews•12K followers
A collaborative design tool for creating user interfaces, mobile apps, and websites with a wide range of features, including vector editing tools, prototyping, and version control, all in a cloud-based platform.
This is the 32nd launch from Figma. View more
Figma Motion
Launching today
Motion now lives on the canvas—in the same file as your components, your variables, and your team—so your designs can come to life from day one.
Free Options
Launch Team
Flowtica Scribe
Hi everyone!
@Figma Motion adds timeline-based animation to the same canvas where the rest of your design already lives.
You can create keyframes, apply preset animation styles, use the Figma agent for a starting point, and then edit the motion directly on the timeline.
Dev Mode can show the full timeline, including timing values, easing curves, and keyframes. You can also copy CSS, JSON, React, or motion.dev code directly from the panel.
It is also MCP-compatible, so a coding agent can receive an animated frame with the motion context instead of guessing from a video or a written spec.
Figma also shipped a lot more at Config 2026!
Been waiting for this since Figma killed Figmotion years back. Putting the timeline on the canvas - in the same file as components and variables - changes how design-to-dev handoff works. Instead of exporting to Lottie or writing a Notion doc describing what should ease in, devs can actually inspect the keyframes directly. Curious whether you're planning an inspect mode for engineers, or if the export targets go beyond GIF/video toward CSS/Lottie JSON?
Thank you all for sharing your work. I have some design and research related questions that I'm hoping someone at @Figma or elsewhere might answer...
Now that motion can be baked directly into components and travel with them, how do overrides behave at scale? If a team member overrides a specific keyframe or easing curve on a component instance, how does that affect the main library's version control?
How does Figma Motion interface with Auto Layout? If a container expands dynamically due to a variable text string, how does the timeline-based keyframe system gracefully adapt to fluid, non-static layout shifts without breaking the animation?
Do you see Figma Motion eventually replacing dedicated tools like @LottieFiles for Figma or @Rive for interactive UI states, or are there plans to allow native imports of those formats directly into the Figma timeline?
With motion becoming easier to build, there's a risk of designers over-animating. Does Figma plan to introduce a global 'Prefers-Reduced-Motion' toggle in Prototype mode so researchers can easily test accessible alternative flows for users with vestibular or motion sensitivities?
Are there plans to allow researchers to track how motion affects user behavior during unmoderated testing, such as capturing if a specific animation duration delays time-to-task completion or causes user drop-off?
the after effects round-trip always loses fidelity, so a native timeline is the real win. does it export to lottie/code devs can use, or is it presentation-only for now?
This is a big step for design-to-dev handoff 🚀
Having motion timelines, easing, keyframes, and code export inside the same Figma file should reduce a lot of guesswork between designers and developers.
Curious how well the exported React or CSS matches production-ready animation code in real projects.
That is a really big step! Are you planning to add anchor points control in the future?
I think this makes perfect strategic sense for Figma to go into motion. So many users on the cuff that will now be able to contribute and create motion graphics AND, perhaps by doing so, enter new industries, e.g. Designers becoming PMMs.