Table of contents
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.
Short answer: the Figma MCP server is no longer read-only. Since February 2026, it supports write access too — you can push code-generated UI straight into Figma as fully editable frames, not just pull design data out.
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.
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
Figma MCP server vs the alternatives
If you’re weighing up how to connect AI tools to your Figma workflow, here’s how the MCP server compares to the other two ways of accessing Figma programmatically:
| Figma MCP server | Figma REST API | Figma plugins | |
|---|---|---|---|
| Read access | Yes — design context, components, variables | Yes — full file data via HTTP requests | Yes — live access inside the Figma canvas |
| Write access | Yes, since Feb 2026 (Code to Canvas, remote server only) | Yes, with the right scopes, but you write the integration yourself | Yes — plugins can create and edit native content |
| Setup | OAuth via your MCP client (Claude Code, Cursor, VS Code, etc.) — no custom code | API token + you build the request/response integration | Built and installed inside Figma, no external agent needed |
| Best for | AI coding agents that need design context and can push code back as editable frames | Custom scripts, internal tools, and CI/CD pipelines that need programmatic file access | In-app automation and UI extensions that run inside Figma itself |
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.
This is the same pattern we’ve seen with other marketing MCP servers: connecting an AI agent directly to a tool’s data cuts out the manual export/import step. We’ve covered the same shift for analytics in our GA4 MCP guide, for experimentation in our GrowthBook MCP guide, and for research and content in our Firecrawl MCP server guide.
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.
Frequently asked questions
Is the Figma MCP server read-only?
No, not anymore. Until February 2026 the Figma MCP server only let AI agents read design context — components, variables, layout data — out of Figma. Since the Code to Canvas launch, it also supports write access: agents can push code-generated UI into Figma as fully editable frames.
Does Figma MCP support write access?
Yes. Figma’s remote MCP server now supports bidirectional access. You can pull design context into your coding environment, and you can push a working interface from a tool like Claude Code back into Figma as native, editable layers — not a flattened screenshot.
Do I need the desktop app to get write access in Figma MCP?
No. Write access (Code to Canvas) works through the remote Figma MCP server at https://mcp.figma.com/mcp, available on all Figma seats and plans via OAuth. The desktop server is a separate option that requires the Figma desktop app and a Dev or Full seat, and is aimed at organisations with specific local-network requirements.
What’s the difference between the Figma MCP server and the Figma REST API?
The Figma REST API is a request/response interface any application can call to fetch or (with the right scopes) modify file data programmatically. The Figma MCP server is a standardised interface built specifically for AI agents and coding tools — it adds context-aware read access plus, as of 2026, write access to the canvas, without you writing custom API integration code.