Blogs de la comunidad

Acortando la brecha entre el diseño y la inteligencia artificial

Educational

How to connect Figma MCP to Cursor AI

Creator of Aiverse

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

Requirement

Minimum version

Notes

Figma desktop app

≥ v127

Dev or Full seat required to turn on Dev Mode

Cursor AI code editor

≥ v0.40

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

  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:

    {
      "mcpServers": {
          "Figma":{
            "url": "http://127.0.0.1:3845/mcp"
        }
      }
    }
  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

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

Una guía visual para comprender la IA. Para colaborar mejor con el equipo de productos y desarrolladores.

Stay ahead of the curve

Stay ahead
of the curve

for designers and product teams in the
new AI-UX paradigm.

for designers and product teams
in the new AI-UX paradigm.

"¡el equipo de diseño aiverse lo logró!

"¡el equipo de diseño aiverse lo logró!

Rara vez pago por contenido, y ¡esto valió totalmente la pena!"

Rara vez pago por contenido, y ¡esto valió totalmente la pena!"

Jacob Sullivan

Director de operaciones de Faculty.ai

Jacob Sullivan

Director de operaciones de Faculty.ai

Consigue el ebook 'Patrones de AI-UX en Tendencia'

© Aiverse 2025

Designing for AI, Augmenting with AI

© 2024 AIverse. Todos los derechos reservados.

© Aiverse 2025

Designing for AI, Augmenting with AI

© 2024 AIverse. Todos los derechos reservados.