If you found this by searching "figma mcp server not connecting" or "where is the MCP toggle in Figma," you're in the right place. Most first attempts at setting up the Figma MCP server fail for the same two reasons: missing prerequisites and skipping the authentication step after configuration. The toggle you're looking for might not even appear yet, and that has nothing to do with the tool you're using.
Setting up the figma mcp server correctly, whether remote or desktop, requires a specific sequence and a few non-obvious prerequisites that most setup guides skip entirely. That's why most first attempts fail.
The toggle won't appear until you read this
- Start with the remote MCP server - it works across all plans and skips the desktop app requirement.
- The most common blocker: Dev Mode is paywalled, and the remote mcp server authentication must be completed in the browser before anything connects.
- Free-tier Figma accounts cannot access dev mode mcp server features at all - this is the prerequisite most guides bury or skip.
What the Figma MCP Server Actually Does for Your Workflow
The Figma MCP server is an implementation of the model context protocol, an open standard that lets AI clients consume structured context from external tools. What it does practically: it brings figma directly into the developer workflow by giving MCP-capable ai coding tools structured access to your design files - not screenshots, not exports, but real component trees, design tokens, layout constraints, and variant data.
Without it, an AI coding assistant guesses from whatever you paste in. With it, the tool can see the actual design context and help llms achieve design-informed code generation that reflects your real design system. That's the gap. The difference between "generate a React component" and "implement this frame as a React component using the tokens and layout I can actually read right now" is the difference between code that needs three rounds of review and code that mostly works on the first pass. Don't Panic Labs documented this shift clearly: from guesswork to structured context is the actual change MCP makes to the design-to-code handoff.
What You Need Before You Can Connect the Figma MCP Server
Before you touch any config files, check all of these. Missing one will cost you 45 minutes of debugging something that isn't actually broken.
A qualifying paid Figma plan for desktop/Dev Mode features
Free-tier Figma users cannot access Dev Mode at all, which means the desktop MCP server option is simply unavailable. If you're on a free plan and want to connect figma to an AI tool, the remote server is your only path.
The Figma desktop app, installed and updated, for the local server path
The desktop MCP server runs from inside the Figma desktop application. If you're using the browser version only, the local server toggle doesn't exist for you. Download and update Figma desktop first.
An MCP-capable mcp client for the remote server path
Not every ai coding tool supports the model context protocol. The ones that do: claude code, cursor, vs code with GitHub Copilot enabled, and Codex. If your current coding tools aren't on that list, the server has nothing to connect to.
Figma account permissions to access the target figma file
The OAuth authentication step will fail silently if your account doesn't have at least view access to the file you're trying to reference. Check file permissions before debugging the connection.
GitHub Copilot enabled in VS Code before adding Figma MCP
This one catches people. The developer must have Copilot active - not just installed - before the Figma MCP server will work in VS Code. The connection appears to succeed, but tool calls return nothing.
How to Enable Dev Mode and the MCP Server in Figma
The sequence here matters more than most guides let on. The MCP server toggle in Figma does not live in the main settings menu. It appears only inside a file that is actively in dev mode - and only after you've switched that file into Dev Mode first. I see this pattern come up constantly: someone opens Figma preferences looking for an MCP section, finds nothing, concludes the feature isn't available on their plan, and opens a ticket. Usually the file just isn't in Dev Mode yet.
Here's the correct order:
Step 1: Open the target Figma file. Go to the file where your designs live, the one your developer will be working from.
Step 2: Switch to Dev Mode. In the toolbar at the top right, look for the toggle that switches between Design Mode and Dev Mode. Click it. The interface changes: you'll see code-facing panels, annotation tools, and developer-oriented metadata. If the toggle isn't there, your account or plan doesn't have Dev Mode access. This is the paywall. No workaround on the desktop path.
Step 3: Find the MCP server toggle. Now that you're in Dev Mode, look in the panel settings or the developer tools section. The figma mcp server provides a toggle specifically for enabling the MCP endpoint - it only becomes visible after Dev Mode is active on the file. Enable it.
The toggle existing in this location is not obvious. It doesn't appear in account settings, plugin menus, or anywhere that people expect to find server configuration. Figma placed it inside the Dev Mode file view because the MCP server is scoped to specific content in figma, not to your whole account. This is actually a reasonable design decision. It just doesn't match where people look for it the first time when coding tools need it.
Enabling the Desktop MCP Server and Copying the Local Server URL
Once the toggle is enabled in Dev Mode, the Figma desktop app generates a local server URL. It looks something like http://127.0.0.1:[port] with a specific port number assigned at runtime. You need to copy this URL and paste it into your code editor's MCP configuration.
This is the step that gets skipped. The desktop MCP server starts running, everything looks fine inside Figma, and then nothing connects in the IDE. The reason: your mcp server configuration in the ide still has no idea where to look. Copy the full local server URL from the Figma desktop app's Dev Mode panel, open your editor config, and paste it in as the server endpoint. Without that paste, you are connect to the figma mcp in concept only. The coding tool and Figma are running in separate universes.
Setting Up the Remote MCP Server: The Recommended Path
For most setups, start here. The remote server at https://mcp.figma.com/mcp is the path Figma recommends because it doesn't require the Figma desktop app, works from any MCP-capable client, and is available on more plan types than the desktop/Dev Mode route.
The general pattern for adding it: in your MCP-capable tool, you add a new mcp server entry pointing to https://mcp.figma.com/mcp. How you do that depends on the tool - Claude Code, Cursor, VS Code, and Codex each have slightly different interfaces for this, covered below. But the pattern is the same across all of them: add the URL, trigger authentication, complete it in the browser.
That last part is not optional. Adding the URL is not the same thing as connecting the server. Authentication is a separate required step that happens in a browser window after configuration. In Claude Code, for example, run /mcp after adding the server to confirm connection status. If you see the figma mcp server listed with no auth errors, you're connected. If you see it listed with a disconnected or pending status, the browser auth hasn't been completed yet.
For agentic tools like Claude Code, the ai agent uses Figma as a tool it can call during a session. Once connected and authenticated, it can see the figma mcp server in its available tools list and query design context directly. New mcp server entries appear in the tool panel immediately after a successful auth. Missing auth is the top failure mode here - and it's the one most setup guides treat as a checkbox rather than a required sequential step.
🤔 Wait.
Adding the server URL to your config does not mean the server is connected. Authentication must be completed in the browser in the same session - the figma's mcp server stays disconnected until OAuth is approved, regardless of how correctly the URL was entered. The config and the connection are two different things. Most first-attempt failures live in the gap between them.
Configuring Cursor, VS Code, and Codex to Use the Figma MCP Server
Each ai coding tool has a slightly different setup path. The authentication requirement is identical across all three - what changes is where you add the server and what the UI looks like. Treat "mcp client" as the framing: anything that speaks the model context protocol can connect, but each client on your codebase has its own setup ritual. AI-powered tools that don't support MCP natively won't connect regardless of what you configure.
Adding the Figma MCP Server in Cursor
In Cursor, the fastest path is the plugin method. Type /add-plugin figma in the command bar, or use the direct deep link from Figma's mcp tool documentation. Either method auto-configures the MCP server and registers the figma mcp catalog of agent skills so that ai agents to interact with Figma design context directly from the editor. You don't need to manually edit a config file for this path.
Important: authentication is still required after plugin install. The plugin configures the client side. The Figma side still needs OAuth approval. Don't assume the plugin install completed the connection. It didn't. Run a test query and watch for an auth prompt in the browser before calling it done.
Setting Up the Figma MCP Server in VS Code
The model context protocol is an open standard, and VS Code's implementation uses a JSON config file to register servers. Open the command palette and run MCP: Open User Configuration to access mcp.json. Add an entry for Figma with the HTTPS remote URL as the server address. Save the file, then click Start in the MCP panel. VS Code will prompt you to approve access in a browser window - approve it.
One non-obvious requirement: GitHub Copilot must be enabled before the Figma MCP server will function in VS Code. The standardized interface that context protocol is an open standard provides requires Copilot as the client layer. Without Copilot active, the server entry appears in the config but the coding tools never actually call it. This is one of those protocol is an open standard situations where "supported" and "working" are not the same thing without checking the prerequisites first.
Connecting Figma MCP in Codex
In Codex, use the Plugins UI or the CLI method: codex mcp add figma --url https://mcp.figma.com/mcp. This registers the server and expose Figma as a tool that agents can build queries against. Figma's tools appear in the chat interface only after authentication completes - the same browser OAuth step that every other client requires. If you type a design-related prompt immediately after running the add command and get nothing useful back, check auth first before assuming the command failed.
How to Scope Prompts Using Figma Node URLs for Better Code Generation
This is where most people who successfully connect the server still get mediocre output. The Figma MCP server can read your entire figma design files. That doesn't mean you should ask it to. Giving an AI tool a full file URL is like handing someone a 200-page document and asking them to "implement the thing." The generate code output reflects what the llm can actually parse - and a full file will either overwhelm the context window or return generic output that ignores the specific frame you care about.
The correct approach: right-click the specific frame, component, or layer you want to implement, select "Copy link to selection" (or grab the URL from the browser address bar with the node ID appended), and paste that specific Figma frame URL into your prompt. The node URL tells the MCP-connected tool exactly which slice of the figma component or layout to read. The resulting code generation reflects the actual layout constraints, design tokens, and component hierarchy for that specific node - not a statistical average of everything in the file.
To find the node ID: in Figma, click a frame or layer. The browser URL updates to include a node-id parameter. Copy the whole URL. That's your scoped reference. In the Figma desktop app, right-click any selected element and choose "Copy link to selection." Same result.
When you write code prompts with this: include the URL directly in the prompt text. The AI tool will call the MCP server with that specific node reference and write code based on what it actually sees.
📊 In practice:
A prompt like "Implement the design at [node-specific Figma URL] as a React component using our design system tokens" generates code that reflects actual spacing values, font tokens, and component structure. A prompt like "Generate a React component for a card" generates whatever the model thinks a card looks like. The only difference is the URL. The generate code that matches your design depends almost entirely on this one scoping decision.
That's the whole trick. Scope to the node, not the file.
How to Verify the Figma MCP Server Is Actually Working
A connected server and a working server are not the same thing. Here's what "working" actually looks like, so you're not guessing.
Check 1: The MCP client lists "figma" with no auth errors. In Claude Code, run /mcp. In VS Code, open the MCP panel. In Cursor, check the plugin status in the sidebar. The mcp server exposes a tool list to the client - if you see Figma tools listed without a disconnected or error status, the connection is live. If the listing shows an auth warning or gray status, return to the browser and complete OAuth before anything else.
Check 2: Run a test query with a node URL. Paste a specific Figma frame URL into a prompt and ask the AI agent to describe the layout. If it returns actual design context - spacing values, component names, token references, color syntax - the integration is reading real figma file data. If it returns a generic description or says it can't access the file, something in the auth or permissions chain is still broken.
Check 3: Code output reflects the actual design system. Generated code should reference actual components, real design tokens, and the layout structure from your figma design. If the output could have been generated without any Figma context at all, the MCP server isn't being called. This is the developer workflow to help llms achieve design-informed code test that matters most in practice: does the code output change when you scope the prompt to a different frame? If yes, MCP is working. If the output is identical regardless of which frame URL you pass, the tool isn't reading the context.
For desktop setups: Figma shows a "server enabled and running" confirmation in the Dev Mode panel. Look for it before testing from the editor side. If it says running but the editor can't connect, double-check that you copied and pasted the local server URL into the editor config, not the remote mcp.figma.com URL.
[GitHub's changelog on Figma MCP also notes that with VS Code and Copilot you can create and modify native figma content directly from the editor - sending rendered UI back as an editable frame. If that two-way loop is your goal, it's real now, and the same connection you've just set up supports it.]
One pattern worth knowing: if you're building more complex, multi-step design-to-code pipelines - the kind where code gets reviewed, pushed to a repo, and checked against the design system on a schedule - a tool like Latenode can sit around the MCP connection and orchestrate what happens after the code is generated. Latenode's AI Agent Builder can coordinate a "reader" agent that queries Figma context and a "writer" agent that outputs code, with a JavaScript node post-processing the output to enforce naming conventions before anything hits the codebase. Per-execution pricing means a 6-step workflow like that counts as one run, not six. Worth knowing if you're past the individual setup stage and into team-scale automation.
References
- Invisible Window - Vibe Coding Is Fine. Here's Why Experienced Operators Get More Leverage From a Hybrid AI Workflow - 24/03/2026
- McKinsey - Generative AI and the future of work in America - 26/06/2023
- McKinsey - The AI revolution in software development - 31/03/2026
- GitHub - Figma MCP server can now generate design layers from VS Code - 05/03/2026
- Dont Panic Labs - From Guesswork to Structured Context: How Figma MCP Changed My Dev Workflow - 17/11/2025
- Into Design Systems - Learn the Figma MCP Server: A new era for Design Systems and AI - 16/11/2025
- Design Systems Collective - The Hidden Cost of Figma MCP Roundtripping — And the Sustainable Model I Use Instead - 29/03/2026
