Figma Dev Mode to Cursor MCP: The Setup

Connecting Figma Dev Mode to Cursor over MCP lets Cursor read your actual design (components, variables, layout) and generate code from the exact frame you select, instead of guessing from a screenshot. The link is the Figma MCP server: you enable it in Figma’s Dev Mode, then point Cursor at it as an MCP server. Once wired, you select a layer in Figma, switch to Cursor, and ask for the component. Below is the exact setup and how to use it well. To make the generated code land cleanly, it still helps to start from a well-structured design, like a free VP0 layout (the free iOS and React Native design library AI builders read from), so the frames you hand Cursor are clean.

What the connection gives you

MCP, the Model Context Protocol, is the open standard that lets an AI tool call an external server for real context. The Figma MCP server exposes your design data to Cursor: components, variables, layout, and, with Code Connect, links to your real components. So instead of pasting an image and hoping, Cursor reads structured design context and generates code grounded in it. That cuts the guesswork that produces wrong spacing, invented colors, and off components.

The setup, step by step

The desktop server runs locally, so both apps talk over 127.0.0.1.

Step	Where	Action
1	Figma desktop	Open a Design file, switch to Dev Mode
2	Figma desktop	With nothing selected, enable the MCP server in the right sidebar
3	Cursor	Settings, then the MCP tab, Add new global MCP server
4	Cursor	Point it at http://127.0.0.1:3845/mcp
5	Both	Select a layer in Figma, switch to Cursor, prompt

The configuration in Cursor is a small JSON entry naming the local server URL. Once it shows as connected, Cursor can call the Figma server during a chat. The official walkthrough is in the Figma MCP server guide, and our companion pieces are the Figma to Cursor MCP server and how to use Figma with Cursor MCP.

How to use it well

Two habits matter. First, the server only sees what you have selected, and you can select one layer at a time, so pick the specific frame or component you want, not the whole page. Second, prompt for one component per request and name your stack and conventions, exactly the discipline in how to prompt Cursor for perfect UI. A good prompt is “generate this selected frame as a React Native component using our existing Button and spacing tokens.” Then review the diff. For the broader picture of grounded editors, see the browser-based React editor with AI and MCP.

Why design structure still matters

MCP gives Cursor real data, but messy design data produces messy code. If a frame is a pile of ungrouped rectangles with absolute positions, the generated component inherits that mess. Clean designs, named layers, real auto-layout, and defined variables, translate to clean code. That is why starting from a structured design pays off: a free VP0 layout gives Cursor well-formed frames to read at $0, so the MCP connection has good input to work with. For converting designs the other way, convert Figma to React Native with Expo and AI.

The full routes comparison this bridge serves, agents versus hand-specs versus exporter plugins, is covered in the Figma-to-SwiftUI guide.

Key takeaways

• The Figma MCP server lets Cursor read real design data and generate code from your selection.
• Enable it in Figma Dev Mode, then add it in Cursor as a global MCP server at the local URL.
• The server only sees the single layer you have selected, so pick the exact frame.
• Prompt one component at a time, name your stack and tokens, and review the diff.
• Clean, well-structured designs produce clean code, so start from a free VP0 layout at $0.

Frequently asked questions

How do I connect Figma Dev Mode to Cursor with MCP?

Open a Figma Design file in the desktop app, switch to Dev Mode, and with nothing selected enable the MCP server in the right sidebar. Then in Cursor open Settings, go to the MCP tab, add a new global MCP server, and point it at the local URL (http://127.0.0.1:3845/mcp). Select a layer in Figma and switch to Cursor to generate from it.

What can Cursor read from Figma over MCP?

With the Figma MCP server connected, Cursor can read structured design context: components, variables, layout data, and, with Code Connect, links to your real components. That lets it generate code grounded in the design rather than guessing from an image.

Does the Figma MCP server see my whole file?

No. It only sees the layer you have selected, and you can select one at a time. So pick the specific frame or component you want Cursor to generate, then switch to Cursor and prompt for it.

Why is my Figma-to-Cursor generated code messy?

Usually because the design itself is messy. Ungrouped layers, absolute positions, and undefined styles translate into messy components. Use named layers, auto-layout, and variables, or start from a clean, structured design so the MCP server hands Cursor well-formed frames.

What is the best design to use with Figma Dev Mode and Cursor MCP?

A clean, well-structured one, since the MCP server’s output is only as good as the frames it reads. A free VP0 design, the free iOS and React Native design library for AI builders, gives well-formed layers and tokens for Cursor to generate from at $0.