Figma Make es la herramienta de prompt a app de Figma: escribes una instrucción o adjuntas un diseño existente, y genera un prototipo funcional o una aplicación web operativa dentro del archivo. Cada pantalla que produce se entrega como CSS aplanado y capas sin vincular, no como variables de Figma. Esa distinción importa en el momento en que un resultado de Make se acerca a un producto real, porque los valores hexadecimales sueltos y los números de píxeles sin contexto son exactamente lo que una auditoría de cobertura existe para detectar.
La propia documentación de Figma lo confirma directamente: los Make kits, la función creada para llevar un sistema de diseño a Make, siguen convirtiendo las variables en una única hoja de estilos aplanada en lugar de preservar la estructura de tokens. Esta guía repasa qué contiene realmente una pantalla de Make, cómo exportarla sin perder gobernanza, y dónde el escaneo y la tokenización detectan lo que la generación deja atrás.
Lecturas relacionadas: la guía de tokens de diseño en Figma cubre en detalle los Primitivos y la arquitectura semántica, Buscar Valores No Tokenizados es la auditoría que detecta justo los valores sin procesar que produce una exportación de Make, y Figma MCP cubre el caso adyacente de una IA que lee un archivo que ya está tokenizado.
En resumen
- Figma Make (figma.com/make) es la herramienta de IA de prompt a app de Figma - genera prototipos funcionales y aplicaciones web, no archivos de diseño tokenizados.
- Todo resultado de Make se entrega como CSS aplanado y capas sin vincular; la propia documentación de Figma confirma que los Make kits convierten las variables en valores sin procesar, no en referencias de token preservadas.
- Copiar una vista previa de Make en Figma Design no la vincula a tu sistema de diseño - Figma indica que las capas “no están vinculadas automáticamente a tu sistema de diseño”.
- Ejecuta una auditoría de cobertura y un escaneo de valores sin tokenizar sobre cualquier elemento copiado desde Make antes de que llegue a producción.
- El modelo detrás de un proyecto de Make concreto es un ajuste, no una constante - la brecha de tokens se mantiene sin importar qué modelo generó la pantalla.
Qué es realmente Figma Make
Figma Make vive dentro de Figma como su propio tipo de archivo: abres el chat de IA, adjuntas un diseño o una imagen, describes lo que quieres, y Figma Make devuelve un prototipo funcional o una aplicación web que puedes previsualizar y refinar mediante conversación. La propia documentación de Figma lo describe como “una herramienta de IA de indicación a código que te permite convertir ideas y diseños existentes de Figma en prototipos funcionales, aplicaciones web e interfaces interactivas”. Vimos este mismo patrón antes de que existiera Figma Make: le entregas a un asistente de IA una captura de pantalla en lugar de tokens estructurados y produce un layout plausible con valores inventados. El resultado de prompt a app de Make sigue la misma lógica - solo que empaquetado como una aplicación funcional en lugar de un mockup estático.
Cómo una pantalla de Make se convierte en un archivo real de Figma
Sacar una pantalla de Make de la ventana de chat y llevarla a un archivo de diseño es una operación de copiar y pegar, no una exportación. En un plan de pago, puedes copiar una vista previa de Make como capas de diseño y pegar esas capas directamente en un archivo de Figma Design - el camino más rápido desde el prompt hasta algo que un diseñador puede editar de verdad en el lienzo. Figma es explícito sobre qué hace y qué no hace ese pegado, en sus propias Preguntas frecuentes de Figma Make:
“Los cambios en las capas de Figma Design no se aplican de vuelta al archivo de Figma Make, y las capas no están vinculadas automáticamente a tu sistema de diseño.” - Preguntas frecuentes de Figma Make
Esa única frase resume todo el problema de gobernanza en miniatura: las capas existen, se ven correctas, y nada las conecta a una variable de color, a un token de espaciado o a un componente de tu biblioteca. A partir de aquí la pregunta deja de ser filosófica y se vuelve operativa - qué se rompe realmente cuando esa brecha llega a una pantalla real.
Por qué el resultado de Figma Make rompe la gobernanza de tokens
Una pantalla de Figma Make falla una auditoría de cobertura de la misma forma que falla un mockup hecho a mano con el cuentagotas: cada relleno, trazo y estilo de texto se resuelve en un valor literal en lugar de una variable vinculada. Eso no es un fallo de Make - es una consecuencia directa de generar la interfaz como código y capas en lugar de como componentes conscientes del sistema de diseño, y aparece en cuanto escaneas el archivo. Los equipos que se saltan el escaneo envían el patrón directo a producción: una pantalla de checkout con un #0d99ff codificado a fuego junto a otra docena de azules que se supone son el mismo color de marca, y nadie lo nota hasta que un rebranding toca once de ellos.
Qué pasa cuando las variables se aplanan
Figma construyó los Make kits específicamente para que un proyecto de Make pudiera heredar paquetes npm, guías y variables de biblioteca - y ni siquiera ese camino dedicado preserva la estructura de tokens. Esa guía todavía no tiene versión en español; las preguntas frecuentes propias de Figma para los Make kits exponen la limitación con claridad:
“Los Make kits actualmente no admiten la extracción completa de tokens de diseño. En su lugar, toma un subconjunto de tus variables y las usa para generar un archivo CSS global con valores sin procesar. Esto significa que la sintaxis de las variables no se preservará exactamente como fue definida.” - Figma, Get started with Make kits
Dicho de otro modo, incluso en el mejor escenario - una biblioteca publicada, un Make kit y unas guías que le dicen al modelo cómo usarlo - terminas con una hoja de estilos de valores resueltos, no con una capa semántica. Si el camino totalmente soportado aplana los tokens, un prompt simple sin ningún kit adjunto los aplana todavía más. Esa brecha es exactamente donde el escaneo y la tokenización demuestran su valor.
Cómo exportar pantallas desde Figma Make sin romper tu sistema de tokens
Exportar una pantalla desde Figma Make significa copiar la vista previa como capas de diseño y pegarla en un archivo de Figma Design - y en el momento en que aterriza, debe tratarse como una importación sin tokenizar, no como un diseño terminado. Ejecuta el mismo escaneo que ejecutarías sobre cualquier frame hecho a mano: comprueba qué porcentaje de sus rellenos, trazos, espaciado y tipografía están vinculados a variables frente a los que están codificados a fuego, y marca lo que no lo esté. La siguiente tabla muestra la brecha directamente.
Resultado de Figma Make frente a un archivo de Figma tokenizado
| Propiedad | Resultado recién salido de Figma Make | Archivo de Figma tokenizado |
|---|---|---|
| Colores | Aplanados a hexadecimal sin procesar o valores CSS resueltos | Vinculados a variables de color, p. ej. background/default |
| Espaciado | Números de píxeles sueltos incrustados en cada capa | Vinculado a variables de espaciado, p. ej. space/4 |
| Tipografía | Tamaño y peso de fuente en línea por cada capa de texto | Vinculada a variables de tipo o estilos de texto compartidos |
| Componentes | Reconstruidos por pantalla como capas nuevas | Instancias de componente reutilizadas con variantes reales |
| Sincronización con el archivo | Copiar y pegar en un solo sentido; sin enlace en vivo con el proyecto de Make | Nativo del archivo; las auditorías y exportaciones se ejecutan directamente sobre él |
Ninguna de estas filas es un motivo para evitar Figma Make - son una checklist de lo que hay que ejecutar antes de que el resultado se publique. Es el mismo flujo de trabajo que construimos para tokenizar a mano archivos heredados, solo que apuntado a una fuente distinta.
Qué detecta realmente un escaneo
Escaneamos una selección o una página completa y extraemos cada valor sin procesar - códigos hexadecimales, espaciado, radios de borde, tipografía, gradientes, opacidad - las mismas categorías que produce por defecto una exportación de Make. Una pantalla de Make copiada y pegada normalmente no tiene nada de eso vinculado, que es exactamente lo que nuestra Auditoría de Cobertura está construida para revelar: qué porcentaje de rellenos, trazos, paddings y espacios ya están en una variable frente a los que siguen siendo un número suelto. A continuación se muestra lo que un escaneo detecta en una hoja de estilos aplanada típica de una exportación de Make, junto a cómo lucen esos mismos valores una vez estructurados como tokens.
/* Fragmento de una hoja de estilos aplanada copiada desde Figma Make */
:root {
--spacer-3: 16; /* sin unidad - necesita un calc() para convertirse en 16px */
--color-bg-primary: #0d99ff; /* hex sin procesar, sin referencia a un token */
--radius-medium: 5;
}Pasa ese mismo archivo por una exportación DTCG - el formato mantenido por el W3C Design Tokens Community Group - y esos mismos tres valores se convierten en tokens tipados y con nombre que tanto una auditoría de cobertura como un pipeline de código pueden leer.
{
"color": {
"bg": {
"primary": { "$type": "color", "$value": "#0d99ff" }
}
},
"space": {
"3": { "$type": "dimension", "$value": "16px" }
},
"radius": {
"medium": { "$type": "dimension", "$value": "5px" }
}
}Esa estructura es lo que hace que el valor sea portable: un build de Style Dictionary lee el mismo JSON y produce configuración de CSS, SCSS o Tailwind sin que nadie tenga que volver a escribir #0d99ff una segunda vez. Una vez que los valores sin procesar de una pantalla de Make se reconstruyen como Primitivos y se mapean hacia Átomos semánticos - bg/primary referenciando el mismo azul que usa cualquier otro botón - la pantalla generada por IA deja de ser un caso aislado y pasa a formar parte del sistema real. Ejecuta a la vez una auditoría de contraste contra las pautas WCAG; un modelo que optimiza para un resultado pixel-perfect no tiene noción de un requisito de ratio 4.5:1.
Make kits, elección de modelo y otros detalles que conviene conocer
Algunos detalles determinan cuán grave es realmente la brecha de tokens para un proyecto concreto, y conviene conocerlos antes de decidir cuánta limpieza manual presupuestar. Figma Make se lanzó funcionando sobre Claude 3.7 Sonnet de Anthropic, y Figma señaló en su momento que planeaba añadir más modelos más adelante - así que el modelo detrás de un proyecto de Make concreto es un ajuste, no un detalle fijo, y eso no cambia el problema de fondo. Sea cual sea el modelo que genera la pantalla, el resultado sigue siendo capas sin vincular y CSS aplanado; la brecha de tokens que cubre este artículo es arquitectónica, no específica de un modelo.
Los Make kits, las skills personalizadas y los conectores MCP son las funciones que Figma ha añadido para cerrar esta brecha desde dentro - un Make kit puede llevar paquetes npm, guías y un subconjunto de las variables de la biblioteca a un proyecto, y los conectores MCP amplían el contexto de Make de la misma forma que el servidor MCP de Dev Mode amplía un IDE. Ninguno de los dos sustituye a una auditoría; reducen la frecuencia con la que la necesitas. En un plan Starter, nada de esto está disponible - las cuentas Starter no pueden adjuntar bibliotecas de equipo para traer contexto de estilos, lo que significa que todo resultado de Make en el nivel Starter parte de cero cobertura de tokens por definición.
Cuándo una pantalla de Make no necesita una auditoría de tokens
No todo resultado de Figma Make necesita sobrevivir al contacto con una auditoría de cobertura. Un prototipo construido para comprobar si un flujo de checkout tiene sentido, una exploración desechable de tres layouts distintos de estado vacío, o una demo de cara al cliente que nadie mantendrá después de la reunión - nada de eso necesita tokens, porque nada de eso va a producción. La excepción termina en el momento en que alguien del equipo dice «usemos esto directamente» sobre una pantalla que nunca estuvo pensada como UI de producción, que es la forma más habitual en que los valores sin tokenizar entran silenciosamente en un sistema de diseño.
Veredicto final - Figma Make y Tokens de Diseño
Figma Make es una forma genuinamente rápida de convertir un prompt en algo que alguien del equipo puede recorrer haciendo clic, y esa velocidad es real. Lo que no es, es un resultado consciente del sistema de diseño: la propia documentación de Figma confirma que incluso el camino dedicado de los Make kits aplana las variables en CSS sin procesar, y una vista previa copiada no está vinculada a tu sistema de diseño por defecto. Trata cada pantalla de Make como tratarías un mockup hecho a mano por un diseñador que nunca ha visto tu biblioteca de tokens - escanéala, audítala, tokeniza lo que merezca la pena conservar, y publica el resto como prototipo, no como componente.
Sigue con la guía de tokens de diseño en Figma, Buscar Valores No Tokenizados y Figma MCP.
