@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.
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 227 upvotes and 8 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 (260.9k followers), User Experience (366.2k followers) and Graphics & Design (4.3k followers) on Product Hunt. Together, these topics include over 71.4k 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!