Figma MCP

Official Figma remote MCP server — give Claude read access to your Figma files for design-to-code, brand-kit lookups, and Dev Mode context.

TRUSTED · Official by Figma

DevTools Productivity

// Add to your client

claude mcp add --transport http figma https://mcp.figma.com/mcp
# Then run `/mcp` and authenticate via the browser when prompted.
# For user-wide install: add `--scope user` before `--transport`.

// In Cursor agent chat, type:
//   /add-plugin figma
// Then sign in via the browser when prompted.

Paste into your client's MCP configuration file.

// Try it now

"Read the homepage frame from this Figma file: <paste-figma-url>. Tell me the primary color, body font, and headline font so I can match them."

! Auth is OAuth via the Figma site, not a personal access token — the workflow's `FIGMA_TOKEN` env var pattern does not apply to the official server
! The remote endpoint requires the client to be on Figma's MCP catalog — not every MCP client can connect
! There is no `npx -y @figma/mcp` package; do not paste that command from older guides — it does not exist
! Dev Mode features (full frame inspection, code suggestions) require a Dev Mode seat on the Figma file

Setup

Easy Setup

API key or simple config

Pricing

Free tier

MCP server itself is free. You need a Figma account; Dev Mode features and per-seat limits follow Figma's standard pricing.

Token usage

Moderate usage

// About

Plain English

If you already use Figma for design, this lets Claude read your Figma files directly. Ask things like 'make my landing page look like the homepage frame in this Figma file' and Claude can actually see what's there — colors, fonts, spacing — instead of guessing. It connects through Figma's hosted server, so there's nothing to install on your machine.

Figma's official MCP server is hosted at `https://mcp.figma.com/mcp` and connects via HTTP transport with OAuth authentication — no npm package, no local install. Once connected, Claude can read frames, components, variables, and design tokens from any Figma file you have access to.

Use it for design-to-code generation, pulling brand assets (colors, fonts, logos) into other tools, and grounding AI code generation in real design specs instead of guesses.

There is also a desktop server option (built into the Figma desktop app's Dev Mode) for organizations that need files to stay local.

// Works With

claude-code claude-desktop Cursor VS Code Windsurf

#figma#design#design-to-code#official#remote-mcp#oauth

// Also Consider

Pencil MCP Trusted

If you want a design canvas that lives inside your IDE instead of a separate Figma file

→

// Related Servers

Git MCP

Official Git MCP server — read repository history, diffs, blame, and status through AI without leaving your conversation.

devtools

View →

Puppeteer MCP

Official Puppeteer browser automation server — let AI control a real browser for scraping, screenshots, and UI testing.

web

View →

Featured

GitHub MCP

Official GitHub MCP server — manage repos, issues, PRs, and code search directly from your AI assistant.

devtools

15.0k View →