io.github.GLips/Figma-Context-MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

npmVersion 0.13.2

Repository stars: 15,984

Set up

Claude Code

claude mcp add --transport stdio --env "FIGMA_API_KEY=<figma_api_key>" figma-context-mcp -- npx -y [email protected]

Codex, in ~/.codex/config.toml

[mcp_servers.figma-context-mcp]
command = "npx"
args = ["-y", "[email protected]"]

[mcp_servers.figma-context-mcp.env]
FIGMA_API_KEY = "<figma_api_key>"

Cursor, in .cursor/mcp.json

{
  "mcpServers": {
    "figma-context-mcp": {
      "args": [
        "-y",
        "[email protected]"
      ],
      "command": "npx",
      "env": {
        "FIGMA_API_KEY": "\u003cfigma_api_key\u003e"
      }
    }
  }
}

Claude Desktop, in claude_desktop_config.json

{
  "mcpServers": {
    "figma-context-mcp": {
      "args": [
        "-y",
        "[email protected]"
      ],
      "command": "npx",
      "env": {
        "FIGMA_API_KEY": "\u003cfigma_api_key\u003e"
      }
    }
  }
}

VS Code, in .vscode/mcp.json

{
  "servers": {
    "figma-context-mcp": {
      "args": [
        "-y",
        "[email protected]"
      ],
      "command": "npx",
      "env": {
        "FIGMA_API_KEY": "\u003cfigma_api_key\u003e"
      },
      "type": "stdio"
    }
  }
}

Runs on your computer: the client starts it with the command above.
Needs an API key or token from its provider.

Related servers

Data: the official MCP Registry and GitHub. NoviaHub is not affiliated with these servers' authors and runs none of them; check a server before you connect it.