# 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.

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.

## Pasos

1. **Activa 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. **Conecta 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. **Construye 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.

## Prompts para probar

- Construye el frame seleccionado de Figma como componente React en src/components/PricingCard.tsx usando nuestros tokens de Tailwind.
- Obtén las variables de este frame y relaciónalas con nuestras variables CSS en tokens.css.
- Rehaz esta sección de formulario con nuestros componentes Input y Button en lugar de crear otros nuevos.
- Compara el componente que has escrito con la captura de Figma y corrige las diferencias de espaciado.
- Crea una rama, haz commit del componente nuevo y abre una pull request con un enlace a la captura de Figma.

## 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ú.

## Notas de seguridad

- El acceso a Figma es de solo lectura.
- Usa un token de GitHub limitado a un repositorio y revisa el pull request.

## Servidores MCP

- [Figma MCP Server](https://help.figma.com/hc/en-us/articles/32132100833559): design-read
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## Preguntas frecuentes

**¿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.

## Herramientas

- **[Figma](https://suiteintent.com/t/figma?m=ES)**: Diseño colaborativo de interfaces en el navegador. · Ideal para: Diseño y desarrollo en un mismo archivo · Plan gratis · Gratis para estudiantes
- **[GitHub](https://suiteintent.com/t/github?m=ES)**: Alojamiento de código, incidencias y pull requests. · Ideal para: Equipos que revisan código con pull requests · Plan gratis · 10000