·

Figma MCP With Cursor

Figma MCP With Cursor

Cursor is an AI-first IDE built on VS Code. Its Agent mode gives you an AI coding agent that can read and edit your project files, run terminal commands, and — when MCP servers are configured — call external tools like Figma MCP without leaving the editor. For developers who prefer working inside an IDE rather than a terminal agent, Cursor provides a natural environment for design-to-code workflows: you see the Figma context, the generated code, and your existing codebase side-by-side.

This topic covers connecting Figma MCP to Cursor Agent mode, translating Figma frames to UI components from within the IDE, using Code Connect to align generated code with your existing component library, and understanding the accuracy trade-offs you'll encounter.

Connecting Figma MCP to Cursor Agent Mode

Cursor reads MCP server configuration from JSON files. You have two scopes:

  • Global: ~/.cursor/mcp.json — available in all Cursor projects on your machine.
  • Project: .cursor/mcp.json in your project root — scoped to that project, can be committed (contains no secrets).

Global configuration

Create or edit ~/.cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Project configuration (recommended for teams)

Create .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Commit this file to version control — it contains no secrets.

Authentication

Authenticate by running a Figma tool in the Agent panel:

Use the Figma MCP to get metadata for any Figma file

Cursor will open your browser for Figma OAuth. Complete the login and grant access — Cursor stores the auth token and reuses it in subsequent sessions.

Enabling Agent mode in Cursor

  1. Open Cursor and open a project.
  2. Open the AI chat panel (Cmd+L / Ctrl+L).
  3. Switch from "Chat" to "Agent" mode using the dropdown in the chat panel header.
  4. Confirm that MCP tools are available: type @figma or check the tool list icon in the agent panel. You should see the Figma MCP tools listed.

Verifying the setup

In Cursor Agent mode, type:

Use the Figma MCP to get metadata for the file at https://www.figma.com/design/ABC123/My-Design-File

Tips
- If Figma tools don't appear in Agent mode after adding the config, restart Cursor — MCP config changes require a full restart.
- Use the project-level config for team projects so all developers connect to the same Figma MCP setup automatically on clone.

Translating Figma Frames to UI Components Directly from Cursor

Cursor Agent mode has a key advantage over terminal agents: it can read your open files, see the directory tree in the sidebar, and reference code you have visible in the editor. This makes design-to-code prompts more natural — you can reference "the currently open file" without specifying a full path.

Workflow setup
Before starting a design-to-code session in Cursor:
1. Open the target Figma frame in the browser and copy the node-id from the URL.
2. Open the component directory in Cursor's sidebar.
3. Open a related existing component in the editor as a reference (e.g., open src/components/Alert/Alert.tsx before generating NotificationBanner).

Step 1: Orientation prompt

Using Figma MCP, call get_design_context for node-id=42:100 in file ABC123.

Analyze the design and answer:
1. What is the root layout? (flex direction, main alignment)
2. Which layers correspond to: container, icon area, content area, action area?
3. Are there Figma component instances? List their names.
4. What colors appear? List unique hex values.
5. What typography styles are used?

Look at the currently open file (Alert.tsx) and identify structural similarities I could reuse.

Step 2: Generate the component

Based on the Figma design context for node-id=42:100 in file ABC123, generate a new component NotificationBanner following the same patterns as the currently open Alert.tsx.

Differences from Alert:
- NotificationBanner has an optional action button (from design context)
- Has a dismissible close button
- Supports 4 variants: info, success, warning, error

Create:
- src/components/NotificationBanner/NotificationBanner.tsx
- src/components/NotificationBanner/NotificationBanner.module.css
- src/components/NotificationBanner/index.ts

Step 3: Screenshot verification

Call get_screenshot for node-id=42:100 in file ABC123. Compare the screenshot against the generated NotificationBanner.tsx and NotificationBanner.module.css.
List any visual discrepancies — spacing, border radius, icon positioning, button placement — and apply fixes.

Cursor's context-aware advantage
Because Cursor Agent can read all open files and the workspace structure, you can ask more contextual questions:

Looking at the generated NotificationBanner.tsx and the components in src/components/Button/ and src/components/Icon/, confirm:
1. The Button import path is correct for this project structure
2. The Icon component is being used correctly (check the prop interface in Icon.tsx)
3. The CSS module class names match between the .tsx and .module.css files
Fix any issues found.

Tips
- Open a related component in the editor before starting a generation session — Cursor's Agent will read it as part of its workspace context and match your coding patterns automatically.
- After generation, use Cursor's diff view (Cmd+Shift+G) to review what the agent created or changed before accepting — treating AI output like a pull request diff is a good habit.
- Use Cursor's inline edit (Cmd+K) for small targeted fixes and Agent mode for multi-file generation — inline edit is faster for CSS tweaks after the component structure is correct.
- If Cursor's Agent context window fills up in a long session, start a fresh Agent session and provide the node ID again — don't try to continue an overloaded session.

Using Code Connect to Align Figma Components with Existing Codebase Components

Code Connect is the mechanism by which Figma knows which codebase component corresponds to each Figma design component. When Code Connect mappings are published, get_code_connect_map returns them to the AI agent — instead of generating <button className="btn-primary">, the agent generates <Button variant="primary"> because it knows your actual component API.

What Code Connect solves
Without Code Connect, the agent sees a Figma "Button" instance and has to guess what component to use. It might generate raw HTML, an incorrect import path, or a fabricated prop API. With Code Connect, the mapping is explicit:

  • Figma Component: Button/Primary → Code: import { Button } from '@company/design-system' with usage <Button variant="primary">

Setting up Code Connect for a component

Figma provides a CLI to manage Code Connect mappings. Install it:

npm install -g @figma/code-connect

Create a Code Connect file for your Button component:

// src/components/Button/Button.figma.tsx
import figma from '@figma/code-connect'
import { Button } from './Button'

figma.connect(Button, 'https://www.figma.com/design/ABC123?node-id=10%3A55', {
  props: {
    variant: figma.enum('Variant', {
      Primary: 'primary',
      Secondary: 'secondary',
      Destructive: 'destructive',
    }),
    size: figma.enum('Size', {
      Small: 'sm',
      Medium: 'md',
      Large: 'lg',
    }),
    label: figma.string('Label'),
    disabled: figma.boolean('Disabled'),
  },
  example: ({ variant, size, label, disabled }) => (
    <Button variant={variant} size={size} disabled={disabled}>{label}</Button>
  ),
})

Publish the mapping:

figma connect publish --token $FIGMA_API_KEY

Using AI to generate Code Connect files

Rather than writing these files manually for every component, use Claude Code or Cursor Agent to generate them:

Using Figma MCP, call get_code_connect_suggestions for Figma file ABC123. For each suggestion that matches a component in src/components/, generate a Code Connect file at src/components/{ComponentName}/{ComponentName}.figma.tsx following the pattern in src/components/Button/Button.figma.tsx.

Using Code Connect in code generation

Once mappings are published, the agent can use them:

Using Figma MCP, call get_code_connect_map for file ABC123. Then get the design context for node-id=42:100.
When generating the NotificationBanner component, use the Code Connect mappings to reference the correct component names and prop APIs for any component instances found in the design context. Do not invent component APIs — use only what the Code Connect map specifies.

Tips
- Code Connect setup is a one-time investment per component — prioritize the most frequently used design system components first (Button, Input, Modal, Badge, etc.).
- Ask Cursor Agent to bootstrap Code Connect files for all components in a directory at once: "generate Code Connect files for every component in src/components/ that has a matching component in Figma file ABC123."
- After publishing Code Connect mappings, re-run your design-to-code prompts and compare the output — you should see a significant reduction in hallucinated component APIs.
- Keep Code Connect files (*.figma.tsx) in version control alongside the component — when the component's prop API changes, the Code Connect file must be updated and republished.

Known Limitations and Design Accuracy Trade-offs in Cursor

Limitation 1: Agent context window in long sessions
Cursor Agent accumulates context across turns in a session. For design-to-code sessions that span many components, the context window fills up and the agent may start losing early context (like the original design constraints or token mappings).

Impact: The agent may start generating code that diverges from early instructions.

Workaround: For large multi-component sessions, break work into separate Agent sessions per component. Start each session with a brief context-setting prompt:

Project context: React 18, TypeScript, CSS Modules, design tokens in src/styles/tokens.css, existing components in src/components/. Figma file ID: ABC123.

Limitation 2: Cursor's tool-calling is mediated by the model's instruction-following
Unlike Claude Code's native MCP integration, Cursor's Agent mode relies on the underlying model (GPT-4o or Claude via API) to decide when and how to call MCP tools. In some cases, the model may attempt to "recall" design information from its training data rather than calling the Figma MCP tool — especially for well-known design patterns.

Workaround: Be explicit:

You MUST call get_design_context via Figma MCP for node-id=42:100 in file ABC123. Do not use any prior knowledge about this design — only use the data returned by the tool call.

Limitation 3: CSS pixel-perfectness
Even with accurate design context, AI-generated CSS rarely achieves pixel-perfect accuracy on first generation. Common issues include:

  • Incorrect border-radius on nested elements
  • Missing overflow: hidden on clipping containers
  • Incorrect z-index stacking
  • Background gradients with subtle stop-point differences

Workaround: Use the screenshot comparison workflow — ask the agent to get the screenshot and diff it against its own CSS output, then iterate. Accept that 2-3 refinement passes are normal for complex designs.

Limitation 4: Responsive behavior is not in Figma MCP data
Figma MCP returns the design for a single viewport (the frame as designed). Responsive breakpoints, min/max widths, and mobile variants are separate frames in Figma and require separate tool calls.

Workaround: Extract all viewport variants in a single session:

Get the design context for the following node IDs from file ABC123:
- Desktop: 42:100
- Tablet: 42:101
- Mobile: 42:102

Then generate a responsive CSS module with appropriate @media queries covering all three breakpoints. Use min-width breakpoints: tablet at 768px, desktop at 1280px.

Limitation 5: Cursor free tier rate limits
Cursor's free tier has usage limits on Agent mode requests. Long Figma MCP sessions that involve multiple tool calls per turn can hit these limits quickly.

Workaround: Use Cursor Business or bring your own API key. Alternatively, use Claude Code CLI for high-volume design extraction tasks and Cursor only for the interactive editing phase.

Tips
- For pixel-accuracy validation, export the Figma frame as a PNG at 2x resolution and use it as a visual reference in your browser's DevTools alongside the implemented component.
- Use Cursor's "Rules for AI" feature (.cursorrules file in project root) to set standing instructions like "always use our CSS token variables, never hardcode color hex values" — this reduces the number of correction prompts needed.
- When accuracy is critical (marketing landing pages, brand-heavy UI), plan for a manual CSS review pass after AI generation. AI handles structure and spacing well; pixel-level visual polish still benefits from a human eye.
- Keep a FIGMA.md in your project root documenting the Figma file IDs, key frame node IDs, and design token file locations — Cursor Agent can read this file and use it as project context at the start of each session.

Next Real World Workflow Design To Code With Figma MCP