Figma Dev Mode MCP Server

🛡️ Official✓ VerifiedStreamable HTTPOAuth 2.14 tools·Online42ms·30d uptime: 100%·Last checked 18m ago

Figma's hosted MCP (mcp.figma.com/mcp) is the remote twin of the desktop Dev Mode MCP server — it streams design context, variables and component mappings to agents after OAuth.

https://mcp.figma.com/mcp

Provider: Figma ↗
Categories: 🎨 Design & UI/UX

中文简介

Figma 官方远程 MCP 服务器。AI 代理可获取设计上下文、变量定义、Code Connect 映射和截图。

Streamable HTTPhttps://mcp.figma.com/mcp

Install in Cursor →

Or add to ~/.cursor/mcp.json:

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

🔬 Test Live in Online Inspector 🔐 Audit OAuth 2.1 Config

🧰 Tools exposed by Figma Dev Mode MCP (4)

Tool	Safety	Description	Parameters
get_design_context	🟢 Read	Generate structured design context (layout, styles, components) for a Figma selection or link.	fileKey*: stringnodeId: string
get_variable_defs	🟢 Read	Get variable and style definitions used in a Figma file or selection.	fileKey*: stringnodeId: string
get_code_connect_map	🟢 Read	Get the Code Connect mapping between Figma components and code components.	fileKey*: stringnodeId: string
get_screenshot	🟢 Read	Render a screenshot of a Figma node for visual reference.	fileKey*: stringnodeId: string

🔐 OAuth 2.1 & Security

Auth type: OAuth 2.1
Dynamic Client Registration: ✅ Supported
PKCE S256: ✅ Supported
Scopes: file_read
Protected resource metadata: https://mcp.figma.com/.well-known/oauth-protected-resource (expected location)

🔐 Audit OAuth 2.1 Config →

🧩 Recommended Agent Skills

Figma-to-code skills ↗

📖 Guide

Figma Dev Mode MCP — Remote MCP Server

Figma's remote MCP brings the Dev Mode MCP toolset — design context extraction, variable definitions, Code Connect mappings and screenshots — to web-based agents that can't talk to the local desktop server. Access is scoped by Figma OAuth, so agents see the files and selections your account can see.

Endpoint & Transport

Endpoint URL: https://mcp.figma.com/mcp
Transport: Streamable HTTP

Authentication

Figma Dev Mode MCP uses OAuth 2.1 — the first request returns a 401 Unauthorized challenge with a WWW-Authenticate header pointing at the authorization metadata. Compliant clients (Cursor, Claude, VS Code, ChatGPT) handle the whole flow — PKCE and Dynamic Client Registration, so no manual client setup is needed — and simply open a browser consent screen.

Available Tools (4)

Tool	Safety	Description
`get_design_context`	read	Generate structured design context (layout, styles, components) for a Figma selection or link.
`get_variable_defs`	read	Get variable and style definitions used in a Figma file or selection.
`get_code_connect_map`	read	Get the Code Connect mapping between Figma components and code components.
`get_screenshot`	read	Render a screenshot of a Figma node for visual reference.

Connect in 30 Seconds

Claude Code — one command:

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

Cursor — add to ~/.cursor/mcp.json:

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

VS Code — add to .vscode/mcp.json:

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

Claude Desktop & stdio clients — bridge with mcp-remote:

{ "mcpServers": { "figma": { "command": "npx", "args": ["-y", "mcp-remote", "https://mcp.figma.com/mcp"] } } }

On first connect your client opens a browser OAuth consent screen — approve it and tools become available immediately.

Troubleshooting

401 Unauthorized on connect — that's expected; the server is OAuth-protected. Let your client complete the browser consent flow, or inspect the endpoint in our OAuth debugger to see the exact WWW-Authenticate challenge.
"Session expired" / stale Mcp-Session-Id — just re-send initialize; stateless clients can ignore session headers entirely.
Requires a Figma account; Dev Mode seat requirements follow Figma's plan rules.
If your agent runs locally, the desktop Dev Mode MCP server (http://127.0.0.1:3845/mcp) is an alternative without OAuth.

🚀 How to Connect

Copy the Figma Dev Mode MCP endpoint URL
The remote endpoint is https://mcp.figma.com/mcp.
Add it to your MCP client
Claude Code: claude mcp add --transport http figma https://mcp.figma.com/mcp. Cursor: add "figma": { "url": "https://mcp.figma.com/mcp" } under mcpServers in ~/.cursor/mcp.json. Other clients work similarly.
Complete the OAuth consent
On first connection your client opens a Figma consent screen in the browser. Approve it to grant access; the token is stored by the client and refreshed automatically.
Verify with the online inspector
Paste https://mcp.figma.com/mcp into remotemcp.net/inspector, run initialize and tools/list, and confirm Figma Dev Mode MCP's 4 tools respond.

❓ FAQ

What is the Figma Dev Mode MCP remote MCP endpoint?

The primary endpoint is https://mcp.figma.com/mcp. It is an official first-party server operated by Figma, speaking the Streamable HTTP transport.

How do I authenticate with Figma Dev Mode MCP?

Figma Dev Mode MCP uses OAuth 2.1. When your client first connects it receives a 401 challenge, discovers the authorization server via RFC 9728 metadata, and opens a browser consent screen. Dynamic Client Registration is supported, so compliant clients register themselves automatically.

I'm getting a 401 Unauthorized from Figma Dev Mode MCP — what's wrong?

A 401 means your client hasn't completed (or has lost) the OAuth authorization. Remove and re-add the server in your client to restart the consent flow, and check that your browser session can reach the provider's login page. If the 401 arrives without a WWW-Authenticate header, run it through our OAuth debugger to see what's missing.

Which MCP clients work with Figma Dev Mode MCP?

Any client that supports remote MCP servers: Cursor, Claude Code (`claude mcp add --transport http figma https://mcp.figma.com/mcp`), VS Code Copilot, ChatGPT connectors, Windsurf, and Claude Desktop via the `mcp-remote` bridge.

What tools does Figma Dev Mode MCP expose?

4 tools are cataloged in this directory — including `get_design_context`, `get_variable_defs`, `get_code_connect_map` and more. Use our online inspector to fetch the live tool list straight from the endpoint.

🔗 Connect Guides

Cursor

Connect Figma Dev Mode MCP →

Claude

Connect Figma Dev Mode MCP →

Claude Code

Connect Figma Dev Mode MCP →

VS Code

Connect Figma Dev Mode MCP →

ChatGPT

Connect Figma Dev Mode MCP →

Windsurf

Connect Figma Dev Mode MCP →

📛 Embed Status Badge in README

[![Remote MCP Status](https://remotemcp.net/api/badge/status/figma.svg)](https://remotemcp.net/servers/figma)

[![Test in Inspector](https://remotemcp.net/api/badge/inspect/figma.svg)](https://remotemcp.net/inspector?url=https%3A%2F%2Fmcp.figma.com%2Fmcp)