How to Connect Figma Dev Mode Remote MCP to Claude Code
Add Figma's remote MCP server to Claude Code in about a minute.
Step-by-step
- Run the add command
claude mcp add --transport http figmahttps://mcp.figma.com/mcp``. - AuthorizeOn first use your client opens a Figma OAuth consent screen โ approve it and tools become available. Run
/mcpinside Claude Code to trigger the OAuth flow, orclaude mcp listto check status. - VerifyVerify in the browser: paste
https://mcp.figma.com/mcpinto remotemcp.net/inspector and run initialize + tools/list.
Troubleshooting OAuth / 401
- A
401 Unauthorizedon first connect is normal โ the endpoint is OAuth-protected; let Claude Code finish the browser consent flow. - If the consent window never opens, remove and re-add the server, then retry.
- Check the exact challenge at our OAuth debugger.
- Run the live endpoint through the online inspector to see the raw JSON-RPC exchange.
Or add to ~/.cursor/mcp.json:
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}claude mcp add --transport http figma https://mcp.figma.com/mcp
Or add to .vscode/mcp.json:
{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}- Open Settings โ Connectors (Integrations) โ Add Custom Connector.
- Paste the endpoint URL:
https://mcp.figma.com/mcp - Complete the browser OAuth 2.1 login flow when prompted.
Bridge the remote endpoint into stdio with mcp-remote in claude_desktop_config.json:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.figma.com/mcp"
]
}
}
}Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"figma": {
"serverUrl": "https://mcp.figma.com/mcp"
}
}
}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 |
Connect Figma Dev Mode MCP to another client
Other servers for Claude Code
GitHub's official remote MCP server hosted at api.githubcopilot.com. Gives AI agents first-party access to repositories, issues, pull requests and code search.
Notion's official hosted MCP server. Agents can search your workspace, read and create pages, and query databases over Streamable HTTP or SSE.
Linear's official remote MCP server. Agents can search, create and update issues and query your team's workflow over Streamable HTTP or SSE.
Stripe's official remote MCP server at mcp.stripe.com. Agents can query customers, payment intents and subscriptions and invoke Stripe API operations with OAuth.
Cloudflare's free, authless documentation MCP server. Agents can search the full Cloudflare docs corpus โ no account or token required.
Cognition Devin's free DeepWiki MCP. Ask questions and read AI-generated wiki documentation for any public GitHub repository โ no auth required.