Videos

Anthony DiSpezio, Designer Advocate at Figma, builds a Make kit from an npm package. Make auto-generates a starting version of the guidelines, and Anthony offers a few rules for making them more effective – assume the agent knows nothing, split guidelines into categories so it doesn’t drown in context, include real usage examples, and spell out the gotchas. Before publishing your kit, calibrate against the model’s pre-training biases and test how it actually reads your UI.

Piers Cowburn opens his shaders file for Show Your Work series. The interesting trick: regular Figma effects apply after shaders, so to blur something before the shader reads it, you have to wrap it in a frame. Those soft gray fringes are exactly what his mosaic shader converts into color and shape.

The detail I keep thinking about: ​“We found buttons are tough to tap when they land right in the fold.” So Apple built fold avoidance into sheets, alerts, menus, and toolbar buttons, all of which nudge themselves aside whenever iPhone Duo is partially folded, while scrollable content stays where it is. Adopt the system components and you get the behavior for free.

Jamie Haberman, Education Designer at Figma, builds a kinetic type plugin with the Figma agent.

Comments attach to a moment on the timeline, and a single comment can carry several timestamps, so one note can flag three separate problems in one pass.

“Path trim lets you create animated lines by controlling how much of a path is visible at specific points in time. You can use path trim to create draw-on or erase effects, handwriting animations, and looping spinners.”

Two tiers of preset – basic animations move a single property, composite ones bundle several plus custom easing out of the box. Once applied, an animation shows up as a blue track on the timeline, where you drag the track itself to set delay and drag its handles to set duration.

The first of four new short official tutorials on Figma Motion explains easing. The detail worth taking away is that custom easing curves can be saved as variables, reusable across your entire design system.

Jake Albaugh, Developer Advocate at Figma, points a fleet of agents at an entire component library, then reuses the same agents as validators: each file re-fetches from Figma and surfaces what drifted after a property rename. His real argument for Code Connect is context economy – without it the MCP server hands the agent every style value it might need, and compaction is lossy.

The post above shows the skills, this one shows the plumbing. Miggi builds 3 skills: a type scale generator that also writes the variables, an image audit that drops a DPI card beside every image, and Shader Starter, which pairs neatly with the shaders update below.

The skills demo is the one to watch. Rodrigo calls a slash command for a skill his teammate Tammy wrote in plain English, carrying her own design-review conventions, and the agent returns the critique as annotations right on the canvas. Team practice becomes a callable command.

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’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.

Diane Hu, a performance engineer at Figma, breaks down three fixes to the copy-paste path. The big one is state group rehydration: copying a single variant used to copy every variant in the component along with it. Now copy writes only the variants you actually use, and paste refills the rest in the background from the file’s published copy in S3. On a component with over a thousand states, copy went from 700+ ms to about 50, and paste from 2 seconds to 400 ms.

Laura Fehre, Designer Advocate at Figma, demos three plugins she generated for herself: one that updates a component description and drops a changelog onto the canvas after a variant change, a print preflight that checks for 300 DPI and maps RGB to CMYK with die and safety lines, and a translation pass that duplicates screens into German, Dutch, and Japanese to catch overflow before shipping. The print one is the standout, since Figma has never handled prepress natively.

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.

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.

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.

Figma’s own three-minute primer on getting good output from the design agent. Five habits: write specific prompts instead of ​“make this better,” select the exact layer or frame to scope the edit, build with auto layout so the agent can read your structure, feed it full production-ready UI examples rather than lone base components, and keep a separate chat thread per task. The one most people miss is context hygiene — the agent reads your whole file, hidden layers, unused elements, and old versions included, so clean it up before you prompt.

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 guide​lines​.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.