Figma MCP Server
Connect AI agents to Figma to pull design context, generate code from frames, and write to the canvas.
Updated
What is Figma MCP?
The Figma MCP server is a Model Context Protocol server, built and hosted by Figma, that lets AI agents and coding tools read design context from your Figma files and generate code directly from selected frames.
It connects your MCP client to Figma's design data: agents can extract variables, components, and layout from a selection, turn a frame into framework-aware code (React + Tailwind by default), render screenshots, and even write back to the canvas. It pairs especially well with design-to-code workflows where the design system should be the source of truth.
The recommended setup is the official remote server at https://mcp.figma.com/mcp, which connects to Figma's hosted endpoint with no desktop app required. Authentication uses Figma's OAuth flow — you sign in through Figma in the browser and the agent acts with your account's access. A desktop (self-hosted) variant is also available for specific organization and enterprise needs.
Tools the Figma MCP server exposes
| Tool | What it does |
|---|---|
| get_design_context | Obtains structured design context (e.g. React + Tailwind) for a layer or selection to translate into code. |
| get_code_connect_map | Retrieves the mapping between Figma node IDs and their corresponding code components in your codebase. |
| get_variable_defs | Returns the variables and styles (color, spacing, typography) used in your Figma selection. |
| get_metadata | Returns a sparse XML representation of your selection with just basic properties. |
| get_screenshot | Takes a screenshot of your current Figma selection for visual reference. |
| search_design_system | Searches design libraries for components, variables, and styles matching a text query. |
| get_libraries | Returns libraries currently added to a file and libraries available to add. |
| download_assets | Downloads rendered exports and original source images from a Figma file. |
| use_figma | General-purpose tool for writing to and modifying Figma files. |
| whoami | Returns the identity of the user authenticated to Figma. |
Connect the Figma MCP server
Claude Code
- 1
Add the remote server
Run: claude mcp add --transport http figma https://mcp.figma.com/mcp (add --scope user to make it available across all projects).
- 2
Authenticate with Figma
On first use, Claude Code opens Figma's OAuth flow in your browser. Sign in and approve access.
- 3
Verify the connection
Check that the figma server is connected, then prompt the agent against a Figma selection or file link.
Cursor
- 1
Add the Figma MCP server
Use the in-app plugin command (/add-plugin figma) or add the remote server https://mcp.figma.com/mcp to your MCP configuration.
- 2
Authenticate with Figma
Cursor launches Figma's OAuth sign-in in the browser; approve access to link your account.
- 3
Use it
Confirm the figma server shows as connected, then reference a Figma frame or link in your prompt to generate code or pull design context.
Security & permissions
The remote server authenticates via Figma's OAuth flow: you sign in through Figma in the browser and the MCP client receives delegated access tied to your Figma account. The agent can therefore read and (with write tools) modify Figma content that your account can access — design context, variables, components, screenshots, asset downloads/uploads, and writing to the canvas. Grant the connection to trusted agents only, and be mindful that write-capable tools (e.g. use_figma, upload_assets, create_new_file) can change your files. Only clients listed in Figma's MCP Catalog can connect to the remote server.
Using Figma MCP with Gamut
In Gamut, you add Figma as a connected tool and Gamut manages the OAuth connection to the remote https://mcp.figma.com/mcp server. An event- or schedule-triggered Gamut agent can then call the Figma tools as part of an automated workflow — for example, on a webhook from your design or ticketing system, the agent pulls design context and variables from a referenced frame, generates code or a screenshot, and passes the result downstream (opening a PR, posting to chat, or updating a task). Gamut handles auth and tool invocation; what the agent can do is bounded by the Figma tools and the access your authenticated account has.
Frequently asked questions
What is the Figma MCP server?
It is an official Model Context Protocol server from Figma that lets AI agents and coding tools read your Figma designs — extracting design context, variables, and components, generating code from frames, taking screenshots, and writing to the canvas. The recommended remote endpoint is https://mcp.figma.com/mcp.
Is the Figma MCP server free?
It is free during the beta period. Figma has indicated it will eventually become a usage-based paid feature, and your access and rate limits depend on your Figma plan and seat — Starter/View/Collab seats get a small monthly cap on tool calls, while Dev/Full seats on paid plans get higher per-minute limits.
How do I connect the Figma MCP server to Claude Code or Cursor?
In Claude Code, run: claude mcp add --transport http figma https://mcp.figma.com/mcp, then complete Figma's OAuth sign-in. In Cursor, add the remote server https://mcp.figma.com/mcp (or use /add-plugin figma) and authenticate via the Figma OAuth flow in your browser.
Is the Figma MCP server hosted or self-hosted?
Both. Figma recommends the hosted remote server at https://mcp.figma.com/mcp, which needs no desktop app. A desktop (self-hosted) server is also available for specific organization and enterprise needs.