How to connect a coding agent to the Figma MCP server

A coding agent can read structured design context from a Figma file and, on a supported remote client, write native content back to the canvas. Figma’s MCP server is that connection. The steps below follow Figma’s current remote and desktop docs.

Choose remote or desktop

Figma documents two ways to connect.

The remote server is the one Figma recommends. It connects to the hosted endpoint https://mcp.figma.com/mcp and does not need the Figma desktop app. The first time you connect, you sign in with your Figma account. Figma says this server offers the broadest set of features and is the best choice for most users.

The desktop server runs locally through the Figma desktop app. It is intended for specific organization and enterprise needs, and it requires a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan. Figma’s setup overview names that desktop path but does not include the local address or the in-app enablement steps. Use Figma’s desktop server installation instructions for that setup.

Figma for Government supports the desktop server only.

Check plan, seat, and client

The help guide lists Starter, Professional, Education, Organization, Government, and Enterprise plans, and it requires an MCP client from the Figma MCP catalog. Developer docs add a hard limit for the hosted server: only catalog clients, such as VS Code, Cursor, and Claude Code, can connect. A developer who wants to connect a new MCP client is directed to Figma’s waitlist.

Write to the canvas is remote only. Writing outside your drafts also requires a Full seat. Figma says that feature is free during the beta period and will eventually become a usage-based paid feature. Generating designs from live browser UI also requires the remote server and is supported by select clients. The figma-spec skill lets an agent read, create, and update team specs. Specs are in open beta, and writing to a spec requires the remote server plus edit access to the file.

Rate-limit numbers are not in these pages. Figma points to its plans, access, and permissions documentation for usage limits.

Install the remote server

Where a plugin exists, install it instead of adding the server by hand. The plugin includes the MCP settings and Figma’s skills. Skills do not replace the connection or add capabilities. They tell the agent which tools to call, and in what order, so write workflows are more reliable.

Claude Code

Install Claude Code first. In a terminal, run:

claude plugin install figma@claude-plugins-official

If Claude Code is already running, restart it. Type /plugin and press Enter. Press the right arrow to open the Installed tab, select the figma server, and press Enter to start signing in. A browser page opens. Click Allow access to let Claude Code access your Figma account. Go back to Claude Code, type /plugin again, and confirm the figma server shows as connected.

If that command fails, your organization may have blocked plugin installation, either for all plugins or for the Figma plugin. Contact your Claude administrator, or add the server manually. Manual setup does not install the skills:

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

That applies to the current project only. To make it available in all projects, run:

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

Start a new session, type /mcp, select figma, and choose Authenticate. Click Allow access. You should see Authentication successful. Connected to figma. Type /mcp again to confirm.

Codex

The recommended path is the Figma plugin in the Codex app. Install the Codex app if you have not already. In the upper-left corner, click Plugins, click + next to Figma, then click Install Figma. When prompted, click Allow access to let ChatGPT access your Figma account. Back in Codex, the plugin should show as connected.

If you use the Codex CLI instead, add the remote server from the terminal. This does not install the skills:

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

Cursor

The recommended path is the Figma plugin. Open the command palette (Mac: Cmd Shift P, Windows: Ctrl Shift P), search for Open chat, and submit:

/add-plugin figma

You can also install from the Figma plugin page in the Cursor Marketplace, then click Add Plugin. When installation finishes, open the command palette, search for Cursor Settings, and select Tools & MCP. Under Installed MCP Servers, click Connect next to Figma. When prompted, click Allow access.

That plugin includes the server settings, skills for implementing designs, connecting components with Code Connect, and creating design system rules, plus rules for assets from the MCP server.

Other clients

Figma’s remote installation page also has steps for Gemini CLI, VS Code, Xcode, and other clients. Use the section for the client you actually run. The command is not the same across editors, and a Figma plugin, when one is listed, is the setup Figma recommends.

Which clients can write to the canvas

In the help guide, write to canvas is marked remote only.

Clients marked for desktop support, remote support, and canvas write include Amp, Augment Code, Claude Code, Claude Desktop, Codex by OpenAI, Copilot CLI, Cursor, Factory, Firebender, Junie by JetBrains, Kiro, Mistral, OpenCode, Sarvam Agents, VS Code, and Warp.

ClickUp, Dia, Linear, Meta Muse, Notion, and Xcode are marked for remote canvas write without desktop support. Android Studio and Gemini CLI support both servers but are not marked for canvas write. Replit is remote only, with no write mark. Amazon Q and Openhands are desktop only in that table. For the latest list, use the Figma MCP catalog.

If you plan to write to the canvas, install Figma’s skills for your client. With those skills, an agent can build and update frames, components, variables, and auto layout in Figma Design, FigJam, and Figma Slides, using your design system as the source of truth. The MCP server and Figma Agent can access fonts uploaded to your account.

Prompt with a selection link

Design context is link-based. In Figma Design, right-click the frame or layer and select Copy link to selection. Paste the link into the MCP client and ask it to implement the design. The client will not open the link. It extracts the node ID the server needs.

Sending live UI to Figma requires the remote server and a supported client. Prompt the client with: "Start a local server for my app and capture the UI in a new Figma file." Follow the steps it gives you. It will open a browser window or give you a link. Use the capture toolbar for pages, elements, and states, then tell the client you are finished. It should give you a link to the new Figma file.

Once connected, you can also extract variables, components, and layout data, pull FigJam or Make context into the agent, and keep generated code consistent with your codebase through Code Connect.

What to do next

Confirm the client is in the Figma MCP catalog, install the remote plugin if one exists, and finish Allow access before the first prompt. If you are on Figma for Government, stay on the desktop server and check Figma’s government tool limits before you expect remote or write features. For example prompts and the full tool list, start from the tools and prompts section linked in the help guide. Report write-to-canvas or code-to-canvas issues through Fig, Figma’s support chatbot, or email support on paid plans.