Model Context Protocol is an open standard for connecting AI coding agents to external data sources and tools. It defines how a host application , Claude Code, Cursor, Windsurf, Copilot , can communicate with a server that exposes resources, tools, and prompts in a structured way. The Figma MCP server sits between your AI coding agent and your Figma file. When the agent needs to know about a component, the server fetches structured information from Figma and provides it as context.

The clearest way to understand what MCP actually changes is to run the same component request twice , once with Code Connect published for the target component, once without. Request in both cases: "Generate a React component for the Primary Button, medium size, with the label 'Save changes', using the design system."

The Figma MCP server requires Dev Mode. If you are on a Starter plan, you will encounter an authorization wall before the MCP server is reachable. That is a plan decision, not a configuration problem. Before starting any MCP session, run figma-ping.js , introduced in Chapter 2 , against the file you intend to use:

The specific steps documented here are current as of writing. MCP is evolving rapidly. Verify the current setup process at the Figma help documentation before following them. The Figma MCP server can run locally , as a process on your machine , or remotely as a hosted service. For most design systems work involving proprietary design files, unreleased products, or sensitive brand specifications, the local server is the appropriate choice. The remote server introduces network transmission of design data; verify your organization's data governance policy before using it.

This is the most important section of the chapter. The MCP server gives the agent access to structured design information. The governance file defines what the agent is authorized to do with that information. Without a governance file, the agent's behavior during an MCP session is bounded only by its general training and your prompts. With one, it is bounded by an explicit, reviewable, version-controlled specification of agent authority , one the whole team can read, debate, and update. The governance file is not bureaucracy.

REFUSE without human instruction: Hardcoded color values (always use tokens) Hardcoded spacing values not in the defined scale Imports from libraries other than @acme/components New component variants not documented in the Figma file Any component from WIP or Explorations pages ESCALATE if: A component has no Code Connect mapping (flag, do not infer props) A token has conflicting values across modes (flag, do not resolve) The description field is empty and intent is ambiguous (flag, do not guess) A requested component does not exist in the published library

Governance version: 1.2 Review cycle: On every major design system release Figure 13.2 , Agent decision tree: component without Code Connect

node figma-audit.js --output json > .figma-context/audit.json node build-spec.mjs --output json > .figma-context/spec.json node extract-tokens.mjs --output json > .figma-context/tokens.json node figma-audit.js --mcp-check > .figma-context/mcp-check.md Before generating any code, read: .figma-context/mcp-check.md (session preflight and Code Connect coverage) .figma-context/spec.json (machine-readable component specifications) .figma-context/tokens.json (current token values) FIGMA.md (what you are authorized to do)

Large frame timeouts. Requesting context for a full-page layout, a dense dashboard, or a deeply nested modal can exceed the MCP server's response time threshold. The symptom is the agent reporting that the context request timed out or returned incomplete data. The remediation is to work at the component level, not the page level. If page-level context is necessary, use build-spec.mjs to generate a pre-processed specification rather than real-time MCP retrieval. Rate limit exhaustion. MCP sessions make API requests through your personal access token.

Not every team has Dev Mode access. Not every file is ready for live agent sessions. Not every project justifies the setup overhead. The work from Chapters 8 through 12 , token extraction, asset export, documentation sync, compliance monitoring, machine-readable specification , produces most of the value that MCP promises, on any plan, without requiring a live server connection. The agent can read tokens.json, spec.json, and audit.json from the filesystem as static context files. The governance file still applies. The human gate still applies.

MCP was introduced as an open standard by Anthropic in November 2024. Within months, Figma, GitHub, Slack, and dozens of other platforms had shipped server implementations. The pattern represented a shift from bespoke, proprietary AI integrations to a common protocol that any agent and any server could use to exchange structured context. The earliest Figma MCP integrations were simple: retrieve a frame, get style data, pass it to the agent.

MCP was introduced as an open standard by Anthropic in November 2024. Within months, Figma, GitHub, Slack, and dozens of other platforms had shipped server implementations. The pattern represented a shift from bespoke, proprietary AI integrations to a common protocol that any agent and any server could use to exchange structured context. The earliest Figma MCP integrations were simple: retrieve a frame, get style data, pass it to the agent.