Videos

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.

Linda Dong and Doug Williams, design evangelists at Apple, walk through the eight principles Apple now uses as its design foundation. The framing that stood out is their definition of design as ​“making something with intention” and the reminder that every feature asks for someone’s time, attention, and trust. This is the video companion to the refreshed HIG Design Principles page, and the first time in a while Apple has put this much weight behind articulating its design philosophy publicly.

An official Figma walkthrough of the agent (currently in beta, rolling out since May 20) through three phases of a real design project: exploring directions, processing feedback, and automating repetitive updates. The most practical detail: the agent works with your connected design system from the first prompt, so generated screens use your actual components, variables, and styles rather than placeholders. Also worth trying a prompt like ​“what would a growth-focused PM say about these designs?” to simulate stakeholder pushback before the actual review.

Matt Colyer, Figma’s director of product management for developers, makes the case on Dan Shipper’s AI & I podcast that the SaaS apocalypse narrative has it exactly backwards. He’s been running his own agents for two years and is buying more software subscriptions than ever, because shipping and maintaining a personal agent teaches you fast why people pay for someone else to run it. The more interesting half is about design specifically: chat is linear, which makes it good at converging on a single direction but terrible at generating lots of options. Figma’s on-canvas agent is a first attempt at the divergent side — letting you branch frames in different directions, then bring in a convergent agent to cluster them. He also walks through how the MCP server closes the code-to-design loop, and why ​“review” has quietly become the biggest bottleneck in AI-assisted product work.

Soleio’s guest is Rasmus Andersson: founding designer of Spotify, one of Figma’s first designers, co-creator of GraphQL, and creator of Inter. The part that stayed with me is his description of how Figma operated: one person on one problem for a year, sometimes binned at the end, while shipping something visible every month. He also makes a case that the production side of design — the part AI is eating fastest — was never actually the hard part. What’s left is the intention. The other link in this section is Soleio’s talk on the geometry of luck, making this pair worth watching together.

Leandro Casteel, design manager on Figma’s brand studio, sits with lettering artist Erik Marinovich (Nuform Type) to unpack the Q1 26 earnings posters they made together. Erik traces his approach to type back to apprenticing as a bricklayer under his dad, picking stones from a two-ton pallet to build pathways like a jigsaw puzzle. The same instinct shows up in his letterforms: graphic compositions you’d want to stare at even if you never bothered to read the word.

The on-camera companion to the Make-on-Local-Code launch. The most interesting bits beyond the blog: a Figma editing panel inside Make for direct style changes, multi-element annotations pinned to the rendered screen (including voice mode), and MCP server support for resolving merge conflicts and CI failures. The pitch is that designers get agency to ship the change themselves while the engineer’s review workflow stays untouched – apple for early access.

Lauren Budorick, a software engineer at Figma, walks through six optimizations behind a recent ​“10x faster vector editing” announcement.

A short onboarding walkthrough for the agent beta. Worth watching for the suggested starter prompts: generating alternative layouts, starting from scratch using your design system, working together on canvas, and getting feedback.

“We don’t think designers should generate a one-shot screen and call it a day.” That sentence from the announcement is Figma’s vision for the design agent in a nutshell. The framing is explicitly co-pilot, not auto-pilot: the agent runs in front of you on the canvas, riffs to spark an idea, and then hands it back to your mouse and direct manipulation. Pair that with native access to your libraries, components, and tokens, and the bet is clear – the winning AI design tool is the one that already knows your design system, not the one that generates the prettiest screenshot.

Rolling out gradually in beta over the coming weeks. During beta, the agent won’t consume credits. See also the official announcement at The Figma design agent is here.

“AI designs with you, not instead of you.” Figma’s positioning for useFigma, the new write-capable MCP tool that creates real components, variables, and auto layout on the canvas, not flat images or wireframes. The demo runs the full loop: terminal prompt to first draft, manual polish in Figma, annotations the agent later reads as design context, then back to the terminal to update the codebase. The annotations detail is the most interesting part — they double as machine-readable spec.

Designer advocate Amy Lima walks through a full code-to-canvas-to-code round trip on a sample app: install the MCP in Cursor with /add-plugin, authenticate via OAuth, generate a new screen iteration into Figma, refine it by hand, then prompt the agent to update the codebase and open a PR. Pairs well with the useFigma deep dive below.

Owen Williams, design manager at Stripe, walks Claire Vo through Protodash, the internal prototyping platform he’s been building for 18 months. The V1 was a bundle of Cursor rules plus an MCP server wired to Sail, Stripe’s design system, so any designer can open the repo and build a page without ever touching React or routing. V2 wraps the whole thing in a browser UI running on internal dev boxes, with embedded LLM chat, click-to-annotate feedback, a design review mode, and fidelity toggles (monospace, grayscale) to signal work-in-progress. The same pattern as the Notion and Vercel pieces in this section: production design system plus a thin internal harness, calibrated to one team’s review culture in a way no off-the-shelf tool can be.

Brian Lovin shows the Notion design team’s Prototype Playground, a single Next.js repo on Vercel where every designer gets a namespaced folder and a small set of shared Notion-flavored components. The interesting parts are not the scaffolding but the slash commands and skills layered on top: /figma runs a three-phase loop with the Figma MCP and Chrome DevTools MCP until the build matches the source (~80% on the first try), and a find-icon skill writes its own TypeScript search script after the team got tired of Claude hallucinating ​“search-icon.” See also the Stripe and Vercel pieces below for the same pattern at other companies, as well as another interview with Brian at Dive Club.

The May edition is mostly a demo of Figma’s MCP server, with Amy Lima and Anthony DiSpezio walking through three workflows: code-to-canvas import of a vibe-coded prototype, round-tripping a dark mode so variables stay in sync between code and Figma, and using the pre-installed figma-use-scale skill to generate first-pass directions on a production dashboard. The closing update reel includes vector editing up to 10x faster, memory warnings down 92%, macOS eyedropper now samples anywhere on screen, FigJam MCP can read and write boards (ERDs, architecture diagrams), Make Kit packages your design system’s code for Figma Make, and Weave gets a timeline for video.

Figma walks through the performance work shipped across the platform: vector editing up to 10x faster, Make frame rates 4x smoother, faster load times, and 92% fewer memory warnings. The vector number is the one I’d watch — it changes how heavy illustrations actually feel under the cursor.