---
title: "Figma Dev Mode MCP — Cursor, VS Code, Windsurf Setup"
aliases: [figma-dev-mode-mcp, figma-mcp-cursor, figma-mcp-vscode, figma-mcp-windsurf]
tags: [figma, mcp, dev-mode, cursor, vscode, windsurf, setup]
sources: [raw/How to set up the Dev Mode MCP server  Figma.md]
created: 2026-05-15
updated: 2026-05-15
---

# Figma Dev Mode MCP — Cursor, VS Code, Windsurf Setup

Figma's Dev Mode MCP server exposes Figma design context to any MCP-capable code editor. This is a **local server** running inside the Figma desktop app — not a remote plugin.

## Requirements

- Figma **desktop app** (download at figma.com/downloads) — required for local connection
- **Full seat or Dev seat** — free viewer seats cannot use the MCP server
- Figma file open in Dev Mode

## Step 1 — Enable the MCP Server in Figma

1. Open Figma desktop app → log in
2. Open any file → switch to **Dev Mode**
3. In the right panel, find the **MCP server block** → toggle it **on**
4. If errors appear, a toast notification shows at the bottom
5. Server stays on for all subsequent files until manually disabled

> To disable: re-open any file in Dev Mode → toggle off the MCP server block.

## Step 2 — Connect to Your Editor

### Cursor

1. Go to `docs.cursor.com/tools` — Figma one-click install available
2. Confirm Figma desktop app is running (required)
3. Click install — config is pre-filled automatically
4. Wait for **5 tools** to appear in the MCP tools list
5. Open the AI panel → switch to **agent mode** → ready

> If tools don't load: toggle server off/on in Figma, or restart the Figma app.

### VS Code

1. Open Settings → search `MCP`
2. Enable **"Chat: Use MCP protocol"** (required for Copilot/AI agents)
3. Click **"Edit in settings.json"** → add the server config block with the local URL
4. Save → click **Start server** in the MCP panel
5. Open the AI tab → verify the 5 Figma tools appear under Tools

> Local URL pattern: same `localhost` endpoint used for all MCP-capable editors.

### Windsurf

1. Open Windsurf Settings → **Cascade** section → **Open Plugin Store**
2. Search for **Figma** → click **Install**
3. Return to Cascade — 5 Figma tools now appear automatically

> If tools are missing: reset the server from Cascade or restart the Figma app.

## MCP Tools Exposed

Currently **5 tools** are exposed (number will change as Figma adds/consolidates capabilities):

- Design context retrieval
- Screenshot capture
- Component inspection
- Code suggestions
- (Additional tools to be added)

## Key Takeaways

- Dev Mode MCP server **requires the Figma desktop app** — no web-only option
- **Local connection only** — server runs on localhost inside Figma
- Server toggle lives in the **Dev Mode right panel** per file, but stays active across files once enabled
- Cursor has a **one-click install** at docs.cursor.com/tools
- VS Code needs manual `settings.json` config + "Use MCP protocol" toggle enabled
- Windsurf uses the **plugin store** (Cascade → Plugin Store → search Figma)
- All three editors expose the same 5 tools via the same localhost URL
- Check Figma help center docs for config snippets to connect other MCP-compatible editors

## Related

- [[wiki/claude-code/figma-mcp-setup|figma-mcp-setup]] — Claude Code variant (remote plugin vs desktop Dev Mode)
- [[wiki/claude-code/figma-mcp-guide|figma-mcp-guide]] — full overview: capabilities, client support matrix, skills
- [[wiki/claude-code/figma-mcp-skills|figma-mcp-skills]] — all 8 Figma MCP skills for Claude Code
- [[wiki/claude-code/mcp-integration|mcp-integration]] — MCP protocol setup in Claude Code

## Sources

- Video: "How to set up the Dev Mode MCP server | Figma" (Peter McCarron, 2025-06-30)
- `raw/How to set up the Dev Mode MCP server  Figma.md`
