---
name: figma-dev-mode-mcp-design-to-code
description: "Figma Dev Mode MCP and Code Connect — pull design context, variables, and component maps to generate design-system code. Drives the Figma Dev Mode MCP server from a selected node or file URL: get_design_context for layout and styles, get_variable_defs to map design tokens to your theme, and get_code_connect_map plus add_code_connect_map to bind Figma components to real source components so generated code reuses your design system instead of one-off markup. Covers screenshot grounding, metadata-first traversal to control context size, and turning frames into accurate React/Tailwind output."
license: MIT
---

# Figma Dev Mode MCP

This skill drives Figma's Dev Mode MCP server and Code Connect from inside your coding agent, so design-to-code work starts from real layout data, real variables, and your actual component library — not a screenshot guess. It is built for frontend engineers and design-system maintainers who want generated code to reuse existing components and theme tokens rather than emit one-off CSS.

## When to use it

- You have a Figma node or file URL and want a component that matches the design's spacing, typography, and auto-layout.
- Your design uses Figma variables (colors, radii, spacing) and you need them mapped to your theme tokens instead of hardcoded hex.
- You maintain a design system and want generated markup to render `<Button>` from `src/components/Button.tsx` instead of a raw `<button>`.
- You're setting up or auditing Code Connect bindings between Figma components and source files.

## How it works

The skill talks to the Dev Mode MCP server (Figma desktop app, Dev/Full seat) against a selected canvas node or a pasted file/node URL. Core calls:

- `get_design_context` — structured layout, styles, and hierarchy for the node, the basis for generated code.
- `get_variable_defs` — resolves the design variables used by the selection so you can bind them to your theme.
- `get_code_connect_map` — returns existing Figma-component-to-source-component mappings so output reuses your code.
- `add_code_connect_map` — creates new bindings when a component isn't connected yet.
- `get_screenshot` / `get_metadata` — visual and structural reference for verification.

Code Connect itself is configured with `figma.config.json` and `*.figma.tsx` definition files committed to your repo; the MCP map calls let the agent read and extend those bindings live.

## Usage example

Then, with a node selected in Figma desktop (Dev Mode enabled):

```
> Generate a React component from my current Figma selection.
  Map variables to our theme and reuse mapped components.

# Agent flow:
# 1. get_design_context  -> layout + styles
# 2. get_variable_defs   -> { "color/bg/primary": "--brand-600", ... }
# 3. get_code_connect_map -> Figma "Button" => src/components/Button.tsx
# -> emits <Button variant="primary"> using theme tokens, not hex
```

## Tips & gotchas

- The server runs locally in Figma desktop; enable Dev Mode MCP under Preferences and confirm it's listening (default `http://127.0.0.1:3845`).
- Selection-based calls beat URL calls — select the exact frame, since a parent node returns far more context than you want.
- Commit `figma.config.json` and your `.figma.tsx` files; without published Code Connect, the map will be empty and output falls back to generic elements.
- `get_variable_defs` only returns variables actually referenced by the selection, so detached/local styles won't map.

## FAQ

**Do I need a paid Figma seat?** Yes — Dev Mode MCP requires a Dev or Full seat on a paid plan, and the desktop app must be running.

**Will it overwrite my components?** No. It reads design context and reuses your mapped source components; it generates code into your repo and never edits the Figma file.

**Web app or desktop?** The MCP server ships with Figma desktop. The browser app cannot host the local server.