MCP server

Figma MCP server

Figma has an official MCP server: Design context, variables, components and screenshots from Figma frames for code generation. Below are all 2 servers with the setup for 13 clients: Claude Code, Claude Desktop, ChatGPT, Cursor, VS Code, Codex, Gemini CLI and more. Checked 2026-10-24 against each project's own repo, docs and the official MCP Registry.

Figma Dev Mode

Official · FigmaRemote

Design context, variables, components and screenshots from Figma frames for code generation.

https://mcp.figma.com/mcpFigma on DevHunt

Run in a terminal, then /mcp inside Claude Code to sign in. Add --scope project to share it via .mcp.json. docs

claude mcp add --transport http figma-dev-mode https://mcp.figma.com/mcp

Customize > Connectors > Add > Add custom connector, paste this URL and sign in. It syncs to Claude Desktop and mobile. docs

https://mcp.figma.com/mcp

The free plan allows one custom connector. On Team and Enterprise an owner adds it under Organization settings > Connectors.

chatgpt.com/plugins > + > Add custom MCP server, paste the URL, set up sign-in and create it as a plugin. Then @-mention it in a chat. docs

https://mcp.figma.com/mcp

Workspace admins can turn custom MCP plugins off.

Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project), or use the install button. docs

{
  "mcpServers": {
    "figma-dev-mode": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Add to Cursor

Add to .vscode/mcp.json (note the "servers" key and the type), or use the install button. Command Palette > "MCP: Open User Configuration" for all workspaces. docs

{
  "servers": {
    "figma-dev-mode": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Add to VS Code

Run codex mcp add figma-dev-mode --url https://mcp.figma.com/mcp (then codex mcp login figma-dev-mode), or add this to ~/.codex/config.toml. The CLI, IDE extension and Codex app share it. docs

[mcp_servers.figma-dev-mode]
url = "https://mcp.figma.com/mcp"

Run in a terminal (-s user adds it for all projects), then /mcp auth to sign in. In ~/.gemini/settings.json the key is httpUrl. docs

gemini mcp add -s user --transport http figma-dev-mode https://mcp.figma.com/mcp

Run in a terminal; it writes ~/.copilot/mcp-config.json. docs

copilot mcp add --transport http figma-dev-mode https://mcp.figma.com/mcp

Add to mcp_config.json: ~/.config/devin/mcp_config.json on macOS and Linux (older installs: ~/.codeium/windsurf/mcp_config.json), %APPDATA%\devin\ on Windows. docs

{
  "mcpServers": {
    "figma-dev-mode": {
      "serverUrl": "https://mcp.figma.com/mcp"
    }
  }
}

Add to Zed's settings.json (or Settings > AI > MCP Servers > Add Server). Remote servers without an Authorization header sign in with OAuth. docs

{
  "context_servers": {
    "figma-dev-mode": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Add to opencode.json in the project (or ~/.config/opencode/opencode.json). Sign in with opencode mcp auth figma-dev-mode. docs

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma-dev-mode": {
      "type": "remote",
      "url": "https://mcp.figma.com/mcp",
      "enabled": true
    }
  }
}

Add to ~/.kiro/settings/mcp.json (all projects) or .kiro/settings/mcp.json (this project). docs

{
  "mcpServers": {
    "figma-dev-mode": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

MCP Servers > Configure > Configure MCP Servers opens cline_mcp_settings.json; add this entry. docs

{
  "mcpServers": {
    "figma-dev-mode": {
      "type": "streamableHttp",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Framelink Figma

CommunityLocal (stdio)

Simplified Figma layout and style data for coding agents, using a Figma API token.

★ 16kpushed 2026-10-24MIT

Needs FIGMA_API_KEY (replace the ... with your value).

Run in a terminal. Everything after -- is the command that starts the server. docs

claude mcp add --transport stdio --env FIGMA_API_KEY=... framelink-figma -- npx -y figma-developer-mcp --stdio

Claude Desktop only: Settings > Developer > Edit Config opens claude_desktop_config.json. Add this, save and restart the app. docs

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

Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project), or use the install button. docs

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

Add to Cursor

Add to .vscode/mcp.json (note the "servers" key and the type), or use the install button. Command Palette > "MCP: Open User Configuration" for all workspaces. docs

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

Add to VS Code

Run codex mcp add --env FIGMA_API_KEY=... framelink-figma -- npx -y figma-developer-mcp --stdio, or add this to ~/.codex/config.toml. docs

[mcp_servers.framelink-figma]
command = "npx"
args = ["-y", "figma-developer-mcp", "--stdio"]

[mcp_servers.framelink-figma.env]
FIGMA_API_KEY = "..."

Run in a terminal (-s user adds it for all projects; the default is this project). docs

gemini mcp add -s user -e FIGMA_API_KEY=... framelink-figma npx -- -y figma-developer-mcp --stdio

Run in a terminal; it writes ~/.copilot/mcp-config.json. docs

copilot mcp add --env FIGMA_API_KEY=... framelink-figma -- npx -y figma-developer-mcp --stdio

Add to mcp_config.json: ~/.config/devin/mcp_config.json on macOS and Linux (older installs: ~/.codeium/windsurf/mcp_config.json), %APPDATA%\devin\ on Windows. docs

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

Add to Zed's settings.json (or Settings > AI > MCP Servers > Add Server). Remote servers without an Authorization header sign in with OAuth. docs

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

Add to opencode.json in the project (or ~/.config/opencode/opencode.json). docs

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "framelink-figma": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "enabled": true,
      "environment": {
        "FIGMA_API_KEY": "..."
      }
    }
  }
}

Add to ~/.kiro/settings/mcp.json (all projects) or .kiro/settings/mcp.json (this project). docs

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

MCP Servers > Configure > Configure MCP Servers opens cline_mcp_settings.json; add this entry. docs

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

Agent skills for Figma

The MCP server gives the agent Figma's tools; a skill teaches it how to use Figma well. Install with the skills CLI or see each skill's page for Claude Code, Codex, Copilot and Cursor.

Figma Code ConnectFigma
Creates Code Connect files that map Figma components to their real code snippets.
npx skills add figma/mcp-server-guide --skill figma-code-connect
Figma Design to CodeFigma
Turns a Figma frame into code using the Figma MCP server's design context.
npx skills add figma/mcp-server-guide --skill figma-design-to-code
Figma Generate DesignFigma
Recreates an app page or layout from code as a design inside Figma.
npx skills add figma/mcp-server-guide --skill figma-generate-design
Figma UseFigma
Required primer for the Figma MCP write tool so edits to Figma files work reliably.
npx skills add figma/mcp-server-guide --skill figma-use

Which one to pick

Start with Figma Dev Mode: it's maintained by Figma and follows its API.
A remote server (Figma Dev Mode) needs no install and signs you in with OAuth. It's also the only kind ChatGPT and claude.ai can use.
A local server (Framelink Figma) runs on your machine with an API key or token, and works offline from the vendor's hosting.

FAQ

Is there an official Figma MCP server?+

Yes: Figma Dev Mode, maintained by Figma. There is also 1 community server: Framelink Figma.

How do I connect Figma to Claude?+

In Claude Code run: claude mcp add --transport http figma-dev-mode https://mcp.figma.com/mcp, then /mcp to sign in. In Claude Desktop or claude.ai, go to Customize > Connectors > Add > Add custom connector and paste https://mcp.figma.com/mcp.

How do I use the Figma MCP server in Cursor or VS Code?+

Open the Cursor or VS Code tab on the server above: it has the exact mcp.json entry and a one-click install link. The same server also works in Claude Code, Claude Desktop / claude.ai, ChatGPT, Cursor, VS Code and Codex.

Can I use the Figma MCP server in ChatGPT?+

ChatGPT connects to remote MCP servers only. Figma Dev Mode has a hosted URL: at chatgpt.com/plugins choose + > Add custom MCP server, paste the URL and create it as a plugin.

Is it safe to give an AI agent access to Figma?+

Start with the official server, a read-only or test account and approval prompts on for anything that writes. Content the agent reads from Figma (tickets, messages, pages) can carry prompt-injection instructions, so don't auto-approve actions.

All design & frontend MCP servers · Agent skills · How MCP setup works in each client

MCP servers for similar apps: 21st.dev · AntV · Blender · Canva · draw.io · Excalidraw · Godot · Miro · Penpot · shadcn/ui · Storybook · tldraw · Unity · Webflow · Wix

Categories

Figma MCP server

Figma Dev Mode

Framelink Figma

Agent skills for Figma

Which one to pick

FAQ