Ir al contenido

Convierte diseños de Figma en código con Cursor

Rehacer un diseño a ojo hace que espaciados, colores y estados se desvíen.

3 pasosModerada
CursorClaude CodeFigmaGitHub

Cómo se conecta

Tu IA llega a tus apps mediante pequeños conectores llamados servidores MCP.
Tu IA
CursorClaude Code
Conectores
FigmaGitHub
Tus apps
FigmaGitHub

Esta configuración es para desarrolladores frontend e ingenieros de diseño que convierten frames de Figma en componentes. El servidor MCP de Figma da a Cursor o Claude Code la estructura, las variables y capturas del frame, y GitHub permite al agente trabajar en tu repositorio y abrir una pull request. Al final tienes componentes que usan tus tokens de diseño en lugar de valores copiados a ojo.

Configúralo

3 pasos. Abre uno para ver los detalles.
  1. 1Activa Figma

    En la app de escritorio de Figma, abre un archivo de diseño, pasa a Dev Mode y activa el servidor MCP de escritorio desde el panel de inspección o desde Preferencias en el menú de Figma. Se ejecuta en local en http://127.0.0.1:3845/mcp; añade esa URL en los ajustes MCP de Cursor o con claude mcp add. Figma también ofrece un servidor remoto en mcp.figma.com si prefieres no usar la app de escritorio.

    Consejo: El servidor MCP requiere un asiento Dev o Full en un plan de pago de Figma; revisa su documentación para las condiciones actuales.

  2. 2Conecta GitHub

    Añade el servidor MCP de GitHub con un token fine-grained que pueda crear ramas y pull requests en tu repositorio de frontend. Pide al agente que liste tu carpeta de componentes para que sepa qué existe. Así no vuelve a crear un botón que ya tienes.

    Consejo: Indica en el mismo prompt dónde están tus tokens, como tailwind.config o un archivo de variables CSS.

  3. 3Construye desde un frame

    Selecciona un frame en Figma, o copia su enlace, y pide al agente que lo construya como componente usando tus tokens y componentes. El agente obtiene el contexto de código, las variables y una captura del frame y escribe el componente. Compara el resultado con el frame en el navegador al mismo ancho.

    Consejo: Los frames pequeños dan mejores resultados; construye una tarjeta o una sección de formulario, no una página entera.

Luego solo pide

Qué decir cuando esté conectado. Haz clic para copiar.
Pregunta a Cursor…Cursor

Conviene saber

Qué necesitas, qué no hace y cómo mantenerlo seguro.
Qué necesitas
  • Un plan de pago de Figma con asiento Dev o Full
  • La app de escritorio de Figma para el servidor local, o el servidor remoto
  • Cursor o Claude Code
  • Un token de GitHub con acceso a ramas y pull requests de tu repositorio
Límites
  • El agente trabaja frame a frame y puede pasar por alto interacciones, animaciones y comportamiento responsive que el frame no muestra.
  • Los archivos de Figma mal estructurados, sin auto layout ni variables, producen valores fijos en el código.
  • La accesibilidad, como etiquetas y estados de foco, tienes que revisarla tú.
Mantenlo seguro
  • El acceso a Figma es de solo lectura.
  • Usa un token de GitHub limitado a un repositorio y revisa el pull request.
Figma MCP Server (design-read) GitHub MCP Server (repository-read, issue-write, pull-request-write)

Preguntas frecuentes

Respuestas claras antes de empezar
¿Qué plan de Figma necesito?
El servidor MCP de Figma requiere un asiento Dev o Full en un plan de pago. Consulta el centro de ayuda de Figma para ver las condiciones actuales.
¿Funciona con Claude Code además de Cursor?
Sí. Ambos admiten el servidor de escritorio y el remoto de Figma. Los pasos son iguales salvo dónde añades la URL del servidor.
¿Usará mis componentes existentes?
Sí, si le dices dónde están y se lo pides. Code Connect de Figma puede asociar componentes de Figma con componentes de código, lo que hace el resultado más coherente.
¿Mis diseños salen de mi equipo?
Los datos del frame y las capturas entran en la conversación y llegan al proveedor del modelo. Revisa la política de tu empresa antes de usar diseños de clientes.

Productos implicados

Los productos que intervienen