The Figma MCP server has been around for a while, letting AI coding tools pull design context — components, variables, layout data — directly from your Figma files. Useful, but one-directional. You could read from Figma, but you couldn’t write back.
That changed this week. Figma launched Code to Canvas in collaboration with Anthropic’s Claude Code, and the MCP server now supports write access. You can push code-generated UI directly into Figma as fully editable frames.
Table of contents
Open Table of contents
What changed
Previously, the Figma MCP server was read-only. AI agents could extract design tokens, inspect components, and pull layout information into coding environments. Helpful for developers translating designs into code, but the flow only went one way.
Now, the pipeline is bidirectional. You can:
- Push code to Figma: Take a working interface built in Claude Code and convert it into an editable Figma frame — real layers, real components, not a flattened screenshot
- Pull designs back to code: Use the MCP server to bring Figma changes back into your codebase
- Clone live sites into Figma: Point Claude Code at a production URL and generate an editable Figma frame from what’s running in the browser
That last one is the standout use case. Type “clone my website into an editable Figma frame” and you’ve got a starting point for redesign work — without manually recreating anything.
Why Figma’s openness matters
This is a bigger strategic move than it looks.
There was a genuine question about whether major platforms like Figma would lock down write access to protect their own AI features. Figma could have chosen to keep the “agentic surface” in-house — restricting write actions to their own AI tools and making third-party agents read-only consumers.
They didn’t. Instead, Figma opened up write access through the MCP standard, letting tools like Claude Code become full participants in the design workflow. That’s a meaningful signal about where the industry is heading: platforms that embrace open protocols over walled gardens will attract the best tooling ecosystems.
“In a world where AI can help build any possibility you can articulate, your core work is to find the best possible solutions in a nearly infinite possibility space.”
Dylan Field, CEO at Figma
Field has also argued that the design canvas is better than an IDE for navigating lots of possibilities — you can “think divergently and see the big picture by comparing approaches side by side.” Code to Canvas makes that practical by letting teams start in code and move to the canvas without friction.
How it works
The Figma MCP server comes in two flavours:
Remote server (recommended for most teams)
- Available on all Figma seats and plans
- Connects to
https://mcp.figma.com/mcp - Uses OAuth — no API key setup needed
- Works with Claude Code, Cursor, VS Code, Windsurf, and other MCP-compatible editors
Desktop server
- Requires the Figma desktop app
- Requires a Dev or Full seat on a paid plan
- Runs locally at
http://127.0.0.1:3845/mcp - Enable it in Dev Mode via the inspect panel
To add the remote server to Claude Code, run:
claude mcp add figma-mcp-server https://mcp.figma.com/mcpFor the desktop server:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sseOnce connected, you can paste Figma links into your prompts or select frames in the Figma app and reference them directly.
What marketing teams should care about
If you’re a marketer, you probably don’t live in a code editor. But this still matters for how your team works.
Faster design iteration. When your developer builds a landing page with AI, they can push it straight into Figma for your review. No more waiting for screenshots or staging links — you get an editable Figma file you can annotate, comment on, and riff on.
Clone and redesign. Want to audit a competitor’s landing page? Or iterate on your own? Clone the live site into Figma and start working with real structure rather than rough mockups.
Tighter feedback loops. The bidirectional flow means designers can make changes in Figma and developers can pull those changes back into code through the MCP server. Fewer handoff gaps, less “that’s not what the design shows.”
Prototype faster. Product marketers can describe a page to Claude Code, generate a working prototype, push it to Figma for design review, iterate visually, then pull the updated design back into code. The whole loop tightens from days to hours.
The bigger picture
Code to Canvas is part of a broader shift we’ve been tracking. The MCP ecosystem is maturing fast, and the companies that are opening up bidirectional access — not just read, but write — are creating the most valuable integrations.
“The better cogeneration gets, the more design matters… design is a differentiator. But I think it’s even more true in this world.”
Dylan Field, CEO at Figma
That’s the right framing. AI doesn’t make design less important — it makes good design easier to produce and iterate on. The tools that embrace this, rather than trying to gate access, will win.