Claude Code now integrates with Figma so designers can export a live site, edit the layout in Figma, and send frames back to Claude to generate updated code. Matt Wolfe walks through the full workflow, including the round-trip back-to-code step Anthropic didn't show publicly.
Chapters
Now, in spite of the fact that Anthropic rolled out an entirely new model this week, I think the coolest thing that I saw from Anthropic this week was this. In collaboration with Figma, from Claude code to Figma, turning production code into editable Figma designs. So we can see in this demo here, they say spin up a dev server and it opens it up on their local host and then they say send the My Pantry page to the Figma file. It thinks for a second and then it takes the design that's there on the site right now and tosses it into Figma. And once it's in Figma, they can then edit the design. They're working together to actually add notes and design collaboratively inside of Figma. Here we can see they redesigned it into multiple rows and then it says here they can round trip it back to code. Now, for whatever reason, they didn't show that part in their demo videos. But with the Figma MCP server, you can bring work back into the coding environment using a prompt and a link to the Figma frame. So once you have the design dialed in the way you like it, you grab a frame, take it back to Claude code, and then it tweaks the code for you and makes it the design that you designed it in Figma. To me, that's actually pretty cool.