Figma MCP Server Setup: Cursor, Claude Code & Codex Guide 2026

Difficulty: Intermediate · Last updated: May 23, 2026 · By Mantlr Editorial

A complete setup guide for the Figma MCP server — for designers and developers connecting their AI coding tools to Figma.

Quick Answer

To set up the Figma MCP server, add the remote URL https://mcp.figma.com/mcp to your MCP client's server settings. For Cursor, use the built-in Figma plugin; for Claude Code, run claude plugin install figma@claude-plugins-official in your terminal. The remote server works on all plans and all seat types. Setup takes 5–10 minutes. Verify by checking for a green status dot next to "figma" in your client's MCP settings.

Key takeaways

Six things to know before you set up the Figma MCP server:

1. Figma offers two MCP server versions — remote (cloud, easier) and desktop (local, more powerful)

2. The remote MCP server is hosted at mcp.figma.com/mcp and works on all seats and plans

3. The desktop MCP server runs at localhost:3845/mcp and requires a Dev or Full seat on a paid plan

4. Both versions integrate with Cursor, Claude Code, Codex CLI, VS Code, Windsurf, Gemini CLI, and Zed

5. Setup typically takes 5-10 minutes per client once you know the configuration

6. The MCP server can now write back to Figma's canvas via the /figma-use skill, not just read from it

On this page

What is the Figma MCP server?
Remote vs desktop MCP server — which one do you need?
Plan and seat requirements
How do you set up the Figma remote MCP server?
How do you set up the Figma desktop MCP server?
Setup walkthroughs for each client
How do you verify the MCP server is working?
Common setup mistakes
What can you do once the MCP server is connected?
Frequently asked questions
Related articles

The Figma MCP server is the bridge between your Figma file and the AI coding tools you use to build production code. Until 2025, the only way to give an AI tool design context was to feed it a screenshot and hope. That workflow lost everything Figma actually knows about your design — components, variables, tokens, layout structure, auto layout settings, design system mappings.

The Model Context Protocol (MCP) changed that. Figma's MCP server exposes structured design context to MCP-compatible clients (Cursor, Claude Code, Codex, VS Code with Copilot, Windsurf, and others). The AI tool reads your actual Figma file — not a screenshot — and generates code that maps to your real components, your real tokens, your real layout structure.

This guide walks through setup step-by-step. It covers the difference between the remote and desktop MCP servers, the plan and seat requirements, the configuration for each supported client, and the verification steps to confirm it's working. We've written this for designers and developers both — the technical depth is intentional, but the framing assumes you'd rather skip the setup theater and get to working code.

Quick wins

1. Most users want the remote MCP server (mcp.figma.com/mcp) — it works on all plans, no local setup, broadest features.

2. Use the Figma plugin for your client (claude plugin install figma@claude-plugins-official for Claude Code) when available — it bundles the MCP config plus useful Agent Skills.

3. If your code editor shows a green dot next to "figma" in MCP settings, the server is connected. No green dot = configuration problem.

What is the Figma MCP server?

The Figma MCP server is a service that exposes your Figma design files to AI coding tools through the Model Context Protocol — an open standard for AI agents to interact with external data sources. Once connected, your AI coding tool can read structured design information directly from Figma instead of working from screenshots or guesses.

The MCP server provides several tools that AI agents can call:

get_design_context — Pulls full design context for the selected layer, including structure, components, and styling
get_screenshot — Returns a rendered image of the selection
get_variable_defs — Reads design tokens and variables in code-ready syntax
get_code_connect_map — Maps Figma components to their corresponding code components (when Code Connect is set up)
use_figma — Writes back to the Figma canvas, creating or modifying design content from the AI client

The result is a workflow where an AI tool generating code knows what your buttons look like, what variables you've defined, which components are reusable, and which Figma layers map to which code components. This is fundamentally different from screenshot-based tools — it's structured data, not visual approximation.

Remote vs desktop MCP server — which one do you need?

Figma provides two versions of the MCP server. Most users want the remote version, but understanding the difference matters.

Remote MCP server (recommended for most users)

The remote MCP server is hosted by Figma at https://mcp.figma.com/mcp. You don't run anything locally — your MCP client connects directly to Figma's hosted endpoint. Features include both reading from Figma and writing to the canvas (the use_figma tool requires the remote server).

Use the remote server if: You want the simplest setup, the broadest feature set, the ability to write to the canvas from your AI client, or you're on a plan where the desktop server isn't supported.

Available on: All seats and all plans.

Desktop MCP server (specific use cases)

The desktop MCP server runs locally inside the Figma desktop app, exposed at http://127.0.0.1:3845/mcp. It requires the Figma desktop app to be open, with Dev Mode enabled, and the MCP server toggled on in preferences.

Use the desktop server if: Your organization restricts external MCP endpoints for security reasons, you need selection-based context (the desktop server uses your current canvas selection), or you have specific enterprise compliance requirements.

Available on: Dev or Full seats on paid plans (Professional, Organization, Enterprise).

Which should you pick?

For 90% of users, the remote server. It's simpler, more powerful, and works on every plan. Switch to the desktop server only if you have a specific reason to keep design context local.

Plan and seat requirements

A common source of MCP setup failures is plan eligibility. Verify yours before troubleshooting configuration.

Remote MCP server:

All plans (including Starter)
All seat types

Desktop MCP server:

Paid plans only (Professional, Organization, Enterprise)
Dev or Full seat required (Collab seats can't enable it)
Requires the Figma desktop app, not the browser version

Write to canvas (`/figma-use` skill):

Requires the remote MCP server
Available to Full and Dev seats on paid plans
Dev seats only get read-only access outside drafts

Code Connect mapping:

Available on all plans
Requires Code Connect configuration in your codebase (separate setup)

If you're on a Starter plan, the remote MCP server works — but design system features and team libraries are limited at that tier, so the AI tool has less to read.

How do you set up the Figma remote MCP server?

The remote server uses one configuration URL — https://mcp.figma.com/mcp — that you add to your MCP client. The exact steps vary by client, but the URL stays the same.

General setup pattern

Open your MCP client (Cursor, Claude Code, Codex, VS Code, etc.)
Find the MCP server configuration section in settings
Add a new MCP server with the URL https://mcp.figma.com/mcp
Save and restart the client if required
Authenticate when prompted (the first call to the server triggers Figma login)
Verify the server appears as connected (typically a green dot)

The general MCP configuration JSON looks like:

Specific client setups in the next section walk through the exact steps for each tool.

How do you set up the Figma desktop MCP server?

The desktop server requires the Figma desktop app and a few extra steps.

Step 1: Install or update the Figma desktop app

Download from figma.com/downloads. If you already have it, update to the latest version. The MCP server feature isn't available in old desktop versions.

Step 2: Open a Figma Design file

Open any Figma Design file in the desktop app. The MCP server settings are scoped to design files (not FigJam, Slides, or Sites).

Step 3: Switch to Dev Mode

With nothing selected on the canvas, click the toggle switch in the toolbar to enable Dev Mode. The right sidebar will change to show Dev Mode tools.

Step 4: Enable the MCP server

In the right Inspect panel, click "Enable MCP server" (or click the toggle, depending on your version). Figma will show a confirmation message at the bottom of the screen and a button to copy the server URL.

The desktop server URL is typically http://127.0.0.1:3845/mcp. The port may differ depending on your operating system and firewall settings — always copy the URL Figma displays.

Step 5: Configure your MCP client

Use the URL Figma gave you in your MCP client's configuration. The JSON pattern:

Restart your MCP client if required.

Setup walkthroughs for each client

The official Figma plugin for each client (when available) is the recommended path — it bundles the MCP server configuration plus prebuilt Agent Skills for common workflows. Manual configuration also works if you prefer.

Cursor

Recommended: install the Figma plugin in Cursor

Open Cursor's command palette: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
Search for "Open chat"
In the chat window, type /add-plugin figma and submit
Click "Add Plugin" to install
Authenticate with Figma when prompted

Manual configuration (if not using the plugin):

Open Cursor's command palette
Search for "Cursor settings"
Click the MCP tab
Click "Add Custom MCP"
Add the JSON configuration (remote or desktop URL)
Save and return to settings

You should see the Figma MCP tool appear in the tools list with a green status indicator if working.

Claude Code

Recommended: install the Figma plugin in Claude Code

Open your terminal
Run: claude plugin install figma@claude-plugins-official
Press Enter to start installation
Restart Claude Code if it was running
Type /plugin in Claude Code to open the Plugin marketplace
Use the right arrow to navigate to the "Installed" tab
Navigate to the figma server, press Enter
Press Enter again to authorize and complete setup

Manual configuration:

Add the MCP server to your Claude Code MCP configuration with the remote URL. The exact location of the config file depends on your Claude Code version; check Claude Code's MCP documentation for the current path.

Codex CLI

Open the Codex CLI configuration
Add the Figma MCP server using the remote URL
Authenticate with Figma when first calling the server
Verify the server is listed as available

VS Code with Copilot

Open VS Code settings (Cmd+, on Mac, Ctrl+, on Windows)
Search for "MCP"
Add the Figma MCP server URL to the Copilot MCP configuration
Restart VS Code
Authenticate when prompted

Windsurf

Windsurf supports MCP configuration through its settings panel. Add the Figma remote MCP server URL following Windsurf's standard MCP server addition workflow. Restart and authenticate.

Gemini CLI

Add the Figma MCP server to Gemini CLI's MCP configuration. The Gemini CLI follows standard MCP server conventions — refer to its documentation for the configuration file location.

Other MCP clients

Figma maintains a current list of supported MCP clients in its MCP catalog (linked from the Figma MCP documentation). The setup pattern is consistent: find your client's MCP server settings, add the Figma URL, save, restart, authenticate.

How do you verify the MCP server is working?

After setup, verify before assuming it works.

Verification step 1: Check the connection status

Most MCP clients show a status indicator next to each connected server. Green dot = connected. Red or absent = not connected. If your client doesn't show a status, run a list-servers command to confirm the Figma server is registered.

Verification step 2: Run a tool list query

In your MCP client, ask "What Figma MCP tools are available?" or run the equivalent list-tools command. You should see tools like get_design_context, get_screenshot, get_variable_defs, and get_code_connect_map returned.

Verification step 3: Pull design context

Open a Figma file with at least one frame, select the frame, and in your MCP client ask: "Get the design context for my current Figma selection." If the server is connected, you'll get back structured information about the selected layer — layer names, component references, styling.

Verification step 4: Try a write operation (remote server only)

Try a simple write-to-canvas command. Something like /figma-use create a basic button component using my design system tokens. If the agent reports success and you see the new component in your Figma file, the full read-write loop works.

If any of these verification steps fail, refer to common setup mistakes below.

Common setup mistakes

After helping designers and developers set up the MCP server, these five mistakes show up most:

Mistake 1: Using the desktop server URL without the desktop app open. The desktop MCP server only runs while the Figma desktop app is open with the MCP server enabled. If you close Figma, the local server stops. Use the remote server if you don't want this constraint.

Mistake 2: Not authenticating after configuration. Adding the MCP server to your client is step one. The first time you actually call the server, Figma will require authentication. Some users add the config, never trigger a call, and assume it's broken.

Mistake 3: Plan eligibility mismatch. The desktop server requires a Dev or Full seat on a paid plan. Trying to enable it on a Collab seat or a Starter plan silently fails. Check seat eligibility before assuming a configuration problem.

Mistake 4: Stale plugin or client version. MCP tooling is changing weekly. Old versions of Cursor, Claude Code, or VS Code may not support current Figma MCP features. Update before troubleshooting.

Mistake 5: Confusing the remote URL. The remote server is https://mcp.figma.com/mcp, not https://mcp.figma.com/sse. The earlier SSE endpoint pattern has been superseded. Always use the current URL from Figma's documentation.

521 free design resources. Zero email walls.

You've set up the MCP server. Now your AI tools can read your Figma files. Make the design system on the other side worth reading.

Mantlr lists 521 designer-vetted free resources across 43 categories — UI kits, icons, mockups, design system tooling — all license-verified.

Browse Mantlr →

What can you do once the MCP server is connected?

Setup is the work. The payoff is the workflows it unlocks.

1. Generate framework-accurate code from a Figma selection

Select a frame in Figma, switch to your AI coding tool, and ask it to "generate the code for my selected Figma frame." Because the AI tool reads structured context (not a screenshot), the output uses your actual component names, your design tokens, your layout structure — not generic Tailwind classes the AI guessed at.

2. Audit your codebase against your design system

Ask the AI tool to compare your current code against your design tokens. The MCP server exposes your tokens; the AI tool can identify code using hard-coded values that should be tokenized. This is especially useful in older codebases predating your token system.

3. Map Figma components to code components via Code Connect

Code Connect is a separate Figma feature that links Figma components to their code equivalents. Once configured, the MCP server uses Code Connect data, so code generation references your actual codebase components instead of inventing new ones. This is the closest you'll get to truly aligned design and code today.

4. Write back to Figma from your code editor

The use_figma tool (via the remote server) lets your AI client create or modify designs in Figma. Build a component in your code editor, then ask the AI to mirror it back to Figma as an editable design layer. Round-tripping between code and canvas without the manual hand-off step.

5. Use Agent Skills to encode team conventions

The Figma plugin for each client includes Agent Skills — markdown-based instructions that shape how the agent behaves. Common skills include /figma-use (write to canvas), accessibility audit skills, and component library builder skills. See our Figma skills guide for evaluation.

Frequently asked questions

What is the Figma MCP server?

The Figma MCP server exposes your Figma design files to AI coding tools through the Model Context Protocol. Once connected, your AI tool reads structured design context — components, variables, tokens, layout structure — directly from Figma instead of working from screenshots or guessing at values.

Which Figma MCP server should I use, remote or desktop?

The remote server (mcp.figma.com/mcp) for almost everyone. It works on all plans and seats, has the broadest features including the use_figma write-to-canvas tool, and requires no local setup. Use the desktop server only if your organization has specific enterprise security constraints that require keeping design context local.

Is the Figma MCP server free?

Currently yes, during the beta period — it's free on all plans including Starter. Figma has indicated it will eventually become a usage-based paid feature, but as of May 2026 it's free to use.

Does the Figma MCP server work with Claude Code?

Yes. Claude Code is officially supported. The recommended setup is the Figma plugin: run claude plugin install figma@claude-plugins-official in your terminal. This bundles the MCP configuration plus prebuilt Agent Skills.

Does the Figma MCP server work with Cursor?

Yes. Cursor supports the Figma MCP server through the official Cursor Figma plugin (recommended) or manual MCP configuration. Install the plugin via Cursor's command palette with /add-plugin figma.

What's the difference between the Figma agent and the Figma MCP server?

The Figma agent is built into Figma Design and is for design work on the canvas. The MCP server is the bridge between Figma and external AI coding tools — for code generation in your IDE. Different environments, different outputs, different users.

Do I need to know how to code to use the Figma MCP server?

The setup requires basic technical comfort — editing JSON config files, running terminal commands, troubleshooting connections. The workflows after setup are primarily for developers generating code from designs, though designers benefit from understanding the setup when bridging handoff conversations.

What is Code Connect and do I need it?

Code Connect links Figma components to their code equivalents. When set up, the MCP server uses those mappings so generated code references your real component library instead of inventing generic alternatives. It's optional but the single highest-leverage addition you can make once the MCP server is running.

Where can I find more Figma resources and AI workflow guides?

Mantlr curates 521+ free design resources across 43 categories — UI kits, fonts, icons, mockups, dashboards, mobile UI — license-verified, no email walls. Browse at mantlr.com.

Build with Mantlr's curated library

You've set up the MCP server. Now your AI tools can read your Figma files directly. The next step is making sure your design system is structured to make that context useful.

Mantlr lists 521 designer-vetted free design resources across 43 categories — every one license-verified, production-tested, free of email walls.

Browse Mantlr → · Get weekly editorial →

If you're working with the Figma AI ecosystem, these articles cover adjacent ground:

How to Use the Figma AI Agent — The native Figma agent, separate from MCP — for design work inside Figma rather than code generation outside it.
Figma Agent vs Figma Make vs Figma MCP — Decision framework for picking the right Figma AI tool for your use case.
How to Prepare Your Design System for AI Agents — The MCP server is only as useful as your design system is structured. This is the prep work.
How to Choose a Free Figma Skill — Skills run on top of the MCP server. A new resource category worth knowing about.

About Mantlr Editorial

Mantlr is a free directory of designer-vetted, license-verified design resources. We test every resource before listing. No email walls. No paid placements. No affiliate dressing.

This article was written by Mantlr Editorial, the team behind a curated library of 521 free design resources. We work in production design daily and only recommend resources we'd use ourselves.

Last updated: May 23, 2026. Article reviewed quarterly for accuracy.