Figma MCP Server: What It Does and How to Set It Up

The Figma MCP server is Figma’s own bridge between a design file and an AI coding agent. It hands the agent structured design context for a frame: layout, components, variables, a screenshot, and a code starting point that defaults to React and Tailwind. With Code Connect set up, it points the agent at your real components instead of inventing new ones. The remote server can also write back to the canvas, building frames, components and variables in a Figma file. There are two versions: the remote server at https://mcp.figma.com/mcp, which Figma recommends, and a desktop server that runs inside the Figma desktop app at http://127.0.0.1:3845/mcp. Both need a client from Figma’s MCP catalogue, such as Claude Code, Cursor or VS Code, and what you can do depends on your plan and seat.

Remote or desktop

Figma’s remote server installation guide↗ (opens in a new tab) calls the remote server the recommended option: it needs no desktop app, signs you in with Figma’s OAuth flow, and has the broadest set of features. The differences that matter in practice:

• Remote is link-based. You paste a link to a frame or layer and the agent extracts the node ID from it. The desktop server also works from whatever you have selected in the app.
• Writing to the canvas and capturing live UI into Figma are remote only.
• The desktop server is the one for Figma for Government, where the remote server is not available.
• Only clients listed in Figma’s MCP catalogue can connect to either. A client not on that list is refused, whatever you type into its config.

Seats and plans

Access depends on two things: the plan (Starter, Professional, Organization, Enterprise or Education) and your seat on it (View, Collab, Dev or Full). Figma’s rate limits and access page↗ (opens in a new tab) gives View and Collab seats a small monthly allowance of tool calls, and Dev and Full seats a daily allowance with a per-minute cap that rises with the plan. The limits count tools that read from Figma; a few, such as whoami, create_new_file and add_code_connect_map, are exempt.

Writing is narrower still. You need a Full seat to write to Figma files with an agent, plus edit permission on the file; a Dev seat covers read-only work such as design context, variables and screenshots. If a call fails with a permission error, run the whoami tool: it returns the email you signed in with and every plan and seat attached to it.

Setup in Claude Code

Figma’s preferred route is its plugin from Anthropic’s official marketplace, which bundles the server settings with skills for common workflows. The manual route is one command. Add --scope user so the server is there in every project rather than only the current one.

claude plugin install figma@claude-plugins-official

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

Start a new Claude Code session, type /mcp, choose figma, then Authenticate, and press Allow Access in the browser. Claude Code should report that it is connected to figma. More on the Claude Code side is on its integration page.

Setup in Cursor

Type /add-plugin figma in Cursor’s agent chat to install Figma’s plugin, which brings the server config, skills for implementing designs and Code Connect, and rules for handling assets. Or use the deep link on Figma’s page, click Install, then Connect next to Figma and allow access. By hand, the entry goes in ~/.cursor/mcp.json for every project or .cursor/mcp.json for one, as Cursor’s MCP documentation↗ (opens in a new tab) describes:

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

Setup in VS Code

Open the Command Palette and choose MCP: Open User Configuration to use Figma everywhere, or MCP: Open Workspace Folder MCP Configuration for the current workspace only. Paste the entry below, click Start above the server name, and allow access. Trust prompts and tool approvals in VS Code are covered in VS Code MCP security.

{
  "inputs": [],
  "servers": {
    "figma": { "url": "https://mcp.figma.com/mcp", "type": "http" }
  }
}

The desktop server instead

Open a Design file in the latest Figma desktop app, switch to Dev Mode with Shift+D, and in the MCP server section of the inspect panel click Enable desktop MCP server. Then point your client at the local address, for example claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp. If no tools appear, check the server is still enabled in the app.

The tools

Figma’s tools and prompts reference↗ (opens in a new tab) groups them by workflow. The ones you will meet first:

• Design to code. get_design_context is the default entry point: styling and structure for a layer, as React and Tailwind unless you ask for another framework. get_metadata returns a sparse XML outline for large frames, get_screenshot an image of the selection, get_variable_defs the colours, spacing and type variables in use, and download_assets exports images and icons.
• Code Connect and design systems. get_code_connect_map and add_code_connect_map read and write the mapping from a Figma component to the component in your code; search_design_system and get_libraries find existing components, variables and styles to reuse.
• Code to design. use_figma is the general-purpose write tool for Design, FigJam and Slides files; generate_figma_design turns live UI into layers; create_new_file makes a blank file in your drafts; generate_diagram draws a FigJam diagram from Mermaid or a description.
• Account. whoami returns who you are signed in as and your plans and seats.

Figma is clear about the division of labour. Its note on what the MCP sends and what the agent does↗ (opens in a new tab) says the server supplies structured context and a starting point; your assistant writes the final code, and it will not know your design system’s conventions unless Code Connect, variables or your prompt tell it.

Figma MCP vs the Figma REST API

The REST API at api.figma.com gives a program a JSON view of a file’s nodes, plus images, versions, comments, variables, webhooks and activity logs. The REST API authentication guide↗ (opens in a new tab) offers an OAuth app, a personal access token, or a plan access token for organisation-wide automation, each limited by scopes such as file_content:read.

• Use the MCP server when a person is working with an agent: implementing a frame, checking variables, pushing a component back to the canvas. It is shaped for a model, with context sized for a prompt and tools that match design-to-code steps.
• Use the REST API for scripts, CI and integrations: exporting assets on every build, syncing tokens, listening for comments with a webhook, or pulling activity logs. No agent is involved and no MCP client has to be in Figma’s catalogue.

The general version of this choice is in MCP vs API.

Prompts that get good output

• Always include the link. “Implement the frame at <link> in React” gives the remote server the node it needs.
• Name the framework and the folder. “Use components from src/components/ui and style with Tailwind” stops the agent inventing a second button.
• Break big screens up. Ask for get_metadata on a large frame first, then design context for one section at a time.
• Ask for variables, not raw values. “Use the colour and spacing variables from get_variable_defs, no hard-coded hex values.”
• Name the tool when it matters. Figma’s own tip for diagrams is to write “use the Figma MCP generate_diagram tool”.
• Write in small steps. For canvas work, “Using this file, add an empty state that matches the existing design system”, review it in Figma, then ask for the next change.

Limits to know

• Rate limits by seat and plan, as above. A View or Collab seat is enough to try it and not enough to work with it.
• Large frames produce large context. Figma advises against selecting heavy frames and suggests get_metadata for an outline first.
• Writing to the canvas has its own limits: Figma lists a 20kb response limit per call and no custom fonts yet, and components must be published before Code Connect completes.
• Only catalogue clients can connect, and the remote server needs a link: it cannot see what is selected in your Figma window.
• It reads what you can read. The server works with files your account can already view or edit, nothing more.

Design feedback as tasks

Once an agent can read the frame, it can compare it with what was built. “Compare the checkout page on localhost with the frame at <link>. For each difference, file a task with the frame link: bug if it is broken, enhancement if it is a polish item.” The review becomes a list someone can work through rather than a thread of screenshots. fenbs holds that list: the assistant connects to https://fenbs.ai/api/mcp with OAuth and the scopes you approve, files each difference as a bug or enhancement, and the board’s history shows which assistant filed it. See the MCP docs page.