Figma MCP integration

Two MCP servers, one workflow. Figma MCP brings the design context your team is looking at. preset AI MCP brings the rules they have to follow.

When an AI assistant generates UI code from a Figma selection, it usually invents tokens: a hex color it pulled from the design, a spacing value it eyeballed, a class name that almost matches your scale. The fix is not a better model. The fix is for the assistant to see your design system alongside the Figma file, so it knows which canonical token a given Figma value should resolve to.

That is what the dual-server setup gives you.

The dual-server pattern

Two MCP servers, configured side by side in your AI tool.

• Figma MCP (Figma's official server) provides live design context. When you have a frame selected in the Figma desktop app, the server exposes its layers, variables, styles, and screenshot to whichever assistant is connected.
• preset AI MCP provides governed design-system intelligence. It knows your tokens, your canonical presets, your forbidden primitives, and your enforcement rules. When the agent passes in Figma-shaped data ("here are the variables I see in this selection"), preset AI answers in your system's vocabulary.

Each server stays in its lane. preset AI does not proxy Figma. Figma's server does not know about your design system. The agent calls both, and the model bridges them.

When to use MCP vs the sync page

The sync page is described in Figma integration.

Setup

The minimum is two MCP server entries in your AI tool's configuration: preset AI and Figma. The exact syntax differs by tool.

Claude Code

# preset AI MCP
claude mcp add --transport http preset https://mcp.presetai.dev/mcp

# Figma MCP (desktop server, requires Dev Mode in Figma)
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

For full preset AI auth options (OAuth, API keys) see Claude Code integration.

Cursor

In .cursor/mcp.json:

{
  "mcpServers": {
    "preset": {
      "type": "http",
      "url": "https://mcp.presetai.dev/mcp"
    },
    "figma-desktop": {
      "transport": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

For Cursor's rule file (.cursor/rules/preset.mdc) and tool scoping see Cursor integration.

Other tools

VS Code with Copilot, Windsurf, and OpenAI Codex all support MCP servers. See Codex integration for AGENTS.md setup, and the MCP overview for the broader picture.

What the agent can do

With both servers connected, the agent can run end-to-end workflows that would otherwise require two tools and a copy-paste step.

Generate code from a Figma selection. Ask: "Build this card from my Figma selection using our preset library." The agent pulls the selection from Figma MCP, asks preset AI for the closest matching preset, and emits code that uses your canonical tokens instead of the raw hex values it saw in Figma.

Map a Figma component to a preset. Ask: "What preset matches this Figma component?" The agent passes the component's name, description, and structure to preset AI, which returns ranked preset suggestions with reasoning. If you confirm, the agent records the mapping so future generations from that Figma component go straight to the right preset.

Detect drift from inside the editor. Ask: "Are any of the tokens in this Figma file out of sync with our design system?" The agent walks the variables from Figma MCP, compares against preset AI's current state, and reports differences. For file-wide drift audits with a review UI, use the sync page instead.

In all three flows, preset AI is the source of design-system intelligence. Figma MCP is the source of design context. The agent decides when to call which.

Code Connect

Figma's MCP server also exposes Code Connect tools: a way to register that a Figma component maps to a specific React component at a specific path in your codebase. Code Connect belongs to Figma, not preset AI, and the dual-server setup leaves it untouched.

If your team uses Code Connect today, the agent can call Code Connect for component-to-file mappings and call preset AI for token, rule, and preset coverage. The two complement each other.

Requirements

• Figma MCP plan limits. Figma rate-limits its MCP server by plan tier. Starter and view-only seats are capped at a small number of MCP calls per month. Dev and Full seats run on a per-minute rate limit and are recommended for any real workflow.
• Figma desktop app. The local Figma MCP server runs on http://127.0.0.1:3845/mcp and requires the Figma desktop app with Dev Mode active. A remote server is also available at https://mcp.figma.com/mcp if you cannot run the desktop app.
• preset AI plan. The preset AI MCP is available on every plan. Authentication is OAuth by default, or API key for shared-account setups.

Troubleshooting