@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.
Can the Figma AI agent handle motion design ? If so, Figma is silencing a lot of people who had already written it off.
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?
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?
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.
This is gold! I will share this with my team (we have a UX/UI designer), he may find this helpful!
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.
About Figma Motion on Product Hunt
“Your Figma canvas now has a timeline”
Figma Motion launched on Product Hunt on June 25th, 2026 and earned 287 upvotes and 10 comments, placing #4 on the daily leaderboard. 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.
Figma Motion was featured in Design Tools (261.3k followers), User Experience (366.8k followers) and Graphics & Design (4.3k followers) on Product Hunt. Together, these topics include over 73.1k products, making this a competitive space to launch in.
Who hunted Figma Motion?
Figma Motion was hunted by Zac Zuo. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Figma Motion stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Zac Zuo
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!