How to add Figma MCP to Cursor and VS Code

I have been hearing about MCP (Model Context Protocol) for a while now but didn't really look into it until Figma shipped their official MCP server. The idea is simple - your AI coding assistant can talk directly to Figma, read your designs, and help you turn them into code. No more switching between Figma and your editor, copying hex codes, eyeballing spacing, any of that.

I set this up last week and honestly wish I'd done it sooner. Here's exactly how to get it working.

Two options: remote or desktop

Figma gives you two ways to connect:

Remote server - hosted by Figma at https://mcp.figma.com/mcp. Nothing to install, works on all seats and plans. You authenticate through your browser and you're done.

Desktop server - runs locally through the Figma desktop app at http://127.0.0.1:3845/mcp. You need a Dev or Full seat on a paid plan for this one.

I use the remote server. It's easier to set up and I don't have to worry about keeping the desktop app open.

Setting up the remote server

Cursor

The fastest way is to type this in the agent chat:

/add-plugin figma

Hit Install, then Connect next to Figma, click Open in the dialog, and Allow access. Done.

If you prefer doing it manually, go to Settings > Cursor Settings > MCP tab, click + Add new global MCP server, and paste:

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

VS Code

Hit Cmd + Shift + P (or Ctrl + Shift + P on Windows)
Search for "MCP: Open User Configuration" (or "Workspace Folder MCP Configuration" if you only want it for one project)
Paste this:

{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Click Start above the server name
Click Allow Access when it asks

You'll need GitHub Copilot enabled for this to work. Open the chat with Option + Cmd + B and make sure you're in Agent mode.

Claude Code

The quickest way:

claude plugin install figma@claude-plugins-official

Or manually:

# For current project
claude mcp add --transport http figma https://mcp.figma.com/mcp

# Globally across all projects
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

After that, type /mcp in Claude Code, select figma, choose Authenticate, and allow access. You should see "Authentication successful. Connected to figma".

Setting up the desktop server

If you'd rather keep things local:

Open the Figma desktop app (make sure it's updated to the latest version)
Open a Design file and switch to Dev Mode (Shift + D)
In the Inspect panel, find the MCP server section and click Enable desktop MCP server
You'll see a confirmation at the bottom of the screen. The server runs at http://127.0.0.1:3845/mcp

Then configure your editor:

Cursor:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

VS Code:

{
  "servers": {
    "figma-desktop": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Claude Code:

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

The desktop server doesn't need OAuth - it uses your existing Figma session. The tradeoff is you need to keep the desktop app open and running.

What tools you get

Once connected, your AI assistant can use these tools:

get_design_context - the main one. Pulls a structured representation of whatever you've selected or linked in Figma. Defaults to React + Tailwind but you can ask for Vue, plain HTML, iOS, whatever
get_screenshot - takes a screenshot of your selection. Really helps the AI understand spatial relationships and layout intent
get_variable_defs - grabs your design tokens (colours, spacing, typography)
get_metadata - returns layer names, IDs, positions, sizes as structured XML. Good for large designs where full context would be too much
get_code_connect_map - checks if any Figma components are already mapped to code components in your project
create_design_system_rules - creates a rules file so the AI knows how to match your design system conventions
generate_figma_design - this one goes the other direction. It can generate Figma design layers from your UI code (remote server only)
get_figjam - reads FigJam diagrams and converts them to XML
generate_diagram - creates FigJam diagrams from Mermaid syntax (flowcharts, sequence diagrams, etc.)

How I actually use this

The basic flow: select something in Figma, copy the link, paste it into your AI chat.

Build this as a React component with Tailwind:
https://www.figma.com/design/abc123/MyProject?node-id=1234:5678

The AI calls get_design_context and get_screenshot behind the scenes, then writes the component. Most of the time it gets the structure and spacing right on the first try. Colours and typography are usually spot on because it's reading them directly from Figma.

With the desktop server you can also just select a frame in Figma and tell the AI to "implement my current Figma selection" without pasting any links.

I've also been using it to pull design tokens into code:

Grab the design tokens from this file and create a tokens.ts:
https://www.figma.com/design/abc123/MyProject?node-id=1234:5678

And if you already have a component library:

Implement this design using components from src/components/:
https://www.figma.com/design/abc123/MyProject?node-id=1234:5678

Things I've learned

A few things that tripped me up or that I wish I knew from the start:

Be specific with your selection. Don't paste a link to an entire page. Select the exact frame or component you want. The more focused, the better the output.

Use Dev Mode. The MCP server gets way more useful data when you're viewing designs in Dev Mode.

Tell it your stack. Default output is React + Tailwind. If you need something else, just say "generate in Vue" or "use plain HTML + CSS". It works.

Screenshots matter for layout. Keep the screenshot tool enabled. For complex layouts, the screenshot is what makes the difference between good and great output.

Set up Code Connect. If you have existing components in your codebase, map them using Code Connect. The AI will reuse what you already have instead of writing everything from scratch.

For large designs, use get_metadata first. If a full get_design_context call creates too much output, use get_metadata to get the structure, then make targeted calls for specific sections.

Create design system rules. Run create_design_system_rules once and save the output to your project. It teaches the AI your conventions so the generated code is more consistent.

Is it worth it?

For me, absolutely. The biggest win is not having to context-switch between Figma and my editor. I used to have Figma open on one monitor and my editor on the other, constantly going back and forth. Now I paste a link and let the AI do the translation.

It's not perfect - sometimes it gets creative with colours or misses subtle spacing. But it gets you most of the way there, and the rest is just tweaking. That's a massive improvement over building everything from scratch while squinting at a Figma file.

The remote server takes about 30 seconds to set up. Give it a go.