How to Connect Cursor to Figma

Cursor is the most popular AI code editor right now. It writes UI components fast, handles multi-file edits well, and understands React out of the box.

It has no idea what your Figma designs look like.

Every component Cursor generates uses guessed values — hardcoded hex colors, arbitrary padding, made-up border radii. The output compiles, but it does not match your design system. That gap between "works" and "correct" is where teams lose hours on manual fixes.

There is a fix: give Cursor direct access to your Figma file through a local HTTP API.

What you need

Three things:

1. A Figma file with components built on Figma Variables (design tokens).
2. AI Bridge — a Figma plugin that exposes a local read/write API to your design file.
3. Cursor editor with agent mode enabled.

Setup (2 minutes)

Install the plugin. In Figma: Plugins → Development → Import plugin from manifest. Run it — the plugin UI opens and connects to the local bridge server.

Start the bridge server. Double-click start-bridge.command on macOS or start-bridge.bat on Windows. This launches a local HTTP server on port 8867 and a WebSocket relay on 8866.

Verify the connection:

curl http://localhost:8867/status

You should get {"connected": true}. If not, the plugin is not running in Figma.

Add Bridge instructions to Cursor. Create or edit .cursorrules in your project root:

Figma AI Bridge API: http://localhost:8867
1) GET /status — check connection (connected=true means ready)
2) POST /command — send {"command":"<name>","params":{...}}
3) POST /batch — send {"commands":[...]} for multiple operations
4) IMPORTANT: use "params", not "args"
5) Colors are 0-1 floats, not 0-255

Available commands: get-node-props, find-children, get-bound-variables,
list-components, list-variables, create-frame, create-text, update-node,
bind-variable, export-node, set-fill, set-stroke, set-effects.

This file persists across sessions. Every Cursor conversation now knows how to talk to Figma.

How Cursor uses the Bridge

Cursor's agent mode can call HTTP endpoints. Once it knows the Bridge API, it can query your Figma file the same way it reads local files — as structured context.

Reading component structure:

# Get properties of a specific node
POST /command
{"command": "get-node-props", "params": {"nodeId": "6177:14786"}}

# Find all children of a frame
POST /command
{"command": "find-children", "params": {"nodeId": "6177:14717", "type": "COMPONENT_SET"}}

Getting design token bindings:

POST /command
{"command": "get-bound-variables", "params": {"nodeId": "6177:14786"}}

This returns the actual variable names bound to each property — not raw pixel values. The response looks like:

{
  "fills": "background/primary/solid",
  "paddingLeft": "button/pill-gutter/md",
  "topLeftRadius": "radius/full",
  "itemSpacing": "button/gap/lg"
}

Cursor uses these names to generate CSS with proper var() references. The difference in output quality is immediate.

Cursor-specific tips

.cursorrules is your best tool. Cursor reads this file before every conversation. Put your Bridge API reference, component naming conventions, and token mapping rules there. The model follows them consistently without re-prompting.

Use Composer for multi-file generation. When Cursor generates a React component, you usually need the TSX file, a CSS module, and possibly a story file. Composer handles this in one pass. With Bridge context, all three files reference the correct design tokens from the start.

Inline edit for CSS tweaks. After generating a component from Figma data, use Cursor's inline edit (Cmd+K) to adjust individual properties. Select a CSS block, tell it "use the md size token instead of sm," and it rewrites just that section.

Agent mode is required. The Bridge API calls only work in agent mode, not in regular chat. Make sure agent mode is enabled in Cursor settings.

Before and after

Without Bridge, Cursor generates this:

.menuItem {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  color: #0d0d0d;
}
.menuItem:hover {
  background: rgba(0, 0, 0, 0.04);
}

Every value is hardcoded. Dark mode will not work. If your design system updates spacing from 6px to 8px, you grep through every file.

With Bridge, the same component:

.menuItem {
  padding: var(--menu-item-padding-top-bottom) var(--menu-item-padding-left-right);
  border-radius: var(--menu-item-radius);
  font-size: var(--size-text-sm);
  line-height: var(--line-text-sm);
  color: var(--color-text-primary);
}
.menuItem:hover {
  background: var(--color-ui-menu-item-background);
}

Dark mode works automatically. Token updates propagate everywhere. The CSS reads like a spec, not a screenshot transcription.

The cost of not connecting them

Every component Cursor builds without Figma context is a component you will manually fix later. The fixes are small — a color here, padding there — but they add up across a full product. Teams that connect their editor to their design file skip that entire correction loop.

The setup takes two minutes. The .cursorrules file carries the context forward permanently.

The same Bridge works with Claude Code and Codex. Read more about how it handles design tokens instead of raw values, or why AI editors need a design system in the first place.

Get AI Bridge →