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.

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

Annual reminder that the Makeathon is the best showcase for how far Figma Make can be pushed.

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.

Yarden Katz, Product Manager at Figma, walks through the bidirectional workflow between Codex and Figma’s MCP server. The design-to-code direction is the expected one — copy a Figma frame link, paste it into Codex, and the get_​design_​context tool extracts layouts, styles, and components to implement against. The more interesting direction is code-to-canvas: Codex can capture a live running UI and push it back into Figma as editable frames, letting the design side iterate before syncing changes back to code.

GitHub Copilot can now connect to the Figma MCP server to push rendered UI into Figma as editable frames and pull design context back into code.

Socrates’ submission to Makeathon is a design newspaper, built entirely in Figma Make and styled as a classic broadsheet. Lots of cool effects, including realistic page turn, the ink-wet loader, and ink bleeding through the back.

FigJam is now available in Notion as a pre-configured MCP integration.

“Welcome to Deep Dive with Jay, a series where we will look inside the Figma files of top designers. In this interview Jay chats with Shreya, Senior Product Designer at Groww and freelance illustrator. You will learn how Shreya uses Figma Draw for freelance illustration projects.”

You can now type directly in the hex code input to access your color variables and styles. Lots of smart details: enter a hex value and see all variables and styles using it, colors are surfaced based on the context, and related terms are baked into the new algorithm (i.e., finding your ​“danger” variable when searching for ​“error”).

The Figma Makeathon is officially live! $100,000 in prizes are up for grabs. Check out the guidelines to get started.

I missed the announcement a couple of weeks ago, but the stamp wheel now includes all emojis, which you can use as emotes or as stamps.

From design system documentation and PRDs to user research and feedback, Make can now pull in context from across your product ecosystem. Figma added new featured connectors for Amplitude, Box, Dovetail, Granola, Marvin, and zeroheight. You can also connect Make to any remote MCP server by setting up a custom connector.

Once you’ve installed and authorized a Make connector, just hit @ in your Make file and start typing the connector name to pull external context directly into your prototype.

Joey Banks: “…trying Figma Console MCP has completely opened my eyes into what I can offload. Not because it replaces the enjoyable work that I was doing before, but because it handled some of the longer, more repetitive tasks so quickly, and actually so well. Creating 200+ variables took seconds, and mapping them to color swatch instances so the team could preview values was way easier than I expected.”

“Bringing Claude Code workflows directly into Figma lets developers, designers, and even hobbyists capture a real, functioning UI from a browser — in production, staging, or localhost — and convert it into editable frames on the Figma canvas. Code is powerful for converging — running a build, clicking a path, and arriving at one state at a time. The canvas is powerful for diverging — laying out the full experience, seeing the branches, and shaping direction collectively. Going from code to canvas helps teams move fluidly, so work can narrow when it needs to and open up when it’s time to collaborate.”

My guess is it’s based on the html.to.design technology that Figma acquired last year, which is a huge time saver and an essential part of my toolkit. I haven’t tested Claude Code to Figma yet, but the result in demos looks very similar to what I usually get from the plugin. Which makes me wonder why they limited it to Claude Code instead of making something like a universal ​“Send to Figma” browser extension?

Weavy’s CEO Itay Schiff walks through his path from 25 years in high‑end VFX to building Weavy, and why Figma acquired it. Weavy lets you package complex node‑based AI flows into simple apps that 200+ teammates can use, baking in brand rules and references by default. It matters if you care about how Figma will operationalize AI beyond one‑off prompts — this is effectively ​“internal tools for creatives” hiding behind a friendly app layer.

In this interview, Jay Dalal chats with Laura Dunn, Head of Design Research for the GM Human Interface Design Team. You will learn how Laura uses Figma Make as a UX researcher to communicate visually with designers.

Once your design system is in Figma Make, you can really reap the benefits of working with design and code side by side and start actually using your system. This article walks through the specific technical problems of pulling a design system out of a monorepo to make it accessible in Figma Make.

With the Figma MCP app in Claude, designers, developers, and product managers can now create AI-generated FigJam diagrams.

On a recent livestream, Product Designer Megan Bednarczyk and Software Engineer Nile Phillips from Figma demonstrated how PDE teams can use AI-powered diagramming to tackle complex problems and visualize the bigger picture.