From Figma to Cursor: A Step-by-Step Guide to Design-to-Code with Figma MCP

2026-08-25 · by bixzell

For years, the design-to-code handoff has been a notorious bottleneck in frontend engineering. Developers squint at Figma inspect panels, manually copy hexadecimal color values, transcribe margin and padding dimensions into CSS utility classes, and painstakingly reconstruct Flexbox layouts.

The emergence of the Model Context Protocol (MCP) bridges this gap directly. By connecting Figma to AI-native IDEs like Cursor, your coding agent can inspect component trees, read design system tokens, and generate clean, responsive React, Vue, or Tailwind CSS code in seconds. Tools like 6,970⭐ on GitHub provide the bridge between the design canvas and the code editor.

However, feeding Figma designs to an AI assistant is only as effective as the underlying design structure. If your Figma canvas is messy, the generated code will be equally unmaintainable.

Here is a step-by-step guide to setting up the Figma MCP bridge, preparing your design files, and executing a repeatable design-to-code workflow in Cursor.

The two non-negotiable Figma design rules

Before writing a single line of code or configuring an MCP endpoint, your design file must satisfy two core architectural requirements. Without these, AI models output brittle, unmaintainable styling.

Rule 1: Use Figma Variables for every numeric value

Whenever a number appears in your design — font sizes, line heights, corner radii, padding, gap spacing, and color palettes — it must be bound to a Figma Variable.

❌ Hardcoded Values:
   width: 342px; border-radius: 12px; color: #3B82F6; margin-bottom: 18px;

✅ Variable Tokens:
   radius-lg (12px) ──▶ Tailwind: rounded-lg
   spacing-4 (16px) ──▶ Tailwind: p-4 / gap-4
   primary-blue     ──▶ Tailwind: bg-primary-600

When Cursor’s agent queries a design node via MCP, it receives the variable names alongside the raw values. If your design uses tokenized variables, the model maps them cleanly to your project’s design system (such as Tailwind CSS tokens or CSS custom properties). If your design relies on arbitrary numbers, the model generates messy inline styles like p-[18px] and rounded-[11px].

Rule 2: Use Auto Layout on every container

Auto Layout in Figma is the direct visual equivalent of CSS Flexbox. It dictates:

Direction (Row vs Column)
Spacing (gap)
Padding (horizontal and vertical)
Responsive behavior (Hug Contents, Fill Container, Fixed Dimensions)

When an agent reads an Auto Layout frame through MCP, it instantly understands the document flow, flex hierarchy, and responsive scaling behavior.

If you skip Auto Layout and place elements with freehand drag-and-drop, Figma reports them as absolute canvas coordinates (x: 140, y: 320). The AI assistant will attempt to recreate your layout using CSS position: absolute; left: 140px; top: 320px;, creating fragile code that disintegrates on different screen widths.

Step 1: Enable MCP in Figma

Figma provides built-in support for external developer integrations through Dev Mode:

Open your design file in the Figma desktop app or browser.
Toggle into Dev Mode (switch the toggle in the top right, or press Shift + D).
In the inspect panel on the right sidebar, locate the MCP Status section.
Ensure the status is toggled to Enabled.

(Note: Depending on whether you use Figma’s native MCP socket or a dedicated community connector, you may also generate a Figma Personal Access Token from your Account Settings > Security > Personal access tokens).

Step 2: Configure the MCP server in Cursor

In Cursor, open your global or project-level MCP configuration:

Go to Cursor Settings → Features → MCP Servers
Or edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your_personal_access_token_here"
      }
    }
  }
}

Save the file and refresh your MCP servers in Cursor. You should see active tools such as get_node_info, get_styles, and extract_component_tree.

Step 3: Prompting with node-specific links

The most common workflow error is pasting a generic Figma file URL into Cursor. A complete Figma file often contains dozens of artboards, prototype noodles, and canvas drafts. Passing the entire document burns excessive tokens and confuses the model.

Instead, use selection links:

In Figma, click on the specific frame or component you want to implement (e.g. WalletCard or NavigationBar).
Right-click the element and select Copy link to selection (or press Cmd + L on macOS). The URL will contain an explicit node parameter, for example:
```
https://www.figma.com/design/AbC123XyZ/App-UI?node-id=42-108
```
Open Cursor Composer (Cmd + I or Cmd + L), set the mode to Agent, and prompt with the link:

Please build the React component for this Figma frame:
https://www.figma.com/design/AbC123XyZ/App-UI?node-id=42-108

Requirements:
- Use React with TypeScript and Tailwind CSS
- Map Figma spacing and color variables to our existing tailwind.config.js tokens
- Implement responsive layout honoring Auto Layout Fill/Hug constraints
- Extract Lucide React icons for the icon layers

Step 4: Review and verify generated code

When the agent executes, watch its tool invocation log in Composer:

It calls the Figma MCP server with the node-id.
It fetches the component’s AST (Abstract Syntax Tree), layout bounds, and style bindings.
It maps the visual hierarchy directly into clean JSX with flexbox utilities.

Example generated output:

import React from 'react';
import { CreditCard, Wallet } from 'lucide-react';

interface WalletCardProps {
  balance: string;
  isPrimary?: boolean;
}

export const WalletCard: React.FC<WalletCardProps> = ({ balance, isPrimary = true }) => {
  return (
    <div className="flex flex-col gap-4 p-6 rounded-2xl bg-card border border-border shadow-sm w-full max-w-md">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-muted-foreground">Primary Card</span>
        <CreditCard className="w-5 h-5 text-primary" />
      </div>
      <div className="text-3xl font-bold tracking-tight text-foreground">
        {balance}
      </div>
      <div className="flex items-center gap-2 pt-2 border-t border-border/50 text-xs text-muted-foreground">
        <Wallet className="w-4 h-4" />
        <span>Connected to Wallet</span>
      </div>
    </div>
  );
};

Notice that because the design respected Auto Layout and Variables, the resulting code has no arbitrary hardcoded margins or fixed-pixel positions. The padding (p-6), gap (gap-4), and radii (rounded-2xl) cleanly match the design tokens.

Summary

The combination of Figma MCP and Cursor bridges the divide between visual design and production code. By enforcing Auto Layout and Variables at the design stage, and passing targeted node links at the prompt stage, you can reliably generate frontend components with near-zero manual styling overhead.

For more on creative tooling integrations, see our Unity MCP vs Cursor Talk to Figma comparison.