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

curl -fsSL --create-dirs -o ~/.claude/skills/figma-dev-mode-mcp-design-to-code/SKILL.md https://claudeskil.com/skills/figma-dev-mode-mcp-design-to-code/SKILL.md

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.