Dev Mode MCP Server in Figma: Step-by-Step with VS Code

TL;DR

• Dev Mode MCP server in Figma sends structured design context (variables, components, metadata) directly into your IDE’s AI agents.

• No more pixel-guessing: Copilot, Cursor, Claude, etc. can now generate design-aware code.

• Guide included: step-by-step setup in VS Code (with screenshots).

• Also relevant: tips apply for Cursor, Windsurf, and Claude Code.

Want more like this? Subscribe to get my free UX prompt guide for designing with AI and join the exploration.

Introduction

In my last post, I explored how MCP + AI = orchestration for multi-brand systems. The Dev Mode MCP server is the first practical bridge: it lets your IDE agents “see” what’s inside a Figma file - not just a screenshot, but tokens, metadata, and component mappings.

This is the tutorial follow-up: getting it running in VS Code. why VS Code? Simple - it’s the IDE I use every day.

Prereqs

• Figma desktop app (latest version) with a Dev or Full seat (Pro/Org/Enterprise).

• An MCP-aware IDE - here I’ll demo VS Code with GitHub Copilot. Works similarly in Cursor, Windsurf, Claude Code.

• Basic comfort editing a JSON config file (mcp.json).

Step 1: Enable the MCP server in Figma

1. Open Figma desktop → menu → Preferences → Enable local MCP Server. Once enabled, switch to Dev Mode and you can verify it by checking the screenshot below.

2. Server runs locally at:

http://127.0.0.1:3845/mcp

3. Keep this URL handy. (Currently only local - cloud/remote support coming later.)

Step 2: Add the server in VS Code

1. Open Command Palette → search MCP: Add Server.

2. Choose HTTP

and paste below:

http://127.0.0.1:3845/mcp

Name it something like “Figma DXM Dev Mode MCP”.

3. VS Code stores this in mcp.json :

{
  "servers": {
    "Figma DXM Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/mcp",
      "type": "http"
    }
  }
}

4. Confirm it’s connected - you should see Figma tools listed under the server.

💡 Other IDEs (Cursor, Windsurf, Claude): same idea — go to MCP settings and add the same URL.

Step 3: Run your first codegen

1. In Figma desktop, select a frame or component (say, PricingCard_mobile).

2. In VS Code agent chat, type:

#get_code
Generate this selection as a React component using Tailwind.
Use semantic HTML and responsive layout
Map any tokens to variables if available.

Example result:
You’ll get a React component scaffolded with real design context - not a guess.

Step 4: Useful Commands you can call

• get_code → generate code for selection.

• get_variable_defs → list tokens (color, spacing, type).

• get_metadata → pull metadata for large selections.

• get_code_connect_map → align to your existing code components.

Best-practice prompts

• “Generate my Figma selection in Vue 3, composition API, map to tokens in src/styles/tokens.”

• “Get variable defs for this frame and format as JSON tokens.”

• “Create design_system_rules.yaml enforcing token usage and accessibility.”

Designer checklist (to improve output)

• Use Auto layout and tokens in Figma.

• Keep layer names semantic (CardContainer, not Group 45).

• Reuse components instead of duplicate frames.

• Annotate interactions when needed.

Troubleshooting

• No tools appear in VS Code? Restart Figma + VS Code, confirm the URL is exactly http://127.0.0.1:3845/mcp.

• Copilot not responding? Ensure your Copilot subscription is active (MCP tools hook into it).

• Large selections? Break them into smaller frames for cleaner code.

Conclusion

The MCP server + IDE agents won’t replace design craft but they cut handoff overhead. Start small: connect one frame, run #get_code, refine prompts. If you already use Code Connect, the server maps Figma nodes directly to your real React/Vue components.

That’s where the real power kicks in: instead of “good enough” generated code, you get design-system-aligned output.

I kept this one simple. What’s next — a deeper dive into tools like get_variable_defs, advanced prompts, and real use cases? If you’re in, type ‘I want more’ so I know to keep going ;)

👉 And if you haven’t yet, subscribe here to get my free UX prompt guide for designing with AI — it’s the easiest way to keep exploring with me.

Sources

1. Figma blog: Introducing the Dev Mode MCP server

2. Figma Help: MCP server setup + tools

3. Community examples: builder.io tutorials