MCP Directory

Figma MCP Server (Official Remote)

Official

Official Figma server that brings design context, variables, and components into AI coding tools.

Verified
HTTP (remote)
OAuth
Hosted
View repo 120 Website

Add to your client

Copy the config for your MCP client and paste it into its config file.

Install / run
Add MCP server URL https://mcp.figma.com/mcp (HTTP) and sign in via Figma OAuth

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json

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

Claude Desktop connects to remote servers through the `mcp-remote` proxy (installed on first run via npx). Restart Claude Desktop after saving.

Before you start

  • An active Figma account. The remote server works on all seats/plans; the local desktop server needs a Dev or Full seat on a paid plan.
  • An MCP-compatible client (VS Code + Copilot, Cursor, Windsurf, Claude Code, Gemini CLI, etc.).
  • For the remote server: OAuth — you authorize in the browser on first connect; no token to copy.
  • For the local server: the Figma desktop app running, with the Dev Mode MCP server enabled in preferences.
  • Acceptance of the Figma Developer Terms; write-to-canvas usage may be metered/paid after beta.

About Figma MCP Server (Official Remote)

The official Figma MCP server (also called the Dev Mode MCP server) connects AI coding tools directly to your Figma files so they can read real design context instead of guessing from a screenshot. It pulls in variables, components, layout structure, and styles from a selected frame, and can also write back to the canvas — creating and editing frames, components, variables, and auto-layout from your editor.

Figma ships it in two flavors. A remote server at https://mcp.figma.com/mcp (Streamable HTTP + OAuth) works on all seats and plans and requires no local setup. A local/desktop server runs inside the Figma desktop app and is aimed at Dev/Full seats on paid plans. Both expose the same core capability set.

It is designed for design-to-code workflows: select a frame in Figma, then ask your agent to implement it, and the model gets the actual tokens, component names, and Code Connect mappings rather than approximate CSS. Code Connect integration lets generated output reference your real codebase components.

It supports a broad set of clients including VS Code/Copilot, Cursor, Windsurf, Claude Code, Claude Desktop, Gemini CLI, Codex, Xcode, and Android Studio.

Tools & capabilities (12)

get_design_context

Get the full design context (layout, components, styles) for the current selection or a layer.

get_metadata

Return a sparse XML map of layer IDs, names, types, positions, and sizes.

get_variable_defs

Return the variables and styles (design tokens) used in the selection.

get_screenshot

Capture a screenshot of the current selection for visual grounding.

get_code_connect_map

Retrieve mappings between Figma nodes and Code Connect code components.

add_code_connect_map

Map a Figma node ID to its corresponding code component in your codebase.

search_design_system

Search connected libraries for components, variables, and styles.

get_libraries

List subscribed and available design libraries for a file.

use_figma

General-purpose tool to create, edit, and inspect native Figma objects (write to canvas).

create_new_file

Create a blank Figma Design, FigJam, or Slides file in your drafts.

generate_diagram

Turn Mermaid syntax or natural language into an interactive FigJam diagram.

whoami

Return the authenticated user's identity, email, and plan.

When to use it

  • Use it when you want an agent to implement a selected Figma frame as code using the real design tokens and component names.
  • Use it when you need design variables/styles extracted as a token source for your design system.
  • Use it when you want generated UI to reference your actual codebase components via Code Connect.
  • Use it when you'd rather not paste screenshots and want the agent to read accurate layout and spacing.
  • Use it when you want to generate or modify Figma content (frames, FigJam diagrams) directly from your editor.
  • Use it when you want a zero-install remote MCP that works across many editors via OAuth.

Quick setup

  1. 1Pick remote (`https://mcp.figma.com/mcp`) or local (Figma desktop app → enable the Dev Mode MCP server).
  2. 2Add the server URL to your MCP client's config (HTTP transport for remote).
  3. 3Authorize via OAuth in the browser on first connect (remote), or confirm the local server is running.
  4. 4Restart or reconnect your client so it discovers the Figma tools.
  5. 5In Figma, select a frame or component you want context for.
  6. 6Verify by asking the agent to call get_metadata or get_design_context on your selection.

Security notes

OAuth grants the server access to your Figma account and files; review the requested scopes and only authorize on trusted clients. As a hosted service, file context is transmitted to Figma's servers.

Figma MCP Server (Official Remote) FAQ

What's the difference between the remote and local Figma MCP servers?

The remote server is hosted by Figma at https://mcp.figma.com/mcp, uses OAuth, and works on all seats/plans with no install. The local server runs inside the Figma desktop app and targets Dev/Full seats on paid plans.

Do I need a paid Figma plan?

The remote server works on all seats and plans (with lower rate limits on Starter/View/Collab seats). The local desktop server requires a Dev or Full seat on a paid plan.

How does authentication work — is there an API key?

The remote server uses OAuth: you authorize in the browser on first connect, so there's no token to copy. The local server authenticates through your signed-in Figma desktop app.

Which editors can use it?

Figma lists 15+ supported clients including VS Code/Copilot, Cursor, Windsurf, Claude Code, Claude Desktop, Gemini CLI, Codex, Xcode, and Android Studio.

Can it write changes back into Figma?

Yes. Tools like use_figma, create_new_file, and generate_diagram can create and modify native Figma content; write-to-canvas was free in beta and may become usage-based.

#figma#design#design-to-code#official#remote#oauth

Alternatives to Figma MCP Server (Official Remote)

Figma Context MCP (figma-developer-mcp)
Design & Media
15k

Popular community server that feeds Figma layout data to coding agents via a Figma API token.

Verified
stdio (local)
API key
TypeScript
2 tools
Updated 19 days agoRepo
MiniMax MCP Server (Official)
Design & Media
1.5k

Official MiniMax server for TTS, voice cloning, music, image, and video generation.

Verified
stdio (local)
API key
Python
8 tools
Updated 2 months agoRepo
ElevenLabs MCP Server (Official)
Design & Media
1.4k

Official ElevenLabs server for text-to-speech, voice cloning, sound effects, and audio.

Verified
stdio (local)
API key
Python
14 tools
Updated 5 months agoRepo

Compare Figma MCP Server (Official Remote) with:

vs Figma Context MCP (figma-developer-mcp)vs MiniMax MCP Server (Official)vs ElevenLabs MCP Server (Official)vs Replicate Flux MCP