The full Figma Motion launch: hand-tuned keyframes, agent-built animation, motion variables, and production code in one chain
Figma deep dive: Motion | Config 2026 · George Russ
44 min total·Actually worth watching closely: ~34 min·3 must-watch clips
- 0:13 – 5:42Watch
Opening: Motion arrives, and what it can reach
George Russ welcomes the team behind one of the morning's most moving launches — Dave, Daniela, and Luca on Motion — with an intro video made entirely in Figma Motion. Luca then walks through work from the team and alpha partners, mixing auto layout, color styles, keyframes, effects, components, and variables and modes across app intro animations, product animations, icon animations, and more.
Motion is not a separate animation app — it is an animation layer growing on top of what Figma already has: components, variables, vectors.
The intro video is itself the capability demo (from 105s), and the examples at 277s land visually — listening alone loses the most important part.▶ Jump to 0:13Speaker · George Russ - 5:50 – 12:52Watch
The editing model: timeline, animation styles, keyframes
Daniela demos what happens when you open Motion mode — the new motion icon in the tool belt, the timeline with playback, current time, duration, time format, and looping controls, and a properties panel kept deliberately aligned with design mode while making room for keyframes. Luca picks up the fine-grained side: keyframes, the motion gizmo, and easing curves.
Reach for a pre-made animation style when the motion is simple and for keyframes when you need control — the two mix on the same work. That is the mental model for getting started in Motion.
It is canvas work throughout (367s timeline, 464s properties panel, 604s keyframes and gizmo, 759s path smoothing are all marked visual moments) — the details only land if you watch.▶ Jump to 5:50Speaker · Daniela - 12:53 – 19:56Watch
Agent-generated motion and the human-plus-agent workflow
Luca runs through the pre-made animation style presets — extend one and every animation's timing moves in sync — then demos prompting the Figma agent to build motion: select nodes, hit the agent icon, send a prompt, and get back a capable draft you keep editing.
The agent's output is a real starting point, not a black box — it absorbs the tedious upfront keyframing and you iterate in concert with it.
The visual moments at 857s, 964s, and 1044s are prompt-to-result happening live; you have to see the output quality and the feel of iterating to judge it.▶ Jump to 12:53Speaker · Luca - 19:56 – 26:57Skim
Multiplayer, auto key, and the animatable properties tour
First a Figma-style live collaboration demo: as Dave moves a cursor and edits keyframes and easing curves, the motion path updates in real time, and following him synchronizes both timelines and playheads. Then auto keyframing, and the sweep of animatable properties — color, path trim, arcs, a shape's point count.
Nearly everything is animatable, from color to path trim to point count, and auto key stamps keyframes as you make changes.
The collaboration demo at 1201s is worth a quick look at the screen; the property tour after it is mostly spoken, so no need to watch frame by frame.▶ Jump to 19:56Speaker · Luca - 26:57 – 33:58Watch
Motion variables, the design system, and prototyping
The two new variable types, easing and timing, added from the variables panel or from the styles, properties, or keyframe easing panels, with modes — standard, expressive, smooth — swapped live so dark mode can move differently from light mode. Then how animated frames drop straight into prototyping with new playback actions.
Motion becomes a first-class citizen of the design system: easing and duration become variables you control centrally and switch by mode, so a brand's motion can be reused and updated in one place.
Building shots out of components and watching upstream edits propagate is a workflow demo — the component hierarchy on screen is what makes it click, and it stays abstract if you only listen.▶ Jump to 26:57 - 33:58 – 41:01Watch
Effects, the plugin ecosystem, and export
Shader fills with each property keyframed and played through — the effects deep dive gets a plug — plus plugins, including a stagger timing tool from a community builder that sets stagger delay, duration, and easing across a whole selection of objects at once.
Effects and motion together go far past what you can keyframe by hand, and plugins extend the timeline right where you are working.
Shaders and stagger are results-driven demos — you need to see them to judge the payoff.▶ Jump to 33:58 - 41:02 – 43:43Listen
MCP hand-off to production, and the beta roadmap
How dev mode's MCP section hands an LLM the full context of an animation — the timings, the colors, everything — to rebuild it in a real production codebase, shown with a brand motion site recreated on the web. Then the beta roadmap, starting with user-created shareable animation styles, and an open call for feedback.
With MCP, an animation's full parameters go straight to a coding agent working in the production codebase — the last mile from design to code is connected.
This stretch is talk and roadmap with no live demo — fine to just listen to on the commute.▶ Jump to 41:02