What the Figma Dev Mode MCP Server Actually Does
The Dev Mode MCP Server is a feature built by Figma, not a community workaround. It runs locally from the Figma desktop app and exposes the structure of a selected frame or file, its components, layout, spacing values, and any design tokens set up as Figma variables, in a format Claude Code can read directly. Point Claude Code at it and it stops guessing at a design from a flattened image and starts working from the actual layer tree.
That's the real difference from the older way of doing this, which was pasting a screenshot into your prompt and asking Claude Code to eyeball the spacing. A screenshot is pixels. The Dev Mode MCP Server hands over structure: this frame is built from a Button component with these variant properties, this color is the token brand/primary-600, this gap is 24 pixels because that's the auto-layout spacing value. Claude Code still has to write the code, but it's no longer reverse-engineering a picture to do it.
How to Set It Up in Claude Code
- Open the Figma desktop app, go to your preferences, and turn on the Dev Mode MCP Server. Figma starts it locally on your machine (by default at http://127.0.0.1:3845/sse) as long as the app stays open.
- In Claude Code, install the official Figma plugin, which registers the MCP server connection for you. If you'd rather add it by hand, add an MCP server pointing at that local address in your Claude Code MCP settings instead.
- In Figma, select the frame or layer you want Claude Code to build from, or copy its Dev Mode link from the toolbar.
- In Claude Code, describe what you want built and reference the selection or paste the Dev Mode link. Claude Code pulls the live structure from Figma as part of that turn.
One setup step is worth doing before your first real build: run the design-system-rules generation command once per project. It writes a persistent rules file so every future Claude Code session in that codebase already knows your token names and conventions, instead of you re-explaining them every session. Treat it the same way we treat a CLAUDE.md file, see our [CLAUDE.md templates by project type](/blog/claude-md-templates-by-project-type) for how that file should be structured alongside it.
What Actually Transfers Cleanly vs What You Still Have to Check
The MCP connection closes most of the gap between a design file and working code, but not all of it. Knowing which half you're still responsible for is what keeps a Figma-sourced build from surprising a client later.
What the Dev Mode MCP Server hands off
| Transfers cleanly | You still have to check |
|---|---|
| Component structure and hierarchy | Custom fonts not installed on the build machine |
| Spacing and layout values from auto-layout | Interaction and hover/focus states beyond what's drawn |
| Colors and type styles set up as Figma variables | Colors picked as raw hex with no variable behind them |
| The exact frame or selection you link | Any breakpoint the design file doesn't actually show |
That last row catches people the most. A Figma file usually shows one frame at one width. The MCP server hands over exactly that frame's structure, it doesn't invent a mobile layout that was never designed. If the client needs a responsive build, say so in your prompt and expect to review Claude Code's judgment calls on the breakpoints the design never specified.
The CCC Design Parity Check
Before anything built from a Figma reference goes to a client, I run three passes. It takes ten minutes and it's caught more mismatches than any other single habit in this workflow.
- Side by side, zoomed in. Open the Figma frame and the running build at the same zoom level and check spacing and alignment directly against each other, not from memory.
- Token check, not color check. Open the generated code and confirm it's referencing your actual variable names (brand/primary-600) rather than a hardcoded hex value that happens to look close. A hardcoded fallback breaks the first time the client updates their brand color in Figma.
- Test at a second width even if the design only showed one. Claude Code made layout decisions somewhere between the designed frame and a phone screen. Find out what they were before the client does.
Where This Fits in a Client Handoff
This connection earns its place the moment a client hands you an actual Figma file instead of a PDF or a set of screenshots. It's the fastest way I know to go from that file to a first working pass, and it removes almost all of the manual pixel-measuring that used to eat the first hour of a build. It doesn't replace a real project brief, it feeds one, see [how to write a project brief for Claude Code](/blog/how-to-write-a-project-brief-for-claude-code) for how I combine a linked Figma frame with the rest of the scope before I start building.
When Not to Bother With It
Skip the setup on a simple one-off, or when the client only has a screenshot or a PDF and no live Figma file at all. Pasting an image straight into your prompt still works fine for a landing page or a small component, see [how to build a landing page with Claude Code](/blog/build-a-landing-page-with-claude-code) for that path. Reach for the MCP server when there's a real design system behind the file, tokens, reusable components, multiple frames, the kind of build where structure actually matters more than a single picture.
Short, practical drops on skills, MCP, agents, prompts, and more. No spam, unsubscribe anytime.
Frequently asked questions
How do I connect Claude Code to Figma?
Turn on the Dev Mode MCP Server in the Figma desktop app's preferences, then add it as an MCP server in Claude Code, either by installing the official Figma plugin or by pointing your MCP settings at the local address Figma exposes. Select a frame in Figma, then reference that selection or its Dev Mode link in your Claude Code prompt.
Does Claude Code see my whole Figma file once it's connected?
No. The Dev Mode MCP Server only exposes what you've selected in Figma or linked directly, not your entire file or workspace. It also requires the Figma desktop app to stay open, since the server runs locally on your machine rather than in the cloud.
Will the code Claude Code generates from Figma match the design exactly?
Close, but not automatically perfect. Component structure, spacing, and any values set up as Figma variables transfer cleanly. Custom fonts not installed locally, interaction states the design never drew, and breakpoints beyond the one frame you linked still need a manual pass, which is what the CCC Design Parity Check in this post is for.
Do I need a paid Figma plan to use the Dev Mode MCP Server?
The server is a feature of the Figma desktop app itself rather than a separate paid add-on, but access to Dev Mode has historically depended on your Figma plan and role. Check your current plan's Dev Mode access in Figma directly before you build a workflow around it, since Figma changes plan features over time.
What if Claude Code can't see the Figma MCP server?
Confirm the Figma desktop app is open and the Dev Mode MCP Server toggle is still on, that's the most common cause after a Figma update resets it. If it's still not connecting, work through the rest of the usual causes in our guide to a Claude Code MCP server not working.
Last reviewed by David Iya on August 24, 2026
