CookiesForAI

Figma MCP server

The Figma MCP server gives AI agents design context from Figma files, such as layout, variables and components, to generate code from frames, and can write native content back to the canvas.

By Figma Official · Updated

Connect Figma

Claude Code, plugin with MCP settings and skills (recommended by Figma)

Terminal
claude plugin install figma@claude-plugins-official

Claude Code, server only

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

Codex CLI

Terminal
codex mcp add figma --url https://mcp.figma.com/mcp

Cursor, plugin (type in agent chat)

Terminal
/add-plugin figma

Gemini CLI extension (then run /mcp auth figma inside gemini)

Terminal
gemini extensions install https://github.com/figma/mcp-server-guide

VS Code mcp.json

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

After adding the server, sign in to Figma when the client prompts you. Then copy a link to a frame or layer and ask the agent to implement it; the agent reads the node ID from the link.

What the Figma MCP server does

The Figma MCP server is Figma's own server for giving AI coding agents structured design data. Paste a link to a frame or layer and the agent can pull its layout, components and variables, then write code from it. get_design_context returns a React and Tailwind representation of the selection that the agent can translate into any framework, and get_variable_defs extracts the color, spacing and typography tokens used.

The Figma MCP server also works in the other direction. On the remote server, agents can create and modify native Figma content, such as frames, components, variables and auto layout, using your design system as the source. Code Connect links Figma components to components in your codebase so generated code reuses them instead of inventing new ones. Capturing a web page into a Figma design was still rolling out on 2026-10-01.

Figma hosts the server at mcp.figma.com/mcp, and a local desktop server runs inside the Figma app. The GitHub repo holds setup docs and skills, not server code, and had 2,041 stars on 2026-10-02; GitHub shows no license for it. Figma's developer docs state that only clients listed in its MCP catalog can connect.

Tools it gives your agent

  • get_design_context
  • get_variable_defs

When to use Figma

  • You want the agent to build a component from a specific Figma frame.
  • You want generated code to use your design tokens instead of hard-coded values.
  • You want the agent to reuse your existing React components through Code Connect.
  • You want the agent to draft screens or update components directly in a Figma file.

When to pick something else

  • Free or view-only users who need regular use: the Starter plan and View or Collab seats have low monthly tool-call limits.
  • Any MCP client you like: Figma only lets clients listed in its MCP catalog connect.
  • Pixel-perfect output without a tidy file: results depend on components, variables, auto layout and named layers in the design.

What Figma needs

  • A Figma account; a Dev or Full seat on a paid plan for regular use
  • GitHub Copilot enabled, if you use VS Code

What the Figma MCP server costs

No separate charge; your tool-call limit depends on your Figma plan and seat, the free Starter plan has a small monthly limit, and canvas writes are free during the beta but will become a paid feature.

Current prices: developers.figma.com . We do not list prices: vendors change them often, so check the publisher's own page.

Questions people ask

Is the Figma MCP server free?

It has no separate price, but the number of tool calls depends on your plan and seat: the Starter plan and View or Collab seats get only a few calls a month, and Dev or Full seats on paid plans get daily limits (Figma developer docs read 2026-10-02).

Can the Figma MCP server edit designs?

Yes, on the remote server. It can create and change frames, components, variables and auto layout. Figma says this write feature is free during the beta and will later become usage-based and paid.