In this webinar, Yarden Katz (Product Manager for MCP) and Peter McCarron (PMM for Dev Tools) walk through some best practices for how to structure your design files to ensure better design-to-code translation, use annotations and rules to align outputs with your codebase, and provide other tips & tricks for optimizing your MCP outputs.

Design Engineer Carmen Ansio on the change coming to translating visual ideas into solid code: ​“We’re on the edge of a massive shift, thanks to three things coming together: smart design systems in Figma, an AI-native code editor called Cursor, and a data bridge called the Model Context Protocol (MCP). We’re not just translating pictures anymore. We’re building machine-readable systems that an AI can understand and build from directly. This guide is for you, the person on the ground, showing you not just how to use this new workflow, but how to think about it.”

Matt Wierzbicki shows how to turn Figma designs made with shadcn/​ui into production‑ready code by setting up Cursor to use shadcn/​ui and Figma MCPs.

In the first episode of a free Figma AI course by The Cutting Edge School, you’ll learn how to turn static designs into working web apps using Figma Make, without writing a single line of code. It explores the interface, attaching design files, styling components, adding a backend with Supabase, and finally previewing and publishing a live prototype. This is a beginner-friendly lesson that covers Figma Sites, Dev Mode, and how to use Claude-powered AI to generate functional apps faster than ever.

Maggie Appleton argues today’s chatbots drift toward sycophancy — undercutting Enlightenment habits of skeptical, reader-engaging discourse — and suggests giving users explicit ​“critique modes,” routing to tougher personas, and training methods beyond RLHF (reinforcement learning from human feedback) so assistants challenge us, not flatter us.

A fun chatbot made by Max Schoening from Notion. Reading The Grug Brained Developer first is recommended, but ​“What Grug know” is a good primer on simplicity and avoiding pain.

Updates to AI-powered image editing features across all products — remove background or boost resolution for up to 25 images at once, and choose between Gemini 2.0 Flash and GPT Image 1 to get results that best match your prompt.

Starting July 24th, Figma Make and all Figma AI features, including Code Layers, Rename Layers, Make/​Edit Image, etc., are now in general availability, and Figma Make is available for everyone to try. All plans and seat types include AI credits that are shared across all Figma AI features and products.

Anthropic Product Designer Meaghan Choi and Figma Developer Advocate Akbar Mirza show how Anthropic goes from design to prototype to production with Claude Code and Figma’s Dev Mode MCP server.

Ana Boyer: ​“Just as design systems help design and engineering teams understand brand guidelines, best practices, patterns, and code, they give AI agents the context they need to produce not just any output, but the right output. And when AI agents can build with your design context, they create a flywheel effect: AI strengthens your design system, which powers better AI code generation.”

Great analogy: ​“Asking an AI agent to generate code without design system context is like asking a new engineer to start shipping code before onboarding. It might technically work—but it won’t align with how your team actually builds.”

Joey Banks shares a free lesson from his course with Dive readers on how to use Figma’s MCP Server. 

Dan Saffer makes a clear case that AI doesn’t kill UI — it raises the bar for it. A single chat box won’t cut it, and direct manipulation plus visual affordances make AI legible, accessible, and trustworthy.

Zeh Fernandes revisits David Krakauer’s ​“complementary vs. competitive” framework — think abacus vs. calculator, GPS as a skill-eroder — and argues that AI tools should teach as well as do. ​”Often, we don’t want to be better navigators, or our use of math is so trivial it doesn’t justify constant practice. And that’s fine. So long as it’s a deliberate choice. But in digital product design, the emphasis tends to fall on outcomes alone: getting the job done, removing friction, making everything feel effortless. In the short term, we gain speed. Over time, though, we risk dulling the very skills we once actively cultivated.”

A set of resources for upskilling from one of the ​“traditional” digital design roles (UI, UX, Service) towards becoming AI aware, and on to become an AI designer.

Tailwind’s Dan Hollick shows Ridd from Dive Club how Claude Code ties into Figma’s MCP server to spin up an editable UI, sharing his prompting tactics and live-debug workflow along the way. Handy if you’re testing AI-assisted builds from real design files.

Developer Advocate Akbar Mirza and Product Manager Yarden Katz provide a live update on Figma’s Dev Mode MCP (Model Context Protocol) server, explaining what MCP is, how it works, how to set it up, and how it helps bridge the gap between design and code. They also cover the new support for Annotations, which allows designers to add accessibility, behavior, and content information to their design files, which the AI agent can then use to generate more accurate code. Finally, they discuss the importance of aligning variable names between design and code. Don’t miss the follow-up video where Akbar and Yarden answer viewer questions from the livestream. 

Ridd shares his new approach for vibe coding a side project. He treats ChatGPT as a CTO and Cursor as an engineer, with the CTO keeping all context about the project and breaking it down into chunks for an engineer to implement. I’ve been using a similar approach for a recent project with lots of moving parts and unknowns and it’s been working well. My only tip is to pick a smarter CTO in the form of an o3 model, maybe even employing Deep Research for the original plan.

“New in Dev Mode MCP Server: Annotations are included as design context. Generated code now benefits from both the structure of your design and your design intent.”

Developer Advocate Jake Albaugh shows how to bring design context from Figma directly to your agentic coding tools with the new Dev Mode MCP server.

Vercel introduced the new design mode in v0 — quickly tweak generated copy, typography, layout, colors, styling, and mode. These changes do not require spending credits or waiting for an LLM. Tailwind and shadcn/​ui are supported out of the box.