Figma Motion Is Now a Design-System Primitive

On June 24, at the Config 2026 keynote, Figma put motion on the canvas. Not a plugin. Not a prototyping trick that falls apart the second a developer opens the file. An actual timeline, with keyframes, living inside Figma Design. It would be easy to shrug this off as one more feature drop. I don't think it is, and the reason has less to do with the feature than with where they chose to put it.

Motion stopped being a prototype trick

For years, animating in Figma meant one of two bad options. Smart Animate plus a graveyard of duplicated frames, or a round trip through After Effects and Lottie that drifted out of sync with the real design almost immediately. Figma Motion resets the starting point. You get a real timeline and keyframes, presets to drop in, and a Figma agent that will rough out a first pass you then fix by hand. It is in open beta as of June 24, on every plan for Full seats, though agent-generated animation and hi-res video export sit behind a paid tier. The export list is the quiet part worth reading twice. Motion comes out as MP4, GIF, WEBM and Animated SVG, and the release notes mention CSS, JSON and React too. So the animation that lived in the design file can leave as something an engineer actually uses, instead of a screen recording dropped in a ticket with "make it feel like this" underneath.

Motion is now a system primitive

One line in Figma's own recap does the real work: because motion is built into the platform, you animate a component once and that motion follows it across every screen and every teammate's file, the same way a fill or a text style already does. So motion becomes a token. Not a one-off flourish on the checkout button, but a system property that stays consistent wherever the component shows up. Define how a loading state, a toggle, or a success check moves, once, and it moves the same in onboarding, in settings, in whatever your growth team ships next quarter. Anyone who has burned a release chasing why one button eases differently on three screens knows why that is the part that matters.

Code layers, shaders and agents filled in around it

Motion was not alone on stage. Code layers turn a design layer into a live, interactive one with a single click or a prompt; you can fork it to try directions and export React. It is closed beta with a waitlist at figma.com/config-betas. Custom shaders arrived as agent-built fills and effects: describe the look, or hand over a reference image, and you get a parameterized shader you can tune on the canvas and stack with other effects. There are generative plugins you spin up by describing what they should do, no code. And the design agent picked up skills, reusable packaged instructions, plus connectors into Notion, Slack, GitHub, Atlassian and more. Put it together and the direction is not subtle. Figma wants the canvas to be the place where design, motion and code stop being three separate handoffs. Ambitious, still mostly beta, but clear enough to plan around.

Why this hits harder in Web3, iGaming and fintech

We ship product in markets where motion is not decoration; it is information. A wallet confirmation that resolves cleanly is how a user knows their money is safe. The payout on a slot, a live odds tick, a card flip, a stake slider that answers the instant you drag it, that is where trust and delight actually live in these apps. Nail the motion and the whole thing feels expensive. Miss it, even slightly, laggy or inconsistent or just too much, and people feel it before they can tell you what is wrong. So yes, native motion is good news. It closes the gap between what the designer felt and what the build does. It also deletes the friction that used to keep motion rare, and rare was doing some quiet work. When a keyframe is one click away, motion ends up everywhere, and everywhere is exactly how a product turns over-animated, off-brand and janky on a mid-range Android in a live casino lobby. Easy to add was never the same as easy to get right.

The bottleneck just moved

The hard question is not "can we animate this?" anymore. It is "is our motion a system?" Consistent easing and timing. A real hierarchy of what earns movement and what stays put. Performance budgets that survive a cheap phone. The discipline to leave some things perfectly still. Those are craft and governance problems, and a slicker tool solves them about as well as a faster lens turns you into a photographer. It raises the floor and shows who actually has a point of view. Which is the part where a studio earns its money. When we take on 3D and motion work, the deliverable was never "an animation." It is a motion language that holds together across a whole product and survives contact with a real front-end. Figma Motion makes that language much easier to author and hand off. It does not tell you what the language should be. That is still design, and it is still on you. The practical version: if your team lives in Figma, turn Motion on this week and move your core interaction states into it. The timeline is genuinely good, and getting real animation out of the file and into engineers' hands earns the switch on its own. Just don't confuse the new ease with a plan. The tools got a lot better on June 24. The taste to know when not to animate did not ship in the update.