Figma's Config 2026 Adds Motion, an AI-Native Animation Tool on the Canvas

Animation Moves Onto the Design Canvas

Design and engineering keep converging, and the most interesting tools are the ones that collapse the handoff between them. On June 24, 2026, at its annual Config 2026 conference, Figma introduced Motion, a canvas-native, AI-assisted animation tool that lets designers build real motion directly inside the same file where they design the interface. For a workflow that has long required exporting to a separate animation app, this is a meaningful simplification.

What Motion Actually Does

Motion brings the building blocks of professional animation — timelines, keyframes, presets, and easing curves — onto the Figma canvas. You get bezier and spring-physics easing for motion that feels natural rather than robotic, and crucially, an AI layer that can generate a sensible motion starting point for you. Instead of hand-placing every keyframe from scratch, a designer can prompt for an animation and then refine it, which is exactly the kind of "AI as a first draft" pattern that works so well in creative tools.

The output is built for real production. Animations export to CSS, JSON, React, MP4, WebM, GIF, and Animated SVG, so the motion a designer creates can travel straight into a live web project or a developer's component without a translation step. That export breadth is what separates a toy from a tool.

Code Layers and Generative Shaders

Motion did not arrive alone. Figma also launched Code Layers, which lets a designer convert any layer into editable code with a single click or a natural-language prompt. The same generative system can produce parameterized shader fills — programmatic gradients and effects that you tune with sliders rather than redrawing by hand.

What ties these features together is a consistent philosophy: keep the designer in flow, and let generative AI handle the mechanical translation between visual intent and production code. Code Layers in particular nibbles at the oldest friction point in product work — the gap between a static mockup and a coded, animated, shippable component.

Why This Release Matters for AI in Creative Work

I find releases like this more telling than another benchmark chart, because they show applied AI settling into the everyday tools professionals already trust. The intelligence here is not a chatbot bolted onto the side; it is woven into the canvas, generating motion curves and code that a human immediately edits and owns. That collaborative pattern — machine proposes, designer disposes — tends to raise the quality ceiling rather than flatten it.

Figma is rolling Motion out in open beta across all plans starting June 24, which means independent designers and large teams alike can try it without a gated enterprise tier. Broad, low-friction access is the right call for a feature meant to change a daily habit.

For anyone tracking how AI design tools are evolving, Config 2026 is a clean data point: the frontier is not just bigger models, but smarter surfaces that put generative capability exactly where the work already happens.

Sources: Figma Blog — "Config 2026 Recap" — June 24, 2026; Figma Help Center — "What's new from Config 2026" — June 24, 2026; CMSWire — "Figma Launches Code Layers, Motion at Config 2026" — June 24, 2026.