# Design-to-Code with MCP > Feed real design tokens to an AI agent via MCP. Frontend architecture guidance from fearchitect, written by Abas Turabli and last reviewed 2026-06-24. Source: https://fearchitect.com/topics/design-to-code-mcp Use it as reference for the task at hand. Before changing code, check this guidance against the codebase: where the code already makes a different, deliberate choice, flag the conflict instead of rewriting it. Library APIs move faster than this guide, so confirm exact signatures in the official docs linked at the end. ## Summary MCP (Model Context Protocol) is an open standard, announced by Anthropic in November 2024, that lets an AI coding agent query external context over JSON-RPC 2.0. A Figma MCP server bridges the gap: it exposes selected frame data, design variables, and component metadata so the agent generates token-aware code instead of guessing pixel values. ## MCP in a design-to-code workflow MCP (Model Context Protocol) is an open standard for connecting AI applications to external tools and data sources over JSON-RPC 2.0. In a design-to-code workflow, a Figma MCP server acts as the bridge: when you select a frame in Figma and ask your AI coding agent to implement it, the agent calls the MCP server, which returns structured design context — layer hierarchy, spacing, typography, design variables (tokens), and component annotations — so the generated code references your actual token names instead of hard-coded pixel values. ## Diagram ```mermaid sequenceDiagram participant D as Designer (Figma) participant S as Figma MCP Server participant A as AI Coding Agent participant E as Editor / Codebase D->>S: Select frame — MCP server reads design context A->>S: tools/call — request selected frame data S-->>A: Layer tree, tokens, component annotations A->>E: Emit token-aware component code E->>A: Developer reviews and adjusts ``` Agent queries Figma MCP server for the selected frame, receives structured token data, emits code, developer reviews output. ## The workflow, step by step ### 1. Configure the MCP server Add the Figma MCP server to your AI client config (e.g. Claude Code's `mcpServers` block or Cursor's MCP settings). The server needs a Figma personal access token with file-read scope. It runs locally over stdio transport. ### 2. Select a frame in Figma Open the file in Figma and select the frame or component you want to implement. The MCP server picks up the active selection and makes it queryable. ### 3. Agent queries for design context Prompt the agent to implement the selected design. It calls the MCP server, which returns the layer tree, spacing values, typography, and resolved design variable names — not raw pixels. ### 4. Agent generates token-aware code With the token names in context, the agent emits markup and styles that reference your existing design system (e.g. `color-surface-primary`, `spacing-4`) rather than computed px values. ### 5. Review and adjust Inspect the output. MCP gives the agent better starting material, not a final answer. Check that tokens map correctly, that responsive logic is sound, and that interactive states are handled. ## What the MCP server actually provides - **Selected frame context** — layer tree with names, dimensions, auto-layout rules, and nesting. - **Design variables / tokens** — resolved variable names and values from the file's variable collections. - **Component annotations** — Code Connect metadata, if configured, linking design components to real framework components. - **No pixel scraping** — the server returns structured data; token names survive rather than collapsing to raw px values. ## Where MCP-driven design-to-code helps and hurts **Pros** - Emits token-aware code — references `spacing-4`, not a hard-coded `16px`. - Cuts design-code drift by reading the design system's real variable names. - Faster handoff than reading a spec or measuring a screenshot by eye. **Cons** - Requires a Figma MCP server and a file-read access token to set up. - Doesn't handle responsive breakpoints, motion, or accessibility roles. - Output is a first draft — still needs review before it ships. - Quality tracks the design file: unnamed layers and detached styles produce weak output. ## Watch out: Not pixel-perfect and not automatic MCP narrows the gap — the agent sees token names, not screenshots — but output still needs review. Responsive breakpoints, motion, empty states, and accessibility roles are outside what the design context provides. Treat the generated code as a strong first draft, not a shipped component. ## Key terms - **MCP (Model Context Protocol)**: Open standard by Anthropic (Nov 2024) for connecting AI agents to external tools and data over JSON-RPC 2.0. - **MCP server**: A process that exposes tools, resources, or prompts to an AI client via the MCP protocol. - **Design variables / tokens**: Named values (color, spacing, type) stored in Figma's variable collections, resolved by the MCP server. - **Code Connect**: Figma's feature that links design components to real framework components, surfaced via Dev Mode and MCP. - **stdio transport**: MCP transport using standard input/output; the default for local servers with no network overhead. ## Related topics - [AI Chat UIs & MCP Tools](https://fearchitect.com/topics/mcp-tool-uis.md): Render tool calls, stream results, and gate risky actions behind human consent. - [AI-Assisted Dev Workflow](https://fearchitect.com/topics/ai-assisted-dev-workflow.md): Using AI coding agents well without handing them ownership. - [Design Tokens & Theming](https://fearchitect.com/topics/design-tokens-theming.md): Named design decisions that flow from source to every platform. - [Design Systems](https://fearchitect.com/topics/design-system.md): A shared product — tokens, components, docs, and governance — at scale. - [Framework MCP Servers (Live Docs for AI Agents)](https://fearchitect.com/topics/framework-mcp-servers.md): Stop agents hallucinating APIs by feeding them the framework's current types. ## Further reading - [MCP Introduction — modelcontextprotocol.io](https://modelcontextprotocol.io/introduction) - [MCP Architecture — modelcontextprotocol.io](https://modelcontextprotocol.io/docs/learn/architecture) - [Anthropic — Introducing the Model Context Protocol](https://www.anthropic.com/news/model-context-protocol) - [Figma — Dev Mode overview](https://www.figma.com/blog/introducing-dev-mode/)