Community blogs

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.
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
Requirement | Minimum version | Notes |
---|---|---|
Figma desktop app |
| Dev or Full seat required to turn on Dev Mode |
Cursor AI code editor |
| Free & Pro both supported |
GitHub Copilot / local LLM | Optional but improves multi‑file generation | |
Operating System | macOS 10.15+, Windows 10+, Ubuntu 22.04+ | Ensure firewall allows port 3845 |
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
Enable the MCP server in Figma

Open Figma desktop.
Menu → Preferences → Dev Mode → Enable MCP Server.
Confirm the toast message “MCP server is running on port 3845”.
Add the server to Cursor

Launch Cursor.
Go to Settings → MCP.
Click ➕ Add new global MCP server and paste:
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.
Generate Code from a Figma Frame
Select a frame or component in Figma.
In Cursor, open the Command Palette ⇧⌘P / Ctrl+Shift+P and run “Ask Agent (Figma)”.
Prompt:
Generate a responsive React component using Tailwind and my Button component.
Cursor fetches design context, writes code, and opens a new file (
ChatBubble.tsx
, for example).
Frequently Asked Questions (2025 Edition)
Troubleshooting quick‑table
Symptom | Likely Cause | Fix |
Figma MCP tool stuck on "Loading tools" (yellow dot) | Endpoint misconfigured (should end with /sse) or no frame selected in Figma or https (wrong) vs http (correct) | Verify the URL in Cursor ends with /sse, ensure the Dev Mode MCP server is running, select a frame in Figma, then refresh tools |
Cursor hangs on “Discovering MCP tools” | Figma not open or server disabled | Re‑enable MCP in Figma; keep the file active |
Error 401 in Cursor logs | Figma version < 127 | Update Figma desktop from figma.com/download |
Styles missing in generated code | Layer styles not published to lib | Publish or link styles; tick Include variables before running MCP |