Figma and Anthropic launched Code to Canvas, which converts working code from Claude Code into fully editable designs inside Figma. An amazing feature and a bridge between AI coding and the traditional design process, announced on February 16–17, 2026 (meaning everything already works, you can try it).
I connected it and will show in the next post what comes out. Here's why this feature is needed in principle:
1. Team collaboration. Usually the developer keeps the code to themselves, and the designer only sees screenshots. Now code instantly becomes a mockup in Figma. The whole team can go in, tweak elements, fix text, and align visuals before final implementation.
2. You can move things by hand, not by code. AI produced a basic interface. Instead of asking it to "move the button" 10 times, you just send it to Figma and create 5 layout variations yourself in a minute. AI builds the foundation, you make it beautiful.
3. You can send the design back to Claude Code with one button. Tweaked the design by hand in Figma? Send the frame link back to Claude, and it updates the code to match your changes. Design and code are now synced.
How to set up in 3 minutes
You need Figma Desktop App and a Dev Seat account in Figma ($20/month), plus access to Claude Code.
1. In Figma press `Shift+D` (switch to Dev Mode), find the MCP server section, and click Enable.
2. In the terminal, enter:
`claude mcp add --transport http figma https://mcp.figma.com/mcp`
Or if you're not using the terminal, just ask Claude Code to help with setup (it can handle it)
3. In Claude type `/mcp` and confirm the connection.
How to use:
Type in Claude: "Build a CRM dashboard" (or "expert prediction cards about AGI," I'll show in the next post what came out of mine). It writes the code.
Type "Send to Figma."
Magic — in 3 seconds you have an editable mockup in your file.
Basically, you can now generate entire interfaces and just do art direction (a.k.a. moving rectangles in Figma).
Guide from Figma | Launch announcement