From Claude Code to Figma: Turning Production Code into Editable Figma Designs | Figma Blog

Now you can take workflows that start in Claude Code even further in Figma.

Connect Figma to other MCP clients Claude Code is one of our MCP partners. See all supported agentic tools in our MCP catalog. Sometimes, the quickest way to move an idea forward is to create something real. Building in code is one way to do this. Live prototypes let you work with real data, feel interactions in motion, and get a clearer sense for technical scope. With AI-powered workflows like Claude Code, it’s even easier to spin up these types of explorations, where you can prompt, iterate, and adjust interfaces in real time. The challenge becomes: how to bring that work out of a linear…

saved by

• Julian Pasquale

related reading

• Dylan Field en X: "Claude Code to Figma Design" / Xx.com
• Felix Lee (@felixleezd) on Xx.com
• Mark Gadala-Maria (@markgadala) on Xx.com
• guiseiz en X: "AI makes starting easy. The hard part is figuring out what to do next. Code is great for converging: one change, one refresh, one idea at a time. The canvas is where you diverge: lay it all out, see the options, think together. We built a way to go from Claude Code" / Xx.com
• Owen Roe en X: "You cannot make this up They are focusing more on flattening code and bringing frontend INTO A CANVAS instead of turning the canvas into code My goat is washed beyond belief 💔💔" / Xx.com
• Tom Johnson (@tomjohndesign) on Xx.com
• Introducing our Dev Mode MCP server: Bringing Figma into your workflow | Figma Blogfigma.com
• Thoughts and Feelings around Claude Design · Sam Henri Goldsamhenri.gold
• Best practices for Claude Code - Claude Code Docsanthropic.com
• Issue #245: AI-native designer. Skills. Sync design and code. | Figmalionfigmalion.com
• Figma Console MCP - Turn Your Design System Into a Living APIdocs.figma-console-mcp.southleft.com
• A Guide to Claude Code 2.0 and getting better at using coding agents – sankalp's blogsankalp.bearblog.dev