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.
Sample use cases
A developer selects a component in Figma and asks the agent to generate code via get_design_context
It returns structured React + Tailwind code with the correct spacing, colors, and typography tokens from the design.
An agent uses search_design_system to find all button variants in the design library
It returns a list of every button component with its properties, states, and usage guidelines for a component audit.
An agent calls get_variable_defs on a selection to extract design tokens
It returns all color, spacing, and typography variables used — ready to sync with the codebase's CSS custom properties or Tailwind config.
A designer finishes a screen; an agent uses download_assets to export all icons and images
It downloads rendered exports at the correct resolutions and names them consistently for the dev handoff folder.
During code review, an agent takes a get_screenshot of the relevant Figma frame
It attaches the screenshot to the PR comment for a visual side-by-side comparison with the implementation.
An agent calls get_code_connect_map to check which Figma components are already mapped to code
It reports coverage — which components have code counterparts and which are missing, guiding the design-to-code effort.
An agent uses get_libraries to list all libraries added to a Figma file
It identifies which shared libraries are in use and which available ones haven't been added, ensuring design consistency.
An agent calls use_figma to batch-update text styles or layout properties across multiple frames
It applies design system changes across a file without the designer manually editing each instance.
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.
Can the Figma MCP server write to Figma files?
Yes. The use_figma tool is a general-purpose write tool that can modify Figma files — updating text, layout, properties, and more. Other tools are read-only.
Does it support design system search?
Yes. The search_design_system tool searches your design libraries for components, variables, and styles matching a text query — useful for auditing component usage and finding design patterns.
Can I extract design tokens and variables through the Figma MCP server?
Yes. The get_variable_defs tool returns all variables and styles (color, spacing, typography) used in a Figma selection, making it straightforward to sync design tokens with code.