figmma

MCP server for the Figma API with a real-time observability dashboard.

Website · npm · GitHub

Install

macOS / Linux (checks for Node.js, installs if missing, registers with all agents):

curl -fsSL https://raw.githubusercontent.com/stuffbucket/figmma/main/install.sh | bash

Windows (PowerShell):

irm https://raw.githubusercontent.com/stuffbucket/figmma/main/install.ps1 | iex

Or via npm (requires Node.js >= 18):

npm install -g @stuffbucket/figmma

The postinstall script automatically registers figmma with Claude Code, VS Code / GitHub Copilot, and Codex CLI.

Related MCP server: Figma Edit MCP

Configure

Claude Code

Project-level (recommended — runs postinstall automatically):

npm install @stuffbucket/figmma

Or add manually to .mcp.json:

{
  "mcpServers": {
    "figmma": {
      "command": "npx",
      "args": ["-y", "@stuffbucket/figmma"]
    }
  }
}

User-level (available in all projects):

claude mcp add --transport stdio figmma --scope user -- npx -y @stuffbucket/figmma

VS Code / GitHub Copilot

Project-level — add to .vscode/mcp.json (created automatically by npm install):

{
  "servers": {
    "figmma": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@stuffbucket/figmma"]
    }
  }
}

User-level — add to VS Code settings (settings.json):

{
  "mcp": {
    "servers": {
      "figmma": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "@stuffbucket/figmma"]
      }
    }
  }
}

Codex CLI

Add to .codex/mcp.json (created automatically by npm install):

{
  "mcpServers": {
    "figmma": {
      "command": "npx",
      "args": ["-y", "@stuffbucket/figmma"]
    }
  }
}

Setup

On first run with no Figma API token configured, figmma opens a setup wizard in your browser where you enter your Figma Personal Access Token and team URL.

Configuration is stored at:

• macOS / Linux: ~/.config/figmma/config.json

• Windows: %APPDATA%\figmma\config.json

Environment variables FIGMA_API_TOKEN and FIGMA_TEAM_ID override the config file when set in your MCP client's env block.

Tools

Dashboard

figmma includes a real-time observability dashboard at http://localhost:5183 that shows:

• Live MCP tool calls and Figma API requests

• Connection state and auth status

• An interactive REPL to test tools from the browser

The dashboard starts automatically when the MCP server launches. Run it standalone with:

npx @stuffbucket/figmma-dashboard   # or: npm run dev (in the source repo)

Development

git clone https://github.com/stuffbucket/figmma.git
cd figmma
npm ci
npm run dev          # Dashboard with Vite HMR
npm run lint         # ESLint
npm run typecheck    # tsc --noEmit
npm run build        # tsc + vite build
npm test             # E2E smoke test
make pack            # Build + npm pack → figmma-1.0.0.tgz

Uninstall

npm uninstall -g @stuffbucket/figmma

This removes the MCP server entries from .mcp.json, .vscode/mcp.json, and .codex/mcp.json.

License

MIT — see LICENSE.

For a visual walkthrough with screenshots, visit the figmma website.