Figma MCP Server

How to install the Figma MCP server

Add this to your Claude Desktop MCP configuration:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ]
    }
  }
}

Add this to your Claude Code MCP configuration:

npx -y figma-mcp

Add this to your Cursor MCP configuration:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ]
    }
  }
}

The Figma MCP server bridges design and code. Claude can read Figma files, walk the layer tree, extract design tokens, and translate frames into code. For design-to-development workflows, this collapses a lot of manual translation work.

Why use it

Most “implement this Figma design” workflows involve a developer eyeballing measurements, copying hex codes, and recreating layouts in code. The Figma MCP server lets Claude do that translation automatically. Paste a frame URL, get matching code.

For design-system work, pair with Filesystem so Claude can write the generated CSS or component files directly. Round-tripping designs becomes one prompt.

What it actually does

Read file contents, walk the layer tree, fetch component metadata, list pages, extract design tokens (colors, typography, spacing), pull comment threads. Most servers focus on read; write paths are rare.

Practical patterns:

“Read the design at this Figma URL and generate matching React components with Tailwind classes.”
“List every color token used in our design system file and check against our CSS variables.”
“Pull the comments on this frame and summarize what changes the team is requesting.”

Gotchas

Personal access tokens have broad access. Default to creating a separate token scoped only to the files you intend to use with Claude. Don’t reuse personal tokens across multiple integrations.

Large files can hit fetch limits. Walking a multi-page design system file can return thousands of nodes. Scope to specific frames or pages when possible.

For implementation work, pair with GitHub and Filesystem. Claude reads the design, writes the code, and opens a PR.

MCP servers related to Figma

All in Design & Media →

Figma MCP server: FAQs

Is the Figma server official?

Multiple servers exist. The most popular is the community Figma-Context-MCP which exposes file contents and structured frames. Figma also offers an official Dev Mode MCP server.

Can it write back to Figma?

Most servers are read-only. Some support comments and limited annotation. Direct mutation of designs is not common via MCP because Figma's plugin model is the canonical write path.

How does it help dev workflows?

Claude can read a Figma frame, extract spacing, colors, and typography, and generate matching code. Especially useful when designs use design tokens that map to your CSS variables.

What permissions does it need?

A Figma personal access token. Scope it to the files you want exposed. The server only accesses files the token has permission to read.

Does it support FigJam?

Some servers do, most focus on Figma design files. FigJam content (sticky notes, diagrams) is less structured and less useful for code generation.

Back to all MCP servers

Figma