Figma and Design System MCP

The Figma MCP server gives AI coding tools direct access to Figma design data — exact spacing, color tokens, font weights, and component mappings — through five tools: get_design_context, get_metadata, get_variable_defs, get_code_connect_map, and get_screenshot. It runs locally inside Figma desktop or remotely at mcp.figma.com, and supports selection-based and link-based workflows.

Your designer just updated the pricing page in Figma. You squint at the spacing, guess the gap is 24px (it is 20px), hardcode a color that looks like the primary blue (it is #2563EB, not #3B82F6), and ship it. Design review comes back with twelve comments. Two hours later you are still toggling between Figma and your editor, fixing values one pixel at a time.

Then the loop gets worse in a subtler way. You ask the AI to build a card from a Figma frame and it ships clean-looking code — with a brand-new #4F86F7 button, a one-off rounded-[10px], and a hand-rolled avatar that ignores the <Avatar /> you already maintain. Multiply that across a sprint and your design system quietly forks into forty slightly different blues.

Generating a component from a screenshot is the easy 80%. This guide covers both halves: connecting the server so the AI reads real design data, and the token and Code Connect discipline that makes it reuse what you already have.

What Figma MCP gives you

• Setup for Figma’s Dev Mode MCP server across Cursor, Claude Code, and Codex, local and remote
• The difference between selection-based and link-based workflows, and when each one is the right call
• A repeatable flow for syncing Figma variables into a typed token file your code imports
• A token pipeline (Figma variables to Style Dictionary to CSS and TS) that survives more than one component
• Prompts that force generated UI to consume existing tokens and Code Connect components rather than invent new ones
• A design-parity check a reviewer can read in seconds instead of scrubbing pixels
• The failure modes that quietly degrade fidelity, and how to recover

What you need before connecting Figma MCP

Figma ships two flavors of the server. The local desktop server runs inside the Figma desktop app and reads your current selection; the remote server at https://mcp.figma.com/mcp runs in the cloud and works from a Figma link. For the local server you need:

• Figma desktop app (not the browser version)
• A Dev or Full seat on any paid Figma plan — the remote server works on all seats and plans, so reach for it if you do not have a Dev seat
• MCP enabled in Figma preferences — open Figma, go to Preferences, and enable “Dev Mode MCP Server”

When enabled, Figma runs a local MCP server at http://127.0.0.1:3845/mcp over streamable HTTP. The server is only active while Figma desktop is running. (Older guides reference /sse — that endpoint and the SSE transport are deprecated; use /mcp.)

Caution

The Figma MCP server stops when you close Figma desktop. If the AI reports “connection refused,” check that Figma is open and the MCP server toggle is still enabled in Preferences.

Setting up the Figma MCP server in each tool

The server itself is identical in all three tools — same URL, same five tools, same behaviour. Only the registration format differs: Cursor and Claude Code take the mcpServers JSON shape (Claude Code also has a CLI that writes it for you), while Codex takes TOML, where a streamable HTTP server is implied by the url key and there is no transport key.

Cursor

The fastest path in Cursor is the built-in MCP marketplace:

1. Open Settings > Tools & Integrations > MCP
2. Find Figma in the server list
3. Click “Add to Cursor”

Or configure manually in .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

A green indicator in the MCP panel confirms the connection.

Claude Code

claude mcp add --transport http figma-dev http://127.0.0.1:3845/mcp

Verify with claude mcp list. You should see figma-dev with a connected status. For team sharing, scope it to the project:

claude mcp add -s project --transport http figma-dev http://127.0.0.1:3845/mcp

Codex

Codex registers the server in ~/.codex/config.toml:

[mcp_servers.figma]
url = "http://127.0.0.1:3845/mcp"

Prefer the remote server when you do not have the desktop app open. It needs an OAuth token in an environment variable:

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
bearer_token_env_var = "FIGMA_OAUTH_TOKEN"

The five Figma MCP tools

Tool	What it does
get_design_context	Generates and inspects code plus design context from the current selection or a Figma link (formerly get_code)
get_metadata	Returns a sparse XML view of the selection: layer IDs, names, types, positions, and sizes — cheap context before a full pull
get_variable_defs	Extracts design tokens and variables (colors, spacing, typography)
get_code_connect_map	Shows how Figma components map to code components via Code Connect
get_screenshot	Captures an image of a design element for visual reference (formerly get_image)

Copy-paste prompt: generate a component from the current selection

“Look at my current Figma selection. Generate a React component using Tailwind CSS that matches the design exactly. Extract the spacing, colors, and typography from the design data — do not guess values. Name the component based on the frame name in Figma.”

Selection-based or link-based: two ways to work

Selection-based works when you have Figma open alongside your editor. Select an element in Figma, then prompt the AI; the server reads whatever is selected. This is the fastest workflow for active iteration, and it is the one the remote server cannot do.

Link-based works when you are implementing from a ticket or spec. Copy a Figma link (Cmd+L in Dev Mode), paste it into your prompt, and the AI extracts the node ID to fetch the design data. This works even when someone else created the design, and it works on Linux and anywhere else the desktop app is unavailable.

Copy-paste prompt: implement from a pasted Figma link

“Generate a responsive card component from this Figma design: [paste Figma link]. Use CSS Grid for the layout. Extract all design tokens into CSS custom properties. The component should support both light and dark themes based on the Figma variables.”

Step 1: sync design tokens before you generate anything

The single highest-leverage move is to extract Figma’s variables once, into a file your code imports, before you ask for any components. Then every later generation can be told “use the tokens” instead of guessing hex values.

get_variable_defs returns the design’s variable collections — colors, spacing, radii, typography — with their semantic names. Capture them into a typed source of truth.

Copy-paste prompt: the initial token sync

“Use the Figma MCP get_variable_defs tool to read every variable collection in this file. Generate src/styles/tokens.ts exporting a typed tokens object grouped by collection (color, space, radius, typography). Use the exact Figma variable names as keys (camelCased), keep the raw values, and add a JSDoc comment on each group noting its Figma collection name. Do not invent or round any values.”

That prompt is the one to use when the tokens will feed a pipeline. If you only want a drop-in theme object for a Tailwind or CSS-in-JS config and no build step, the variant below asks for the same data in a different shape — one file, grouped the same way, but as a theme config rather than a token source.

Copy-paste prompt: a one-off theme config instead of a pipeline

“Use Figma MCP to extract all design variables from the current file. Generate a TypeScript theme configuration file at src/lib/theme.ts with colors, spacing, typography, and border radius values. Group tokens by their Figma collection names. Include JSDoc comments noting the original Figma variable names.”

Either way, this is the difference between a demo and a workflow: the token file is reused by every subsequent prompt, so the AI never has to eyeball a color again.

Step 2: turn tokens into a pipeline with Style Dictionary

A single tokens.ts is fine for a small app. For anything shared across platforms (web, native, email) you want a transform step so one token source emits CSS custom properties, a JS/TS object, and whatever else you need. Style Dictionary is the standard tool for this, and the AI can wire it up from your exported tokens.

1. Export tokens in the Style Dictionary format. Ask the AI to convert the Figma variables into a tokens.json using the W3C design-tokens shape ({ "$value": ..., "$type": ... }) rather than an ad-hoc object.

2. Generate the config and build. Have the AI scaffold config.json with css/variables and javascript/es6 platforms, then run the build to emit :root custom properties and an importable module.

3. Point components at the generated CSS variables. From here on, generated components reference var(--color-primary) — which traces back to a Figma variable — so a design token change propagates with one rebuild.

Copy-paste prompt: the token pipeline

“Use get_variable_defs to read the Figma variables, then set up Style Dictionary in this repo. Write tokens/tokens.json in the W3C design-tokens format ($value/$type), a config.json with a css/variables platform building to src/styles/tokens.css and a javascript/es6 platform building to src/styles/tokens.js, and add an npm run tokens script. Install style-dictionary as a dev dependency and show me the generated tokens.css.”

Step 3: wire Code Connect so the AI reuses your components

Tokens stop one-off colors. Code Connect stops one-off components. It maps a Figma component to the real component in your codebase, so when the AI sees that component in a design, get_code_connect_map tells it to import yours instead of generating a fresh one.

The payoff: prompts can say “use our components where Code Connect mappings exist,” and the generated tree is composed from your battle-tested <Button /> and <Avatar /> rather than divs styled to look like them.

The setup is identical across all three tools; only where you launch the agent differs, which is why the prompts below differ only in the surrounding workflow.

Cursor

Keep Figma open with the frame selected, open the file you want the component in, and use Agent mode so it can read the Code Connect map and edit multiple files:

“Implement the selected Figma frame as a React component in src/components/ProfileCard.tsx. First call get_code_connect_map; for any node with a mapping, import and use that existing component instead of generating new markup. For everything else, use the CSS variables from src/styles/tokens.css. Do not introduce raw hex values or one-off pixel radii.”

Claude Code

Run from the repo root so it has filesystem context for both the tokens file and the component directory:

“Implement the selected Figma frame as src/components/ProfileCard.tsx. Call get_code_connect_map first and reuse any mapped components via their real import paths. Pull every color, spacing, and radius from src/styles/tokens.css — no literal hex or px values. After writing the file, run the type-check and fix any import errors you introduced.”

Codex

Codex can run this as a delegated task once the Figma MCP server is in ~/.codex/config.toml:

“Implement the selected Figma frame as src/components/ProfileCard.tsx. Use get_code_connect_map to find existing components and import those rather than re-creating them; use the CSS variables in src/styles/tokens.css for all design values. Open a PR with a screenshot of the rendered component alongside the Figma node link in the description.”

Note

Code Connect mappings live in your repo (typically *.figma.tsx files) and are published to Figma with the Code Connect CLI. If get_code_connect_map returns nothing, no mappings exist yet — generation will still work, it just will not reuse components.

Step 4: verify design parity instead of eyeballing it

The whole point of token and component reuse is that a reviewer should be able to confirm fidelity fast. Pair the Figma MCP server with a browser MCP server (such as @playwright/mcp) to render the result and diff it against the design.

Copy-paste prompt: a design-parity check

“Render ProfileCard in the browser at http://localhost:3000/storybook, take a screenshot with the Playwright MCP, then call get_screenshot for the same Figma node. Compare them and list every mismatch in spacing, color, font weight, and border radius, citing the token name the code should be using for each. Do not fix anything yet — just give me the diff.”

Reviewing the diff with token names attached is far faster than scrubbing pixels, and it tells you whether the mismatch is a code bug or a missing Figma variable.

Combining Figma MCP with other MCP servers

The real power emerges when several servers are live in the same conversation:

Figma + GitHub MCP: “Implement this Figma design as a React component, create a feature branch called ui/pricing-card, commit the component, and open a PR with the Figma link in the description.”

Figma + Playwright MCP: “Generate the component from this Figma selection, then open it in the browser at localhost:3000/storybook and take a screenshot. Compare the screenshot to the Figma design and flag any visual differences.”

Figma + Context7: “Look at this Figma design for a data table. Use Context7 to fetch the current TanStack Table documentation, then implement the table component using the recommended patterns from the docs with the exact styling from Figma.”

When Figma MCP and the design-to-code loop break

“Connection refused.” Figma desktop is not running, or the MCP server is disabled. Open Figma, go to Preferences, and confirm the Dev Mode MCP Server toggle is on.

“No tools available” in the MCP panel. Restart both Figma and your editor. The local HTTP connection can drop if Figma updates or if your machine sleeps.

get_design_context returns sprawling, unstyled markup. The selection is too large or too deep. Call get_metadata first to see the layer tree, then point the AI at a specific child frame instead of the whole page.

The AI emits wrong spacing or raw hex despite the tokens file. It is blending Figma data with its training defaults, especially Tailwind’s palette. Be explicit: “Use only var(--*) tokens from tokens.css and the values from the Figma design data. Any literal hex or px value is a bug — flag it instead of writing it.”

get_variable_defs returns almost nothing. The designer applied raw styles, not variables. Tokens only export when they are real Figma variables. Ask the designer to convert styles to variables, or fall back to get_screenshot plus manual values for that one component.

get_code_connect_map is empty. No Code Connect mappings are published yet. Generation proceeds without component reuse; set up Code Connect for your highest-traffic components first (buttons, inputs, cards) for the biggest fidelity win.

Figma MCP is unavailable on Linux. The desktop server requires the Figma app, which runs only on macOS and Windows. Use the remote server at https://mcp.figma.com/mcp with an OAuth token — it is link-based, so it works anywhere. The older Figma REST API MCP server is a second fallback; it needs a personal access token and, like the remote server, has no selection-based workflow.

Where to go next with Figma MCP

Mobbin MCP Reference 620,000+ screens from shipped apps before you build.

shadcn/ui MCP Generate components on top of an existing design-system primitive set.

Browser Automation MCP Render and screenshot components to diff them against the design.