Figma MCP Server Setup: A Practical Guide for Design Agencies

The Figma MCP server documentation is thorough. It is also written for developers. If your team is primarily designers with light technical exposure, the setup path is less clear than it should be. This guide is the version that works for design agencies.

Prerequisites before you touch anything

Four things need to be in place before setup begins. Missing any one of them sends you down a troubleshooting path that does not have a good ending.

Claude Code installed via npm: npm install -g @anthropic-ai/claude-code. This requires Node.js on the machine. Check that first.

Figma Desktop app, updated to the latest version. The web version of Figma does not support the MCP server. This trips up a lot of first attempts.

A Dev or Full seat on a paid Figma plan. The MCP server is not available on free or Starter accounts.

Claude Pro or Claude Max. Claude Code requires a paid Claude account.

Choosing between remote and desktop MCP

There are two ways to connect. The choice affects token usage, setup complexity, and which features are available.

The remote MCP server connects to Figma's hosted endpoint at https://mcp.figma.com/mcp. It is required for the Claude Code to Figma capture feature, where you push working interfaces from Claude Code into Figma frames. If that workflow is your goal, this is the connection you want. OAuth handles authentication through your browser. Setup takes about ten minutes once prerequisites are confirmed.

The desktop MCP server runs locally through the Figma Desktop app at http://127.0.0.1:3845/sse. It uses fewer tokens because it works from selected frames rather than full file context. For selection-based workflows, where a designer selects a frame in Figma and asks Claude Code to generate code from it, the desktop version is faster and cheaper. The limitation is that it does not support the code-to-canvas capture feature.

Most design agencies end up using both: the desktop server for day-to-day component generation and code review, the remote server for sprint prototypes that need to be pushed back to Figma for client review.

Installation walkthrough

Remote MCP server

Open Claude Code in terminal. Run /mcp to access MCP settings. Add the Figma remote server with the URL https://mcp.figma.com/mcp. Name it figma. Save and restart Claude Code. After restart, run /mcp again, select the Figma server, choose Authenticate, and complete the OAuth flow in your browser. You should see a confirmation that the connection is active.

Desktop MCP server

Open Figma Desktop and update to the latest version. Navigate to Preferences, then enable the local MCP server. Figma will confirm that the server is running at http://127.0.0.1:3845/sse. In Claude Code, add this URL as a new MCP server. Restart Claude Code. The desktop server appears in your MCP list automatically.

Common failure points

The server does not appear in Claude Code after setup: MCP connections initialize at startup. Restart Claude Code completely after adding any new server. Adding a server mid-session does not activate it.

Authentication fails with the remote server: Run the authentication flow again from /mcp in Claude Code. Select the Figma server and choose Authenticate. Complete the OAuth flow in the browser window that opens. If it still fails, check that the Figma account is logged in on the same browser.

Generated code does not match the design: The open-source community version of the MCP server has more limited tools than the official Figma server. If you are using an unofficial version, switch to the official one. Specify the exact frame or component you want Claude Code to reference rather than a general prompt.

Rolling it out to a remote team

We rolled out the Figma MCP workflow to our team over two weeks. The approach that worked: start with one component, get one person working confidently, document the specific setup for your exact toolchain, then extend to the rest of the team from that documentation.

The designer on the team adapts fastest to the Figma side of the workflow because nothing changes there. The change is in how code gets generated, not in how Figma works. The onboarding time for designers is primarily around understanding what to expect from Claude Code and how to prompt it effectively for component generation.

For a remote team, a shared Figma file with documented frame naming conventions helps Claude Code understand which frame to reference. Consistent naming matters. Frames named Dashboard / Main State give Claude Code better context than frames named Frame 42.

Setup is genuinely the hardest part of this workflow. Once it works, it changes how fast the team moves.