Del lienzo al código: el caos (necesario) de la IA entre Figma y el navegador

Este artículo está inspirado en “You design it. Then what? A clear map of the Figma-to-code AI mess”, publicado originalmente en UX Collective, que traza un mapa honesto del estado actual de la IA en el pipeline de diseño a código.

El truco de magia y la trampa del telón

Hay un momento muy específico que cualquier diseñador digital reconocerá: estás viendo un vídeo de demostración en Twitter o LinkedIn, alguien conecta Figma a una herramienta de IA, escribe una instrucción de cuatro palabras, y en cuestión de segundos aparece una interfaz funcional, limpia, con su CSS impecable y sus componentes bien anidados. El público aplaude. Tú te quedas mirando la pantalla con una mezcla de asombro y alivio. Por fin, piensas. El problema está resuelto.

Luego lo intentas tú. Con tu proyecto real. Con tus capas de Figma que llevan seis semanas de iteraciones, tus componentes anidados, tus auto-layouts con excepciones, tus estados hover que solo tienen sentido si conoces la lógica interna del sistema de diseño. Y la cosa se rompe. El código generado parece sacado de una plantilla de 2019. Los márgenes no existen. Los tokens de color aparecen hardcodeados. Empiezas a pensar que hiciste algo mal.

No hiciste nada mal. Lo que pasa es que el demo te enseñó una sola capa del sistema funcionando bajo condiciones de laboratorio. Tu trabajo real necesita tres o cuatro capas trabajando en sincronía, y nadie te explicó que esas capas ni siquiera hablan el mismo idioma todavía.

Arquitectura de un malentendido colectivo

El pipeline de diseño a código con IA no es una autopista. Es más bien un barrio antiguo del centro de cualquier ciudad europea: hay calles que no conectan, plazas que aparecen sin aviso, y algunos edificios históricos que simplemente no se pueden derribar aunque estorben. Para navegarlo, primero necesitas entender qué capas existen y qué hace cada una.

La primera capa es la lectura del diseño: la capacidad de la IA para interpretar lo que hay en Figma. Aquí el sistema no lee tu intención, lee tu estructura. Si tienes capas sin nombre, componentes mal organizados o estilos locales que nunca migraron a variables, la IA verá ruido. Basura entra, basura sale. El modelo de lenguaje más sofisticado del mundo no puede adivinar que ese rectángulo verde con opacidad del 40% era en realidad el estado desactivado de un botón.

La segunda capa es la traducción semántica: convertir elementos visuales en estructuras de código que tengan sentido. Aquí es donde la mayoría de herramientas actuales flojean. Un diseño puede verse perfecto en pantalla y generar HTML completamente plano, sin jerarquía, sin accesibilidad, sin la menor consideración por cómo un lector de pantalla va a interpretar ese carrusel de testimonios.

La tercera capa —la más ignorada en los demos— es la lógica de negocio. El código que genera la IA es, en el mejor de los casos, una carcasa visual. Bonita, quizás. Pero sin estados, sin gestión de errores, sin conexión a APIs reales, sin las condiciones que hacen que una interfaz sea un producto y no una maqueta interactiva.

Por qué los demos siempre mienten (un poco)

No es mala fe. Es selección natural del contenido digital: se publica lo que funciona, lo que asombra, lo que consigue el clic. Nadie sube el vídeo de cuarenta y cinco minutos en los que el modelo generó un componente que rompía el layout en móvil y hubo que rehacerlo a mano.

Lo que los mejores demos de Figma-to-code sí están mostrando de forma honesta es el potencial de una capa específica del proceso. Y ese potencial es real. La IA ya es extraordinariamente útil para generar scaffolding inicial, para traducir componentes simples y aislados, para acelerar las partes más mecánicas y repetitivas del frontend. El problema es que se vende como solución completa a lo que es todavía una solución parcial.

Es el equivalente a vender un coche mostrándote únicamente el interior tapizado. Sí, el cuero es precioso. Pero necesitas saber si el motor arranca.

El diseñador que entiende el caos gana

Aquí está la lectura que AneurisMAG quiere defender: el caos actual del pipeline IA no es un problema temporal que alguien va a resolver en la próxima actualización. Es el estado natural de una tecnología que está siendo adoptada más rápido de lo que puede madurar. Y en ese caos hay una ventaja competitiva enorme para los diseñadores que decidan entenderlo en lugar de esperar a que se simplifique.

Saber qué herramienta vive en qué capa del pipeline —Figma Dev Mode aquí, Anima o Builder.io allá, GitHub Copilot más adelante— es una habilidad que ya vale dinero. No porque conviertas al diseñador en desarrollador, sino porque lo convierte en el único perfil capaz de hablar con fluidez a ambos lados de la mesa.

El diseñador que entiende por qué el modelo generó ese código feo, que sabe limpiar su archivo de Figma para que la IA lo lea mejor, que conoce los límites de cada herramienta antes de usarla en producción: ese perfil no está siendo amenazado por la IA. Está siendo amplificado por ella.

Orden en el archivo, claridad en el output

Si hay algo práctico que llevarse de todo este análisis es esto: la calidad del código que genera la IA es directamente proporcional a la calidad del archivo de Figma que le das. No es metáfora, es literalmente el mecanismo.

Capas con nombres descriptivos. Componentes reales, no grupos disfrazados de componentes. Variables de color y tipografía en lugar de valores locales. Auto-layout aplicado con coherencia. Estados definidos en el panel de propiedades. Todo eso que quizás sentías como trabajo extra o buenas prácticas opcionales resulta que era, en realidad, el lenguaje que la IA necesita para hacer bien su trabajo.

El archivo de Figma bien estructurado es al pipeline de IA lo que el guion bien escrito es al director de cine: sin él, el talento técnico no tiene nada sólido sobre lo que construir.

No hay memo. Todavía.

La honestidad más refrescante del análisis original de UX Collective es su punto de partida: no existe todavía un estándar establecido, una guía oficial, un protocolo consensuado sobre cómo integrar la IA en el flujo de trabajo de diseño a código. La industria está improvisando en tiempo real, y los profesionales más honestos lo reconocen.

Esa ausencia de memo no es una señal de que el sector esté perdido. Es una señal de que estamos en el momento exactamente anterior al momento en que todo se estabilice. Y ese momento —incómodo, ruidoso, lleno de herramientas que prometen demasiado y entregan lo justo— es históricamente el más interesante para estar dentro.

Diseña bien tu archivo. Entiende tus herramientas. Abraza el caos con criterio. El navegador al final renderizará algo. La pregunta es si habrás entendido lo suficiente para saber exactamente por qué.