Videos

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.

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.

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.

A short demo from Miggi on Riffs, now in beta on Figma Community. You can post up to five frames or export a motion frame as video straight from a file, add a description, and publish it to your profile. Figma Community becoming the new Dribbble wasn’t on my bingo card for this year!

Meng To sits down with Ridd at Dive Club for a 35-minute screen-share walkthrough of his current Codex workflow. He’s no longer opening Figma to create anything new — all design exploration, prototyping, and iteration happens in Codex, starting from screenshots and referencing his own past work as context. A few specific tactics stand out: using GPT Image 2 to generate UI concepts that then get turned into HTML, feeding a video of an animation to the AI and asking it to describe the right prompt to recreate it, and using design​.md files as a portable style guide that encodes years of taste into something the model can actually read.

Alex Barashkov of Pixel Point explains why his team stopped wrestling with Figma for certain jobs — procedural art, custom animations, branded asset generators — and started shipping dedicated apps instead. Toolcraft sets up a React starter with opinionated canvas behavior, a font picker, Lightroom-style sliders, and built-in AI instructions that prevent the agent from quietly breaking things it wasn’t asked to touch.

Carol, a designer at Mercury, walks through how she designed Mercury Command, the AI-powered interface being built into Mercury’s banking dashboard. The interesting part is her argument that agentic design fundamentally breaks the Figma-first workflow. Because the output is non-deterministic, she had to prototype in Cursor with a live system prompt to understand what the experience would actually feel like. ​“The system prompt in a way is the product,” she says.

Ryo Lu, Head of Design at Cursor, gave the standout talk at Cursor’s first conference, Compile. The title is ​“Closer to the Material,” and the core argument lands hard: as AI makes execution cheaper, the real risk is that humans become approvers rather than authors — people who accept or reject outputs without ever being inside the decision. He distinguishes between output (which ends the loop) and material (which invites you back in), and argues that the future he wants is tools that keep people close enough to the work to still have judgment. A sharp and honest take on the AI-design moment, and easy to connect to what Figma is navigating with its own agent features right now.

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.

Ridd digs into everything that launched at Config 2026 with Loredana Crisan, Figma’s Chief Design Officer. The key product philosophy she outlines: AI gets you to 70% — on shader effects, on motion — then you mold the rest. Weave, the node-based tool Figma acquired last year, is the clearest expression of this systems-over-screens direction: you build a workflow that produces a visual system, and the workflow is ​“the special sauce.” The big bet isn’t AI replacing the designer’s hand; it’s making AI a precision tool, which Loredana argues is still ahead of where the technology actually is.

Dylan Field opens Config 2026 by settling the design-vs-code debate once and for all: ​“Code is not the opposite of design. Code is material for design.” The keynote’s headline feature, Code Layers, puts live interactive code directly on the canvas alongside design layers, with a shared agent chat so teams can explore and riff together rather than each going a hundred prompts deep alone. From the same team: Figma Motion in beta, a full timeline-based motion tool with shader effects, 3D transforms, and export to MP4, GIF, and animated SVG. Worth watching in full: the Weave AI tools and custom shader section is genuinely impressive, and the generative plugin demos near the end show where the platform is heading.

Jake Albaugh, Developer Advocate at Figma, walks through setting up Code Connect from scratch — the NPM package, the config file, and mapping design properties to production code properties. The real payoff comes when he shows the before/​after through the MCP server: without Code Connect, an agent sees a flood of raw style data; with it, it sees clean, minimal component code it can actually act on. Unfortunately, Code Connect is still not available on the Pro plan.

Rachel from Figma’s Show Your Work series walks through her file and breaks down three categories where slots reshaped her system: repeating elements like menus and tabs (where she keeps nested subcomponents as default content so system-level edits still propagate), free-form areas like sheets and modals (where she often ships zero default content because designers just delete it anyway), and experimental page-level templates that ​“start to feel a lot more like code.”

Christine Vallaure walks through what ​“agentic design” actually means once an agent is reading your Figma file instead of a developer. The key shift: all the design-system hygiene we used to wave off as optional — primitives, semantic naming, modes, slots, props, and especially the long-neglected component Description field — now becomes load-bearing, because agents read literally and never ask you over coffee what you meant. A solid 10-minute orientation before diving into the more hands-on MCP pieces.

Meaghan Choi, lead designer on Claude Code, walks through her actual daily setup at a Dive Club talk in NYC: always in a worktree so parallel Claudes don’t overwrite each other, always in auto mode so the classifier handles permission prompts, and a custom /prototype skill that spins up five HTML variants of any feature and picks one with reasoning before she even looks. She demos it by asking Claude to add autocomplete to Excalidraw with no design spec, then has it open a PR with a screenshot recorded via Claude in Chrome. Her line that lands: she doesn’t review Claude’s terminal output anymore, she reviews the PR.

A skill is just a markdown file with strict instructions, optionally pointing to scripts the agent can run. Amy Lima and TJ Pitre build one live that round-trips a localhost prototype back into Figma via the use_figma tool, with per-state annotations for engineers and PMs who can’t comfortably leave feedback on a running prototype. They also cover the contribution flow to Figma’s community skills page. A good entry point if you’ve been wondering what the ​“skills ecosystem” around Figma’s MCP actually means in practice.