Guía: De Figma a código con IA y MCP

De Figma a código: Una guía paso a paso con IA

Para automatizar la transición del diseño en Figma a código, utiliza el Modo Dev con MCP. Requisitos: acceso al Modo Dev de Figma, un asistente de IA como Cursor basado en GPT-4o o un modelo similar, comprensión de principios básicos de maquetación y habilidades para crear indicaciones precisas. El proceso se basa en una estructura sistemática de marcos para garantizar repetibilidad.

Estructura de nombres de marcos:

%nombrePágina %tipo [%anchoPantalla · %tema]

Ejemplo: Inicio predeterminado [1920 · Claro]. Puntos de ruptura: 1920px, 1280px, 768px, 375px. Temas: claro/oscuro.

Preparando tu maquetación

Sigue cinco reglas clave para minimizar errores de la IA.

Regla 1: Contenido y estilos. Inserta textos y gráficos finales en contenedores de tamaño real. Crea estilos: Claro/Primario, Oscuro/Primario.

Regla 2: Estructura de bloques. Usa marcos separados para bloques (Hero, Menú, Pie de página), no solo páginas completas. Esto permite ediciones localizadas.

Regla 3: Lógica de redimensionamiento. Crea un marco de maquetación con indicadores visuales: flechas para estiramiento, tamaños fijos, ancho mínimo/máximo, ajustes.

Regla 4: Estados de la interfaz. Separa marcos para hover, activo, deshabilitado. Muestra el contexto completo, p. ej., Menú Hover [1920 · Claro].

Regla 5: Temas. Duplica marcos para claro/oscuro con colores de los estilos.

Habilita MCP: Modo Dev → Inspeccionar → MCP (Estado del servidor: Habilitado, Fuente de imagen: Descargar). Espera SVG/raster de baja calidad—reemplaza manualmente o mediante indicaciones.

Pasos para transferir a código

Trabaja paso a paso, evitando solicitudes globales. La IA debe analizar capas de Figma MCP, no capturas de pantalla.

Paso 1: Base del proyecto

Crea una indicación inicial:

Estamos construyendo un sitio web sobre [descripción]. Figma MCP: [enlace]. Puntos de ruptura en nombres de marcos: [lista]. Recursos de Figma. Pasos: aclarar preguntas.

La IA analizará y lo dividirá en pasos. Añade navegación.

Paso 2: Agente con reglas

Genera AGENTS_BASE.md para fijar el estilo:

• Reutiliza componentes.
• Diseño responsivo por puntos de ruptura.
• Soporte para retina (@2x).
• Sin sobrescribir código sin confirmación.

Escribe en ruso o inglés—la calidad no cambia.

Paso 3: Ensamblaje iterativo

Refina bloques por marcos:

En Característica [768 · Claro] galería con desplazamiento horizontal: [enlace]. +20px de relleno inferior para la barra de desplazamiento.

Pasa al siguiente bloque después de corregir.

Paso 4: Reemplazo de recursos

• Manual: renombra archivos.
• Mediante IA:

> En Hero, reemplaza [id] con [email protected].

> En Lista de características: ic_unlimList_BENEFIT_24 (32x32px) en lugar de marcadores de posición.

Paso 5: Funcionalidad

Añade de forma aislada:

Localización: desplegable RU/EN mediante botón [nombre]. Aclarar preguntas.

Soporte: responsivo, retina, temas, animaciones.

Conclusiones clave

• La nomenclatura sistemática de marcos garantiza repetibilidad.
• Las instrucciones visuales de maquetación compensan las debilidades de la IA en diseño automático.
• Un enfoque paso a paso con un agente minimiza regresiones en el código.
• El reemplazo manual de recursos es esencial para la calidad.
• Enfócate en los detalles: no asumas todos los roles a la vez para evitar el agotamiento.

— Editorial Team