Figma MCP Server

Pull frames, components and tokens into code.

Official — published by the vendor of the system it connects to.

Fetch a frame's layout, component structure and design tokens so the agent builds what was actually designed instead of approximating from a screenshot.

Install Figma MCP Server

Paste this into your MCP client config — Claude Desktop, Claude Code, Cursor, VS Code and Windsurf all read the same shape — then restart the client.

npx -y figma-developer-mcp --stdio

Config for each MCP client

The same server, in the shape each client expects. Copy the block for yours, restart it, and Figma MCP Server appears in your next session.

Claude Desktop

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

Full Claude Desktop setup guide

Claude Code

terminal
claude mcp add figma -- npx -y figma-developer-mcp --stdio

Full Claude Code setup guide

Cursor

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

Full Cursor setup guide

VS Code

.vscode/mcp.json
{
  "servers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ]
    }
  }
}

Full VS Code setup guide

Windsurf

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

Full Windsurf setup guide

Details

Repository
https://github.com/GLips/Figma-Context-MCP
Homepage
https://github.com/GLips/Figma-Context-MCP
Category
Design
Stars
7900
Installs per month
74000
Last checked

Frequently asked questions

How do I install Figma MCP Server?

Add it to your MCP client's config with the command `npx -y figma-developer-mcp --stdio`, or paste the ready-made JSON block above into Claude Desktop, Cursor, VS Code or Windsurf. Claude Code users can run `claude mcp add figma` instead. Restart the client and the tools appear in the next session.

Does Figma MCP Server need an API key?

No credential is recorded for this listing, which usually means it runs against something local or public rather than an authenticated API. Check the repository's README before assuming, and if you find otherwise, tell us and we will correct the listing.

Which clients work with Figma MCP Server?

Any MCP client. Claude Desktop, Claude Code, Cursor, VS Code with Copilot, Windsurf, Zed, Cline and Continue all speak the Model Context Protocol, so a server written once works in all of them — only the location of the config file differs.

Is Figma MCP Server free?

The server itself is free and open source, and you run it yourself. It is published by the vendor of the system it connects to, so that service's own pricing applies to whatever it reaches.

All Design MCP servers · The full MCP server list · Install guides