Figma MCP Claude Code Setup: Remote, Desktop or Framelink

The Short Answer

To connect Figma MCP to Claude Code, run claude mcp add --transport http figma https://mcp.figma.com/mcp, start a new Claude Code session, type /mcp, select figma, choose Authenticate and click Allow access in the browser. That is Figma's official remote server, and it is what Figma recommends for most people.

There are two other options: Figma's desktop server, which runs inside the Figma desktop app, and the community Framelink server, which uses a personal access token. This guide sets up each one, then helps you choose.

Three Ways to Connect Figma to Claude Code

The official server details come from Figma's developer docs. Framelink's come from its README and quickstart.

Option 1: Figma's Remote MCP Server (Recommended)

Install as a plugin

Figma's docs list the plugin as the recommended path, because it also installs Figma's agent skills:

claude plugin install figma@claude-plugins-official

Restart Claude Code if it was running, type /plugin, press the right arrow to open the Installed tab, select figma, press Enter, and press Enter again to sign in. Click Allow access in the browser. If the install command fails, your organization may have blocked plugins; use the manual command instead.

Or add the server manually

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

That adds it to the current project only (Claude Code's default local scope). For every project:

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

To share it with your team, use --scope project. That writes this to .mcp.json, with no secrets in it, because each teammate signs in with their own Figma account:

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

Sign in

1. Start a new Claude Code session.
2. Type /mcp and select figma.
3. Select Authenticate, then click Allow access in the browser.
4. You should see "Authentication successful. Connected to figma".
5. Type /mcp again to confirm.

Claude Code stores the token and refreshes it for you. If you want the protocol details, see MCP authentication and OAuth.

Note that Figma only allows clients listed in its MCP catalog to connect to the remote server. Claude Code is one of them.

Option 2: Figma's Desktop MCP Server

Use this when you want Claude to work from whatever you have selected in Figma, without copying links.

Requirements: the Figma desktop app, and a Dev or Full seat on a Professional, Education, Organization, Government or Enterprise plan.

1. Open the Figma desktop app and update it.
2. Open a Figma Design file.
3. With nothing selected, turn on Dev Mode with the toolbar toggle or Shift + D.
4. In the right sidebar, find the MCP server section and click Enable desktop MCP server. A confirmation appears at the bottom of the screen.

Then add it to Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Restart Claude Code and check /mcp. There is no separate sign-in: the desktop app is the auth. The desktop server cannot write to the canvas, and Figma itself recommends the remote server unless you specifically want selection-based work.

Option 3: Framelink (Community Server)

Framelink MCP for Figma predates Figma's official server and is still popular. It calls the Figma REST API with your token and simplifies the response down to layout and styling data before passing it to the model, which keeps context small. It exposes two tools: get_figma_data and download_figma_images.

Create a token

In Figma, click your profile icon, open Settings → Security, scroll to Personal access tokens and click Generate new token. Framelink's quickstart warns that tokens with default scopes will not work. Tick at least file_content:read, file_metadata:read, current_user:read and the other scopes it lists, then copy the token once.

Add it to Claude Code

The command from Framelink's docs:

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp \
  --figma-api-key=YOUR-KEY --stdio

To keep the token out of the command arguments, pass it as FIGMA_API_KEY instead, which the server also reads:

claude mcp add framelink --env FIGMA_API_KEY=YOUR-KEY -- npx -y figma-developer-mcp --stdio

For a shared .mcp.json, use Claude Code's environment variable expansion so each person supplies their own token:

{
  "mcpServers": {
    "framelink": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": { "FIGMA_API_KEY": "${FIGMA_API_KEY}" }
    }
  }
}

Never commit a real token. Node.js must be installed for npx to work.

Which One Should You Choose?

• Choose the remote server if you want the full feature set: design context, screenshots, variables, Code Connect, and writing back to Figma (new files, diagrams, sending live UI to the canvas). It works without the desktop app and is Figma's recommended option.
• Choose the desktop server if you live in the desktop app and want Claude to act on your current selection. You need a paid plan with a Dev or Full seat.
• Choose Framelink if your seat hits the official server's limits, you want a token-based setup that works in scripts, or you prefer a small, lean tool output. You give up canvas writes and Code Connect.

You can install more than one. Give them different names (figma, figma-desktop, framelink) and tell Claude which to use in the prompt.

Rate Limits on the Official Server

From Figma's rate limits page, for tools that read data:

Some write tools, such as create_new_file and generate_figma_design, are exempt. Figma says these limits can change at any time. Writing to the canvas needs a Full seat outside your drafts, and is free during the beta.

Verify and Try Your First Prompts

Run claude mcp list in your terminal or /mcp in a session. Every server you added should show as connected. Then copy a frame link in Figma (right-click → Copy link to selection) and try:

• "Implement this Figma frame as a React component with Tailwind: (paste link)."
• "What color and spacing variables are used in this Figma selection? Map them to our CSS variables."
• "Get a screenshot of this frame and compare it with the page at localhost:3000."
• "Export the icons in this frame as SVGs into public/icons."
• "Generate a FigJam diagram of our database schema from the models in this repo."

The official server works best when your codebase already has components to reuse. Its create_design_system_rules prompt generates a rules file so Claude writes code that matches your conventions.

Troubleshooting

To inspect exactly what each tool returns, connect the server to the MCP Inspector.

Next Steps

Figma MCP gets better when Claude can check its output. Add Playwright MCP so Claude can open the page it built and compare it with the design, and the GitHub MCP server to open the PR. Find more design and frontend servers in the MCP server directory, and see the full Claude Code MCP guide for managing everything you add.