Figma Motion Is the Feature I Didn't Know I Was Waiting For

Last week I attended my first Config. It was also my first Config as a Figmate(!), which is a strange and wonderful sentence to type.

I don’t want to gloss over that part. Being at Config as a member of the Figma team was surreal. The whole thing felt like a small city built around craft, and everywhere I turned there was someone kind, curious, and excited to talk about the work. The generosity of the people I met, both Figmates and community folks, stuck with me more than any single announcement. I’m grateful to be part of this organization, and Config made that feeling concrete.

That said, there were announcements. A lot of them. The Config 2026 recap covers the full spread: code layers, shaders, generative plugins, Weave tools, and a smarter Figma agent with skills and connectors. The help center roundup has the availability details if you want to know what you can touch today.

The one I want to talk about is Figma Motion.

If you came up through the Flash era like I did, Motion will feel like coming home. There’s a timeline. There are keyframes. You can scrub, sequence, stack, and finesse. Position, scale, rotation, and opacity are all independently keyframable, with easing curves and spring physics when you want things to feel alive rather than mechanical.

But the part that matters for design systems practitioners isn’t the timeline. It’s where the timeline lives.

Motion sits on the canvas, in the same file as your components and variables. Animate a component once and that motion travels with it across every screen and every collaborator’s file, the same way fills and typography do. Motion variables let you define easing and timing values with modes, so switching a mode at the page level updates every animation referencing it.

That’s the shift. Motion stops being a one-off deliverable someone rebuilds in After Effects and becomes a systematized property of your components. Animation joins color, type, and spacing as something you can govern.

And it’s built for handoff. Switch to Dev Mode and the full timeline is inspectable: every timing value, easing curve, and keyframe, with copy-ready CSS, JSON, or React. It’s MCP-compatible too, so you can pass an animated frame straight to a coding agent. Exports cover MP4, GIF, WebM, and Animated SVG, with Lottie on the roadmap.

Naturally, the first thing I did was see if I could control it programmatically.

In the video attached to this post, I use Claude Code with the Figma Console MCP to generate a card component, apply a zoom fade using Motion’s new keyframe and timeline capabilities, and then write the resulting motion values (duration, delay, easing, scale) into the variables table.

That last step is the interesting one. Once those values live as variables, they can be exported in DTCG format and pulled into a codebase as tokens. Prompt to animation to tokens to production, in one loop.

A note on capability: the native Figma MCP doesn’t expose keyframe control yet. The Console MCP can do it because of its Desktop Bridge connection, which gives it access to the plugin context. I’d expect the native MCP to get there, but if you want to experiment with agent-driven motion today, this is the path.

The demo also shows the Console MCP’s self-healing loop in action. It screenshots what it generated, evaluates its own work, and fixes what it doesn’t like. Watching it label its own components and clean up after itself never gets old.

Motion wasn’t the only new material announced. Shaders got real too. You can now prompt the agent to build WebGPU shader fills and effects, save them, and reuse them across files. The Console MCP has access to manipulate and edit shaders as well, and I’ll have a demo video on that coming soon.

If you try Motion, start simple. A button hover, a card reveal. Then ask an agent to do it for you and compare notes. The gap between what you can describe and what you can ship keeps getting smaller, and that’s exactly the kind of problem I love working on.