How to connect Figma MCP to Cursor AI

TL;DR (Too Long; Design‑Ready)

• Enable the Dev Mode MCP server in the Figma desktop app (it’s not on the web version).

• Add the local server URL to Cursor AI under Settings → MCP.

  {
    "mcpServers": {
        "Figma":{
          "url": "http://127.0.0.1:3845/mcp"
      }
    }
  }

• Select a frame in Figma, then prompt Cursor (e.g. “Generate responsive React code for the selected component using Tailwind CSS”).

• Iterate inside Cursor with your existing components or design system tokens for production‑grade output.

• Works on macOS, Windows, and Linux as long as you have Figma desktop v127 or higher and Cursor v0.40+.

What is the Dev Mode MCP Server?

The Model Context Protocol (MCP) is an open standard that lets AI tools pull structured context (variables, components, layout metadata) straight from your designs instead of guessing from screenshots. Figma’s Dev Mode MCP server exposes that context over a local SSE endpoint, so AI editors such as Cursor can reason about your designs and generate cleaner code, faster.

Why connect it to Cursor AI?

• Design‑informed code generation – Cursor can reference sizes, constraints and variables directly.

• Single‑source‑of‑truth – reduce back‑and‑forth between Figma, ticket descriptions and IDE.

• Component reuse – with Code Connect enabled, Cursor will import your existing React/Vue/etc components.

• Fewer hand‑off cycles – product managers get live builds sooner; designers see pixel‑perfect parity.

Prerequisites

Security heads‑up: The server runs only on localhost; no design data leaves your machine unless Cursor is cloud‑synced. Keep Figma open while you work.

Step‑by‑Step Setup

1. Enable the MCP server in Figma

1. Open Figma desktop.

2. Menu → Preferences → Dev Mode → Enable MCP Server.

3. Confirm the toast message “MCP server is running on port 3845”.

1. Add the server to Cursor

1. Launch Cursor.

2. Go to Settings → MCP.

3. Click ➕ Add new global MCP server and paste:

4. Save and restart Cursor if prompted.

⚠️ HTTP vs HTTPS: The Figma MCP server only speaks plain HTTP on localhost. If you paste an https:// URL, Cursor will fail to connect (often hanging on “Loading tools”). Always use the http://127.0.0.1:3845/sse address.

1. Generate Code from a Figma Frame

1. Select a frame or component in Figma.

2. In Cursor, open the Command Palette ⇧⌘P / Ctrl+Shift+P and run “Ask Agent (Figma)”.

3. Prompt: Generate a responsive React component using Tailwind and my Button component.

4. Cursor fetches design context, writes code, and opens a new file (ChatBubble.tsx, for example).

Frequently Asked Questions (2025 Edition)

Troubleshooting quick‑table