Figma’s official intro series for Figma Motion, three short videos covering the timeline, keyframes, and motion paths. Start with the keyframes one, which quietly makes the biggest point: any layer property with a diamond icon can be animated, and that includes fills, effects, and shaders.
An hour with Miggi covering the full surface of Figma Motion: keyframes and eases, anchor points, easing and timing variables, loop tracks, motion paths, trim path on strokes, shader effects and fills, and a first look at 3D transforms. If the playlist above is the primer, this is the deep end, and there’s a community file to follow along in. One EDU caveat worth knowing: the Figma agent isn’t available on Education, so students work with the prebuilt shader presets instead of prompting their own.
Figma Make now has a properties panel and annotations. Select an element and adjust padding, corner radius, line height, z‑index, or border style with actual controls, or mark a spot on the canvas and describe the change in words, like “fade this button in after a 300ms delay”. The quiet part is credits: edits stack up in the chat panel staged and free, and only bill once you apply them. Dragging a slider costs less than explaining the same change to an agent.
Until now, screens brought onto the canvas from code landed as raw values, leaving a cleanup pass before anything matched your design system. Figma now auto-binds colors, type, and spacing to the variables already in your file — whether you copy a Make preview, generate from code through the MCP server, or capture a live page with the Chrome extension. More frames also arrive with auto layout enabled, which dovetails with the Flexbox-mapped auto layout update above. Run Check Designs as a second pass to catch anything the matcher missed.
Laura Fehre, Designer Advocate at Figma, teaches Motion to people who freeze up the moment they open motion software, by letting the Figma agent do the first pass. Prompt the animation, watch it build the keyframes, then refine the curves and springs yourself.
Miggi builds a loading spinner from one ellipse: swap the fill for a stroke with shift+X, sweep the arc tool to 75%, then round the end caps. In Figma Motion, the move is keyframing only the sweep value and deleting the start and ratio keyframes Motion adds by default, so it runs from 0.25 to a full 100%. Duplicate and stagger a few for a nested loader.
Miggi packs two Figma Motion tricks into one tip. Nest your animation inside a frame and the parent becomes a camera you can pan, zoom, and rotate. Separately, J and K jump the playhead to the next and previous visible keyframes.
Rachel Platt, Figma Education Designer, walks through four ways to stop wasting prompts on setup: Make kits, guidelines files, templates, and file duplication. The most useful tip is the guidelines.md file — a plain markdown file Make reads automatically with every prompt. Write it once, get the context for free every session. You can even ask Make to draft the file for you from a description of your design system.
The team behind Bud (formerly Orchids), an AI-powered platform for building web apps and internal tools, is joining Figma. Bud was built around the idea that AI could “democratize the ability to build software,” and the acquisition fits neatly into Figma’s push into that same territory with Figma Make. The announcement doesn’t say what the team will work on, but the direction isn’t hard to guess.
GPT‑5.6 is now available in Figma Make alongside the existing model options. Select it from the model picker in the chatbox. Available on all plans.
Weave Tools are pre-built AI actions that run directly inside Figma from a new Tools panel, sitting alongside plugins and widgets. Moran, Weave’s designer advocate, built the initial set of 30+ tools, covering things like aspect ratio changes, on-brand icon generation, and logo placement on products. The “add logo to product” demo is a good proxy for what makes this interesting: it’s not a one-shot prompt, but a multi-step chained workflow under the hood, which is why the output actually holds up — logo bending into the fabric wrinkles of a hoodie. All that complexity is hidden.
A deep dive into the principles that separate intentional motion from decoration: easing and timing, anticipation, overshoot, follow-through, hold, and settle. The piece makes a compelling case for grounding animation in real-world physics and film editing rather than trending motion work, and lands on a point worth keeping: as AI tools make quality motion faster to produce, skill and restraint matter more, not less.
Figma Community just got a new content type. Alicia Kranjc, Product Manager at Figma, walks through how to publish a Weave workflow to Community so anyone can find, copy, and run it. The demo workflow takes a single image and produces three video hero variations for different websites. Something that took its creator hours to build takes someone else a couple of minutes to use.
Meng To, founder of Design+Code, shares his first hands-on session with Figma Motion. The tutorial runs through basic animation, auto keyframes, and agent-prompted stagger animation, then pivots to shaders — which is where it gets interesting: he animates dither and lens distortion settings over the timeline, and builds a custom Matrix-style shader from scratch using the agent with a screenshot as input. A good complement to the official Figma tutorial below, which focuses on design systems and 3D transforms — this one is messier and more exploratory, which makes it easier to follow along.
Figma’s official getting-started tutorial for Motion. The three-part structure covers agent-assisted animation (prompt it, then refine in the timeline), preset animation styles, and manual keyframing. One thing that stands out: animation built on a component automatically propagates to every instance, so you animate the play button once and every media player in the file picks it up. Motion tokens are new variable types for timing and easing, and Dev Mode now shows a Motion panel with ready-to-ship code (JSON, React, CSS) alongside the design.
Nikolas Klein, PM on Figma Make, walks through how Code Layers work in practice. The mental model is deliberately familiar: duplicate a code layer to explore alternatives the same way you’d duplicate a frame. What’s new is that those alternatives are working experiences your team can interact with, comment on, and prompt against — all in the same file. The extract-to-design flow is the detail worth pausing on: you can pull any state or screen from the code layer back into editable Figma layers, make visual edits, then push the changes back to the code layer and to your repo. Code Layers are in closed beta with a signup for early access.
“Figma Make changes who gets to ship things.” That’s Charlota Blunárová, whose collaborative embroidery app “Common Thread” took Best Overall after she built it in one afternoon with no engineering background. It’s the most direct statement of what Figma Make is actually doing at the edges of the design community. The other five winners — including Aleyna Çatak’s head-and-lip-controlled navigation system “Pucker” and Lee Black’s gesture-powered ambient music instrument “Airwwave” — make the same point from five different angles.
The Figma design agent can now search the web. Type “search the web”, add a URL, or use the plus menu in the agent chat to pull in live content, reference real design patterns, and replace placeholder text and images with actual material.
Tab Groups brings folder-like organization to the Figma desktop app’s tab bar. You can group tabs by project, theme, or workflow, assign a color to each group, and collapse or expand them to stay focused without losing access to open files. A nice improvement for anyone working across multiple projects.
Web publishing in Sites and Make has been an all-or-nothing setting. Now admins can set an org-wide default and carve out exceptions per workspace, so security-sensitive teams stay locked down without blocking everyone else.