The MCP server itself is provided by Figma at no extra charge, but access requires a Figma account and the features available depend on your Figma plan and seat type (Dev Mode and write-to-canvas capabilities are gated by plan).

Does it support remote/OAuth?

Yes. The canonical deployment is the hosted remote endpoint at https://mcp.figma.com/mcp using Figma's OAuth flow. A Dev Mode desktop server is also available locally at http://127.0.0.1:3845/mcp for operating on the file open in the Figma desktop app.

Figma MCP server

OfficialFigmaConfig last verified Jun 1, 2026

Figma's official MCP server: turn designs into code context, read variables and components, and write to the canvas.

The Figma MCP server is Figma's official integration that bridges a coding agent and your design files. Instead of guessing at spacing, colors, and component structure from a screenshot, the agent pulls structured design context for the current selection (returned as React + Tailwind by default), reads the exact variables, styles, and Code Connect mappings, and can even capture screenshots to preserve layout fidelity. The result is design-to-code that reflects what is actually on the canvas rather than an approximation.

Beyond reading, the server can write back to Figma: create files, generate FigJam diagrams from Mermaid or natural language, send live UI from a running web app into Figma as design layers, upload assets, and create or edit objects directly. The canonical deployment is the hosted remote endpoint at https://mcp.figma.com/mcp, which uses Figma's OAuth flow so there are no long-lived tokens on disk. A Dev Mode desktop server is also available at http://127.0.0.1:3845/mcp for teams that prefer the local app and want to operate on the file currently open in the Figma desktop client.

Quick install

Copy-paste configs are provided for all 8 supported clients. Pick your client below.

Add to ~/.claude.json

~/.claude.json

json

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

Or via CLI

bash

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

Heads up

First tool call opens a browser to authorize.

Step-by-step guides

Available tools

Tool	Description
get_design_context	Obtains design context for a layer or selection; default output is React + Tailwind.
get_metadata	Returns a sparse XML representation of the selection with basic layer properties.
get_variable_defs	Returns the variables and styles (colors, spacing, typography) used in the selection.
get_screenshot	Captures a screenshot of the selection to preserve layout fidelity.
get_code_connect_map	Retrieves mappings between selected Figma node IDs and Code Connect components.
get_code_connect_suggestions	Detects and suggests mappings of Figma components to code components via Code Connect.
get_context_for_code_connect	Retrieves structured component metadata for generating Code Connect templates.
add_code_connect_map	Maps a Figma node ID to its corresponding code component in your codebase.
send_code_connect_mappings	Confirms Code Connect mappings after calling get_code_connect_suggestions.
search_design_system	Searches connected design libraries for matching components, variables, and styles.
get_libraries	Returns the subscribed and available design libraries for a Figma file.
get_figjam	Returns metadata for FigJam diagrams in XML format, including screenshots.
generate_diagram	Converts Mermaid syntax or natural language into an interactive FigJam diagram.
generate_figma_design	Sends live UI from a web app into a Figma file or your clipboard as design layers.
create_new_file	Creates a new blank Figma Design, FigJam, or Figma Slides file in your drafts.
upload_assets	Uploads PNG, JPG, GIF, and WebP files into a Figma file (max 10MB per asset).
use_figma	General-purpose tool for creating, editing, deleting, or inspecting Figma objects.
whoami	Returns the authenticated user's email, plans, and seat type information.

What you can do with it

One-shot design-to-code

Select a frame in Figma and have the agent fetch its design context, variables, and Code Connect mappings, then implement the component in your framework with the real tokens instead of eyeballed values.

Keep code and design in sync

Map Figma components to code with Code Connect so the agent reuses your actual components, and push live UI from a running app back into Figma to review changes against the source of truth.

FAQ

Is it free?: The MCP server itself is provided by Figma at no extra charge, but access requires a Figma account and the features available depend on your Figma plan and seat type (Dev Mode and write-to-canvas capabilities are gated by plan).
Does it support remote/OAuth?: Yes. The canonical deployment is the hosted remote endpoint at https://mcp.figma.com/mcp using Figma's OAuth flow. A Dev Mode desktop server is also available locally at http://127.0.0.1:3845/mcp for operating on the file open in the Figma desktop app.

← Browse all design servers