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. 

Rogie walks through quality of life updates for Figma Draw’s variable width stroke feature. Now you can select a width point and double click to enter a numerical value; after selecting a width point, you can go to the next one with Tab and the previous one with Shift-Tab shortcuts; with a custom width profile, you can see a preview of the shape or edit the width profile from the menu; hold Control to disable Snap to Pixel for more precision; select two width points by holding Shift and resize both together. 

Rogie King introduces a new brush type in Figma Draw — scatter brushes. Make sure to read a fun behind-the-scenes look at how Rogie and Molly worked together to create and name the new brushes.

Miggi shows a new Figma Draw feature. You can now take any flattened vector path and offset it to expand or retract it.

Steven Levy at WIRED: ​“He (Dylan Field) explains that in the early 2000s, design was about making things pretty. By the 2010s, people were emulating Steve Jobs’ philosophy that design was about function. Now, Field says, design is not only both those things, but our means of communication—who you are, what your brand stands for, how you engage with the public. Our world is built on software, Field says, and the more software is created, the more design becomes the core differentiator.”

TBPN show hosts asked Dylan Field about organizational design in the age of AI and the importance of design.

Read Dylan Field’s founder letter about why design is more important than ever, and what’s next for the company.

A behind-the-scenes look at how Figma’s product icons come together: Tim Van Damme shares guidelines (one pixel strokes, rounded caps, consistent and balanced sizes) and iterations it takes to make the whole suite feel like a family. Love the idea of rating confidence: ​“Tim frequently solicits feedback from product designers and product managers, guiding the conversation with a one-to-five star rating to show how confident he is in a design.”

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.

Noah Levin, VP of Product Design at Figma, sits down with the Design Better podcast to answer their questions about hiring and scaling design teams in the AI age, fostering better design-developer collaboration, and lessons from designing the new Figma.

I wrote about Vijay Verma’s Kigen plugin in the past, but now he has extended it with a color generator for the web. It supports different color generation algorithms, naming patterns, and exports CSS, JSON, or Tailwind tokens.

Jenny Wen, previously a Director of Design at Figma and now a design lead at Anthropic: ​“The way I’ve seen great work made isn’t using any sort of design process. It’s skipping steps when we deem them unnecessary. It’s doing them out of order just for the heck of it. It’s backtracking when we’re unsatisfied. It’s changing things after we’ve handed off the design. It’s starting from the solution first. It’s operating on vibes and intuition. It’s making something just for the sake of making people smile. It’s a feeling that we nailed it. It’s knowing how to bend the process in your favor. It’s the sense to know how to keep making your work better. And it’s a clear, unwavering ideal of what good looks like.”

Ridd recorded an entire new video influenced by her article.

Designer Advocate Lauren breaks down how to create code layers in Figma Sites.

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.

On July 9th, Friends of Figma chapters around the world organize a 24-hour virtual event featuring insights and experiences from makers, thinkers, and builders. Each participating Friends of Figma chapter hosts a one-hour session featuring local speakers and stories — creating a continuous, community-led experience that spans time zones and continents. The event is free and will be recorded; check out the massive agenda in multiple languages!

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.

Beautiful work by Tim Van Damme. See a sneak peek of a few more on their way.

Great demo of code layers by Niko, who is now a product manager for interactivity. ​“Code now belongs; make a mess, rev, refine.”