Figma added a native animation timeline and one-click code layers to its canvas at Config 2026

Figma used its Config 2026 conference on June 24 to put two things designers usually leave the app to do, animation and code, directly onto the canvas. The headline release is Figma Motion, a timeline with keyframes and presets built into Figma Design. Alongside it the company announced code layers, AI-generated shader fills and effects, generative plugins, a set of Weave tools, and an updated Figma agent.

Most of that is not available yet. Motion is live now. Code layers go to early access in July through a waitlist at figma.com/config-betas. Interactive shaders are "coming soon," and publishing generative plugins or shaders to a team or organization is still pending. The thing you can actually test today is Motion.

What Motion actually does

Figma Motion adds a timeline to Figma Design, with keyframes, presets, and easing curves. You can animate from scratch, layer motion onto an existing design, or ask the Figma agent to generate a starting point. That much is table stakes for any animation tool.

The more interesting design decision is that motion is built on Figma's platform, so it behaves like a design-system primitive. Animate a component once and the motion travels across every screen and every file that uses the component, the same way a color fill or a type style does. For a team maintaining a system, that is the difference between redrawing an interaction in fifty files and changing it in one.

Motion is also readable in code. Switch to Dev Mode and the full timeline is inspectable: every timing value, easing curve, and keyframe is visible without a developer guessing at intent. You can copy animation code as CSS, JSON, or React, and Motion is MCP-compatible, so an animated frame can be passed to a coding agent. Exports cover MP4, WebM, Animated SVG, and GIF, with more formats promised.

One caveat: Figma published no benchmarks or performance numbers for any of this. What it showed is a feature set, not measured results. How well the design-to-code handoff holds up on real production components is the thing to watch once Motion is in wide use.

Code as a "material"

Figma's framing for code layers is that the old "design versus code" split is a false choice, and that code is just another material on the canvas. In practice: click any design layer (or prompt it) to turn it into an interactive code layer, duplicate it to try variants side by side, and extract design frames back into editable layers when you want to go back to drawing. One click syncs the code layer with whatever changed.

That is a direct answer to the AI tools that have been eating Figma's floor over the past two years, the prompt-to-app and prompt-to-code products that let people skip the design step. Figma's bet is to pull code into the place where the design already lives rather than cede the workflow. Whether code layers are good enough to keep engineers inside Figma, instead of round-tripping to an IDE, stays an open question until the July beta is in people's hands.

The AI grab-bag

The rest of the announcements lean on Figma's agent and its Weave engine, the rebranded Weavy, the AI startup Figma bought in 2025 for more than $200 million. Shader fills and effects let you describe an effect in text, or hand the agent a reference image, and get back a parameterized shader with on-canvas controls. Generative plugins let you build a custom tool by describing its behavior, with no local dev environment or plugin API knowledge required. Weave tools bring node-based generative workflows onto the canvas. The Figma agent, which rolled out to everyone the day before Config, now takes skills, file attachments, and connectors to outside tools like Notion, Slack, GitHub, and Atlassian.

CEO Dylan Field tied it together with a line the company has used before: "AI has lowered the floor, it has not raised the ceiling." His pitch to the room: "You will raise the ceiling." It is a clean way to position Figma as the tool for skilled work in a market where AI is commoditizing the basics.

Why it matters

Figma went public in July 2025 and now reports around 13 million monthly active users, so its product direction sets defaults for a large slice of working designers. Config 2026 is the clearest signal yet of where it is heading: close the gaps between design, motion, and code so users never have to leave the canvas. The strategy is coherent. The schedule is the catch. One of the six things shipped on announcement day, and the rest arrive on a waitlist, which is worth keeping in mind before treating a keynote as the state of the product.