Videos

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.

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.