What does the access token need?

A personal access token with read access is enough for most workflows. Create one at figma.com/settings → Personal access tokens. For enterprise file access, use an OAuth client so the MCP can scope to specific teams.

Does it return screenshots or just data?

Both. The default is structured node data (frames, styles, tokens) which is what code generation needs. There is also a screenshot tool that returns a PNG of a specific node — useful when the structure alone does not convey intent.

Can it extract design tokens / variables?

Yes. Figma Variables (colors, spacing, typography) come through as named tokens the agent can map to your project's token system — Tailwind config, CSS custom properties, whatever the target uses.

Does it support dev-mode annotations?

Yes. Measurement annotations and Dev Mode specs come through the MCP, which makes "implement this Figma node as React + Tailwind" dramatically more accurate than screenshot-only approaches.

Figma

Name: Top MCPs — curated MCP directory
Creator: Top MCPs
License: https://creativecommons.org/licenses/by/4.0/

Inspect Figma designs, components, and variables from an agent.

Score 85(?)Community (GLips — Figma-Context-MCP)MIT 15kVerified May 31, 2026Top MCPs for Documents & Content →

Install View on GitHub

Quick answer

What it does

Reads a Figma file or node tree and returns structured data: nodes, styles, components, variables, and optionally screenshots for visual grounding.

Best for

Design-to-code generation
Component implementation
Design-token extraction
UI-flow documentation

Not for

Canvas automation
Bulk file manipulation

Setup recipe

Pick your client, then follow the three steps.

Install

claude_desktop_config.jsonjson

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

Paste under mcpServers. Fully quit and reopen Claude after editing.

CLI or .mcp.jsonshell

# export FIGMA_API_KEY=figd_your_token
claude mcp add figma -- npx -y figma-developer-mcp --stdio

Run from your repo. Commit .mcp.json to share with your team.

.cursor/mcp.jsonjson

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

Global path: ~/.cursor/mcp.json. Reload window after editing.

.vscode/mcp.jsonjsonc

{
  "servers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "${FIGMA_API_KEY}"
      }
    }
  }
}

VS Code uses the "servers" key (not "mcpServers").

~/.codeium/windsurf/mcp_config.jsonjson

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

Open via Cascade → hammer icon → Configure.

cline_mcp_settings.jsonjson

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

Open via the Cline sidebar → MCP Servers → Edit.

~/.continue/config.jsonjson

{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "npx",
          "args": [
            "-y",
            "figma-developer-mcp",
            "--stdio"
          ],
          "env": {
            "FIGMA_API_KEY": "${FIGMA_API_KEY}"
          }
        }
      }
    ]
  }
}

Continue uses modelContextProtocolServers with a transport block.

~/.codex/config.tomlshell

# ~/.codex/config.toml
[mcp_servers.figma]
command = "npx"
args = [
  "-y",
  "figma-developer-mcp",
  "--stdio",
]
env = { FIGMA_API_KEY = "${FIGMA_API_KEY}" }

Codex uses TOML. Each server is a [mcp_servers.<name>] subtable.

~/.config/zed/settings.jsonjsonc

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp",
          "--stdio"
        ]
      },
      "env": {
        "FIGMA_API_KEY": "${FIGMA_API_KEY}"
      }
    }
  }
}

Zed calls them "context_servers". Settings live-reload on save.

ChatGPT → Apps directorynone

Figma is also available in the official ChatGPT Apps directory — no manual setup, no Developer mode required. Open the app from the directory and grant access on first use.

Open in ChatGPT directory

2
Set required secrets
Set FIGMA_API_KEY in your shell environment before launching your MCP client.
3
Try a minimum working prompt
Audit a design system for deprecated components
In my Figma file "Design System v3", list every component whose description starts with `[deprecated]` or whose name ends in `(old)`. For each, return: component name, Figma page, and node id so I can jump to it.
Tested with: Claude Desktop, Cursor.

Tools & permissions

Tools list pending verification. The server exposes tools over MCP; we haven’t yet parsed its capability manifest into this page. Check the GitHub repo for the authoritative list.

Security & scope

Access scope: Read-only
Sandbox: Read access to Figma files the authenticated user can see, via a personal access token (or OAuth for enterprise). No write capability.
Gotchas: Personal access tokens are not scoped to specific files — they grant read access to every file the user can open.
Very large Figma files (thousands of nodes) are returned in chunks; the agent has to paginate.

Agent prompt pack

— copy into Claude, Cursor, or ChatGPT.

Paste into Claude, Cursor, or ChatGPT. Edit the [brackets] before sending.

Recommend the best MCP servers for [task: e.g. documents & content work] in [client: Claude].

Constraints:
- Prefer tools that are [official | open-source | read-only] — pick what matters for my use case.
- Exclude MCPs that require [e.g. a paid plan, OAuth-only flows, remote-only transport].
- Return at most 3 picks, ranked.

For each pick include:
1. One-sentence rationale.
2. The ready-to-paste install snippet for my client.
3. Any required secrets I need to create before installing.

Cross-check the top-mcps.com listing: https://top-mcps.com/top-mcps-for-documents-content

Compare Figma against a real alternative. Swap the second MCP in [brackets] if you want a different match.

Compare Figma MCP vs [Context7 MCP] for the following job: [describe the job, e.g. "let an agent create GitHub issues on bug triage"].

Judge them on:
- Setup time and complexity (what a new user hits first).
- Auth model (none / API key / OAuth 2.1) and credential risk.
- Transport (stdio / Streamable HTTP / SSE) and where the server runs.
- Required secrets and the blast radius if they leak.
- Operational risk in an unattended agent loop.
- Which one is "good enough" for a weekend prototype vs. production.

End with one sentence: which should I pick for my scenario, which is: [my scenario].

References:
- https://top-mcps.com/mcp/figma
- top-mcps.com listing for Context7

Asks the agent to install and verify. Works inside Claude Code, Cursor Agent, Codex CLI.

Install the Figma MCP server for my [client: Claude] at the default config path for that client.

Use the exact install snippet published at https://top-mcps.com/mcp/figma (fetch https://top-mcps.com/mcp/figma.json for the canonical server.json if you can read URLs).

Before finishing:
1. Create the required secrets (FIGMA_API_KEY) and put them in the appropriate env block — do not hard-code them.
2. Restart or reload the client so it picks up the new server.
3. Verify the server is connected (green / running state) and at least one tool is listed.
4. If anything fails, read the client's MCP logs and report the exact error — do not silently retry.

Confirm when done and list the tools the server now exposes.

Frequently asked questions

What changed

— 2 updates tracked.

May 31, 2026
Refreshed install snippets and fact sheet; verified for 2026.
Mar 5, 2025
Initial directory listing.

Compared with Figma

Side-by-side breakdowns for the choices people most often weigh against this MCP.

FigmavsContext7 FigmavsNotion FigmavsObsidian FigmavsCanva

Exploring Top MCPs for Documents & Content? See all Documents & Content MCPs →