Figma MCP for Cursor: Design to Code

Figma MCP for Cursor is a Model Context Protocol server that lets the Cursor agent read frames, components, and tokens from Figma instead of guessing from a screenshot of the file. It is the right plug for "what did design intend."

It is the wrong plug for "what is wrong in the running app right now." Those are two contexts. Most write-ups mash them together.

I run both. Figma MCP for the file. A local screen MCP for the live window. Cursor stays the client.

If MCP is still abstract, read what an MCP server is and the Model Context Protocol primer, then come back.

What does Figma MCP for Cursor actually expose?

A Figma MCP server exposes tools the agent can call: fetch a frame, list components, sometimes pull variables or a node tree. Cursor, as the MCP client, shows those tools to the model.

The server is not the model. It does not redesign the file. It answers structured reads.

Exact tool names depend on the server you install. Treat README names as the source. Do not invent a tool list here.

The useful mental model is the same as other MCP tools: advertise, call, return. The agent decides when to call.

How do I add Figma MCP next to Cursor MCP?

Cursor reads MCP config from its MCP JSON. Cursor MCP covers the editor side.

You will end up with more than one server. That is normal. One server per job.

Figma's server talks to Figma's world. A screen server talks to a Mac app on 127.0.0.1.

PinVari's connector installs at ~/.pinvari/mcp/pinvari-mcp and expects the app to be running on port 3402. One-click: PinVari → Connect → Cursor.

claude mcp add --scope user pinvari -- "$HOME/.pinvari/mcp/pinvari-mcp"

That command is for Claude Code's CLI. In Cursor, use the in-app Connect button or Cursor's MCP JSON, not the bare claude mcp add pinvari.

Keep tokens for Figma inside Figma's installer. Do not paste design tokens into a screen-capture tool. Different secrets, different servers.

Why design-to-code still fails with a perfect Figma MCP

The file is clean. The running UI drifted. Padding changed in code and nobody updated Figma.

The agent implements the file and "fixes" a deliberate live experiment. Or it implements a frame you were not looking at.

Two buttons share a component. The file says Primary. The live window has two Primaries in two groups. Figma MCP cannot see the one you hovered.

Live UI needs Accessibility. AXUIElementCopyElementAtPosition returns role, label, frame, parent chain. Confidence and circled-vs-dwelled provenance tell the agent how the hit happened.

When the overlay would hit-test itself, chainExcludingSelf walks real windows. Electron needs AXManualAccessibility and a short retry. Bare AXGroup should descend to a labeled child. Chromium ids (AXDOMIdentifier, AXDOMClassList) name title-less nodes.

OCR is the fallback on canvas. Ask below 0.8 confidence.

That bundle is what pinvari_next_instruction returns, plus spoken words and a crop. pinvari_request_capture lets Cursor ask you to point mid-task.

Figma MCP

Job: Intent, tokens, component tree.

Input: File URL or selection in Figma.

Miss: Runtime state, native chrome, "this" while you talk.

Screen MCP (PinVari)

Job: Named live element plus voice.

Input: ⌥⌘A mark, ⌥⌘V voice, dwell ~0.2s.

Miss: Design history, unused variants in the file.

Screenshots only

Job: A picture.

Input: CleanShot or ⇧⌘5.

Miss: Names, confidence, deixis, per-mark words.

A design-to-code loop that uses both

Open the Figma frame. Ask Cursor, via Figma MCP, for the node you care about.

Run the app. Circle the live control that should match. Speak the gap: "this padding is 8, the file is 16."

Let the agent read both tool results in one turn. The file says 16. The live element frame says otherwise.

If the preview is on another display, the mark must remember that monitor. Multi-display capture is not optional on a desk with two screens.

If you scroll a long settings page, ⌥⌘P pause/resume and scroll-aware marks keep frames honest.

Full focused-window text up to 40,000 characters, including scrolled-out copy, helps when the mismatch is a string, not a pixel.

Security and locality

Figma MCP may need a Figma account and a token. That is Figma's trust boundary.

A screen MCP should not upload frames by default. PinVari transcribes (whisper.cpp) and OCRs on-device. You bring your own agent.

Nothing leaves the Mac until you hand a capture to Cursor or a tracker. Linear, GitHub, and Slack are optional exits, not the default.

macOS 14+, Apple Silicon and Intel, Developer-ID DMG. The Mac App Store sandbox blocks this class of global hotkey plus AX read.

One-time launch price is $39 (first 500, then $59) via Polar. No subscription for the core app.

I would not put a hosted computer-use agent between Figma and production. You want tools, not a model driving the mouse across Figma and your bank.

How should a team split Figma MCP for Cursor work?

One person owns the file. One person owns the running build. The agent sits in the middle and should not be asked to pick a winner in silence.

In standup, say which source wins this week. "File wins on spacing. Live wins on copy." Write it in the ticket.

Designers can keep using Figma comments. Engineers should not re-type those comments into Cursor if a server can read the node.

PMs can still circle the live build. That capture is the product fact. The file is the intent.

Say which source wins. Unspoken conflict is how you get a confident wrong patch.

If the team is website-only, Figma MCP plus Jam.dev may be the whole stack. If anyone ships a Mac app or an Electron shell, add desktop capture.

Do not share Figma tokens in Slack. Do not put them in Cursor rules. The Figma server's installer owns that secret.

Do not share screen captures of production admin by default. On-device OCR and STT exist so you can keep those frames local until a ticket needs them.

A weekly 20-minute drift pass is enough: open the frame, open the build, mark three mismatches.

That is Figma MCP for Cursor used as QA, not as a toy. Write the three node ids in the ticket so next week is comparable.

When drift is the same three nodes every week, the file is lying or the code is. Pick one to update. The agent can do the typing after you pick.

FAQ

What is Figma MCP for Cursor?

It is an MCP server that exposes Figma file data as tools Cursor can call. The agent reads structure from the design file through a standard plug.

It does not replace looking at the running product. Pair it with a live capture when implementation drifts.

Does Figma MCP let Cursor edit my Figma file?

Depends on the server. Many start read-only. Treat write tools as a separate decision with a separate risk.

For design-to-code, reads are enough. You want code to move toward the file, or a ticket that says the file is wrong.

Why do I need another MCP if I already have Figma MCP?

Because the file is not the window. Runtime state, native chrome, and the control under your pointer live outside Figma.

A local screen MCP returns a named element, spoken words, and a crop. That is the missing half of design QA.

How do I install MCP servers in Cursor?

Use Cursor's MCP settings or MCP JSON, one server per job. PinVari also has a one-click Connect path.

For Claude Code's CLI, use --scope user and the full path to pinvari-mcp. The app must be running.

Can I use Figma MCP on a website-only team?

Yes. If the product is only a site, Figma plus a browser tool like Jam.dev may be enough.

If you also ship a Mac app or an Electron shell, browser annotation will miss those windows.

What should I do when the live UI and Figma disagree?

Capture the live element and the Figma node in the same agent turn. State which source wins for this ticket.

If you do not say which source wins, the agent will pick one and sound sure. That is a silent guess.