Videos

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

Seven small FigJam fixes that add up: cell merging in tables (preserves the upper-left cell’s content), per-cell text colors, wider arrow routing margins with cleaner heads and dashed endpoints, drag-any-handle to flip a shape, a recenter button for big canvases, a slightly more zoomed-out default, and template publishing now on Professional plans (up to 5 per team).

Dylan Field in an interview with Peter Yang argues that AI will massively expand what’s possible in design, but the enduring edge for humans is judgment: taste, craft, and point of view, plus the ability to use AI as an iterative partner rather than a one-shot generator.

Steve Schoger from Tailwind Labs recorded a step-by-step walkthrough on taking an AI-designed dashboard and turning it into something that looks like it was designed by a pro.

Brad Frost and Chromatic cofounder Dominic Nguyen walk through how Storybook’s new MCP exposes design systems for agents to use reliably. The key insight: AI doesn’t invent states your components don’t have — it amplifies what’s documented. Coverage, completeness, and constraints are now load-bearing.

Ed Bayes leads design on Codex at OpenAI; Gui Seiz leads AI product design at Figma. Together with Aakash Gupta, they give a rare behind-the-scenes look at what the Codex-to-Figma MCP integration actually changed inside their teams. The workflow is genuinely bidirectional, code and canvas reading from each other directly. The most concrete signal that something shifted: designers are working directly in staging.

Figma and Anthropic demonstrate the Claude Code roundtrip in both directions. Write to Canvas lets Claude Code create and modify designs directly in Figma; Code to Canvas brings live browser UI back in as editable frames. Worth watching alongside the Agents on Canvas blog post and Figma Skills page for the full picture of what this workflow ecosystem looks like.

Jony Ive on redesigning the Christie’s auction rostrum, an object with 260 years of history and specific ceremonial weight.

Luis Ouriach argues that modern design systems have become the centerpiece of software development in an AI-first world, shifting from a siloed support function to the primary mechanism that tells LLM-based tools what to build, and therefore directly shaping code quality, speed, and brand differentiation.

The Claude Code version of Figma’s ​“Code to Canvas” tutorial. Clear and short, covers the same workflow as the above.

Figma’s official walkthrough for the Codex-to-canvas workflow: pull coded designs into Figma as editable frames, iterate on the canvas, push changes back to code.

Gui Seiz and Alex Kern from Figma walk through the exact workflow they use to keep design and code in continuous sync using Figma’s MCP, Claude Code, and Codex. Their demo shows the full round-trip: pull a running web app into Figma as editable frames, make design changes on the canvas, push them back to code via Claude Code. If you’d rather read than watch the full video, the newsletter summary of this How I AI episode captures the key takeaways.

Jenny Wen, who brought FigJam from concept to launch at Figma and is now design lead at Anthropic, talks at the Double Diamond podcast about designing Claude itself. The key difference from traditional software: ​“When you are designing now with these LLMs, you basically can’t map out all those flows. You basically just have these core primitives and these specific states that you want the model to get to, but the possibilities in which the user can actually interact with the model are just basically endless.”

Steve Schoger is a design cofounder of Tailwind CSS and a recent Claude Code convert. In this walkthrough, he is using Claude Code as his main design tool to turn a generic AI-generated marketing page into a polished Tailwind UI, with lots of concrete tweaks to typography, spacing, borders, and layout.

Ridd interviews Kris Puckett, design manager at Stripe and formerly design lead at Mercury and Dropbox, on becoming an AI-native designer by using tools like Claude Code, OpenClaw, and personal AI to ship his own apps, supercharge his design practice, and build highly personal systems for life and work. I’m deeply curious about the last part and can’t wait to dig into his course Neuma on building a personal AI system.