Figma MCP

What it does

Pulls file structure, components, and design tokens out of Figma so generated code matches the design instead of approximating it. The value is in the tokens — color, spacing, typography — not in screenshots. Needs a Figma API key and a file that key can read.

Install

npx -y figma-developer-mcp --stdio

Client configuration

Paste this into your MCP client config (Claude Desktop, Cursor, or any client that reads mcpServers), then restart the client.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ]
    }
  }
}

When to use it

Reach for this when the task needs figma inside the agent loop. Skip it if a plain shell command or a one-off script is enough — every server you add costs context and adds a failure mode.

Other TypeScript servers

• Filesystem — Gives an agent scoped read, write, and search access to directories you explicitly allow
• Memory — A persistent knowledge graph stored in a local JSON file, exposed through entities, relations, and observations
• Sequential Thinking — Gives the model a scratchpad for structured, revisable reasoning: numbered thoughts that can branch, revise, and conclude