Figma Dev Mode MCP server — design-to-code contract

Contract

When turning a Figma selection into code through the Figma Dev Mode MCP server, use the server's REAL tool names, its documented call order, and its asset rules. Apply this to every Figma-driven change; never invent a tool name and never ship the generated output verbatim.

The tools (exact names — no synonyms)

| Purpose | Tool | Notes | |---|---|---| | Code representation of a selection | get_design_context | alias get_code; output is React + Tailwind by default | | High-level layer map | get_metadata | sparse XML: layer IDs, names, types, positions, sizes | | Design tokens of a selection | get_variable_defs | variables + styles (color, spacing, typography) | | Visual reference | get_screenshot | to see the design | | Bind a Figma instance to a code component | get_code_connect_map | Code Connect | | Export images / SVGs | download_assets | to deliver an asset | | Scaffold project rules | create_design_system_rules | params clientLanguages, clientFrameworks |

Rules

1. Fetch, don't guess the tool name. The code tool is get_design_context (documented alias

get_code). Never call an invented name like get_figma_code, fetch_design, figma_export, or get_node_code.

1. Large or truncated selection → get_metadata first. Get the layer map, then re-fetch only

the needed node(s) with get_design_context. Do not blindly retry the full fetch.

1. Tokens come from get_variable_defs — not from parsing the returned code, and not from an

invented get_variables / get_tokens / get_styles.

1. Reuse via Code Connect. To bind a Figma component to an existing code component, use

get_code_connect_map — not a generic "search the repo for a lookalike" step.

1. Two image tools, split by purpose. get_screenshot = the agent needs to SEE the design;

download_assets = the agent needs to DELIVER/export an image or SVG. Never collapse them into one generic "get image" step.

1. The generated code is a representation, not final style. get_design_context returns

React + Tailwind by default. Translate it into the project's actual framework and styling approach; never ship raw React/Tailwind when the stack differs.

1. Localhost asset sources are used directly. If the server returns a localhost source for an

image or SVG, use it as-is — do not re-download, re-host, or swap in a placeholder.

1. No new icon packages. All assets live in the Figma payload; never add or import an icon library.
2. Scaffold rules with the tool. To create project design-system rules, call

create_design_system_rules with clientLanguages and clientFrameworks and build on the returned template — don't write the template from memory.

1. Order + validation. Fetch structured context (get_design_context) and a visual reference

(get_screenshot) BEFORE writing code; validate the built UI against Figma for 1:1 look and behavior as the final step.

Worked examples (base default → conforming)

1. Implement a selected component

• Base: "I'll call get_figma_node for the design and render for the picture, then build it."
• Fix: fetch get_design_context for the code and get_screenshot for the visual, implement, then

verify the result matches Figma.

1. Selection too big

• Base: "The response got cut off — I'll rerun get_design_context on the whole frame."
• Fix: get_metadata for the layer map, then re-fetch just the target node with get_design_context.

1. Reading tokens

• Base: "I'll pull the colors and spacing out of the returned Tailwind classes."
• Fix: get_variable_defs returns the selection's variables and styles.

1. An icon in the design

• Base: "I'll npm install lucide-react and pick the closest icon."
• Fix: use the localhost SVG source the server returned directly; add no icon package.

1. Wrong stack

• Base: "It came back as React + Tailwind, so I'll drop it into the Vue app."
• Fix: treat React + Tailwind as a representation and translate it into Vue with the project's styling.

1. Setting up rules

• Base: "I'll write a rules file from what I remember about the project."
• Fix: call create_design_system_rules with clientLanguages + clientFrameworks, then fill the template.

Edge cases & exceptions

• Which rules file? The template is agent-agnostic; save it to the target agent's rules file

(Claude Code CLAUDE.md, Codex AGENTS.md, Cursor .cursor/rules/*.mdc). The tool calls above are identical regardless of destination.

• Screenshot and export the same node: allowed — get_screenshot to reason about layout,

download_assets to ship the exact asset.

• No localhost source returned: only then export via download_assets; still never add an icon package.
• Code Connect not configured: fall back to get_design_context, but prefer get_code_connect_map

whenever a mapping exists so existing components are reused.

Do / Don't

• DO call get_metadata before re-fetching a large selection. DON'T retry the full get_design_context fetch.
• DO use get_variable_defs for tokens. DON'T scrape tokens from the generated classes.
• DO use the localhost asset source directly. DON'T re-download or placeholder it.
• DO translate React + Tailwind into the project's stack. DON'T ship it verbatim.
• DO reuse components via get_code_connect_map. DON'T hand-grep for a lookalike.
• DON'T add or import a new icon package — ever.

Common mistakes (the base defaults this corrects)

• Inventing plausible-but-fake tool names (get_figma_design, fetch_node, export_image).
• One generic "get image" step instead of the screenshot-to-see / download-to-deliver split.
• Treating the React + Tailwind output as final code in a non-React project.
• Adding an icon library instead of using the Figma payload's assets.
• Writing a rules file freehand instead of calling create_design_system_rules.

Quick checklist

• ] get_metadata first for big/truncated selections
• ] get_design_context for code; get_variable_defs for tokens
• ] get_screenshot to see; download_assets to deliver
• ] get_code_connect_map to reuse existing components
• ] localhost asset source used directly; no new icon package
• ] React + Tailwind translated to the project's stack
• ] create_design_system_rules(clientLanguages, clientFrameworks) for rules
• ] validated against Figma 1:1 as the last step