Figma Make Acaba de Convertirse en una Herramienta Real de Diseño a Código
Figma Make ahora exporta React conectado a tus tokens de diseño reales y mapeos de Code Connect en lugar de marcado desechable. Esto es lo que cambió el 18 de junio, dónde aún necesita un humano, y un flujo de trabajo que puedes ejecutar esta semana.
La versión corta: Figma Make ahora te entrega código que un ingeniero de front-end no borraría de inmediato. Ese es el único motivo por el que los diseñadores hablan de esto, y es más importante que otro ajuste de velocidad.
El 18 de junio, Figma lanzó una actualización de Make orientada a producción. El titular no es "es más rápido." El titular es fidelidad. Make ahora exporta componentes conectados a tus tokens de diseño reales y mapeos de Code Connect, en lugar del marcado suelto y descartable que producía antes.
Esa diferencia es la línea entre un truco de salón y una herramienta. El código desechable se desecha. El código que referencia tu sistema se fusiona.
Los diffs que todos están publicando
Esta actualización rompió el perímetro porque la gente está mostrando pruebas. El hilo de anuncio de @figma cruzó aproximadamente 9,200 republicaciones en pocos días, y las respuestas se llenaron de diffs lado a lado de Figma a React de equipos que lo probaron con sus propios sistemas.
Esa es la señal que vale la pena notar. La señal más potente no es el texto de marketing de Figma, sino los ingenieros publicando diffs antes y después sin odiar el resultado. Cuando los escépticos guardan silencio, algo cambió.
Los diseñadores han escuchado promesas de "diseño a código" durante una década. La promesa siempre moría al contacto con una base de código real, porque el output ignoraba el sistema sobre el que estaba construida. Esta vez los diffs sobreviven al encuentro.
Lo que realmente cambió (tokens y Code Connect, no hex en bruto ni marcado)
Vélo en vivo en figma.com/make
El Make anterior leía un frame y describía lo que veía. Veía un botón azul y escribía #2D7FF9. Veía padding y escribía un valor en píxeles. El resultado se veía bien y no estaba conectado a nada.
El nuevo Make lee el mismo frame y lo resuelve contra tu sistema. El botón azul se compila como una referencia a un token, no como un valor hex congelado. El componente se compila hacia tu mapeo de Code Connect real, apuntando al componente real en tu base de código en lugar de inventar uno nuevo.
Ese es el cambio completo en una frase. La exportación dejó de describir píxeles y empezó a referenciar tu fuente de verdad.
Por qué importa en la práctica: las referencias a tokens significan que tu código hereda los cambios de tema gratis. Cambia el token, y toda exportación lo sigue. Los mapeos de Code Connect significan que la exportación reutiliza el Button que tu equipo ya mantiene en lugar de generar un casi-duplicado que se desvía en cuanto alguien lo toca.
Output del Make anterior vs. la actualización del 18 de junio
Aquí va la comparación, porque la comparación es el argumento.
| Dimensión | Make del año pasado / exportación | Actualización del 18 de junio |
|---|---|---|
| Valores de color | Hex en bruto integrado en el componente | Referencias a tokens que heredan cambios de tema |
| Espaciado | Valores en píxeles puntuales | Espaciado mapeado a tokens |
| Componentes | Marcado nuevo inventado por frame | Mapeo de Code Connect a tu componente existente |
| Relación con tu sistema | Ninguna, el output era independiente | Conectado a tus tokens y librería de componentes |
| Primer movimiento del ingeniero | Borrarlo y reescribirlo | Leerlo, conservar la estructura, refinar |
| Etiqueta honesta | Demo | Herramienta |
La columna de la derecha es la única que se gana un lugar en un pull request. La de la izquierda es el motivo por el que nadie confiaba en "diseño a código" hasta ahora.
Dónde aún te necesita
Make construye el cuerpo, no el cerebro. Exagerar esa afirmación no le sirve a nadie, así que aquí está el límite honesto de lo que hace la actualización del 18 de junio por ti.
El layout, los tokens y los andamiajes estáticos de componentes salen limpios. Todo lo que requiere una decisión sigue requiriéndote. La exportación no sabe cómo debería sentirse un estado de carga, qué pasa en un error, o si tu estado vacío debería invitar o disculparse.
| Make hace esto bien | Esto aún te necesita |
|---|---|
| Layout y estructura | Lógica de estado (cargando, error, vacío, éxito) |
| Estilado mapeado a tokens | Comportamiento de interacción y movimiento |
| Andamiajes estáticos de componentes | Accesibilidad más allá de lo obvio (orden de foco, intención ARIA, regiones en vivo) |
| Espaciado y jerarquía fieles | Datos reales, casos extremos, cadenas largas, campos faltantes |
| Estructura React inicial | Decisiones de sistema: cuándo reutilizar vs. crear un componente nuevo |
La accesibilidad merece su propia línea. Make puede agregar atributos alt y etiquetas semánticas razonables, pero no puede decidir el orden de foco, anunciar una región en vivo, ni entender que tu modal necesita atrapar el foco y devolverlo. Esos son juicios de valor sobre cómo un humano se mueve por tu interfaz, y el juicio no está en la exportación.
Los datos reales son el otro asesino silencioso. Un frame muestra una fila perfecta. Producción muestra al usuario cuyo nombre tiene 40 caracteres, el precio que es null, la lista que está vacía el primer día.
Make construye el camino feliz. Tú gestionas la realidad.
Un flujo de trabajo sensato con Figma Make esta semana
No necesitas reconstruir tu proceso. Solo tienes que insertar Make en el punto correcto y mantener un humano en las costuras. Aquí hay una versión que puedes ejecutar en un componente real esta semana.
- Primero, ten tus tokens y Code Connect realmente mapeados. Este es el prerrequisito sin glamour. Make es tan bueno como el sistema al que referencia, así que si tus tokens están a medias nombrados y tu cobertura de Code Connect es escasa, corrígelo antes de culpar a la exportación.
- Ejecuta Make en un componente bien construido, no en una pantalla completa. Elige algo con estructura clara y una historia de tokens limpia. Estás probando fidelidad, no pidiendo un milagro.
- Lee el diff como un revisor de código, no como un fan. Confirma que resolvió referencias a tokens y mapeó a tu componente real. Si inventó un valor hex o un componente duplicado, ese frame no era limpio a nivel de sistema. Corrige la fuente.
- Entrega el andamiaje al ingeniero con el trabajo de estado, datos y accesibilidad claramente marcado como suyo. La exportación es la estructura inicial. Las decisiones son el trabajo.
- Retroalimenta lo que aprendes al sistema. Cada lugar donde Make adivinó es un lugar donde tus tokens o mapeos de Code Connect eran ambiguos. Refinarlos hace que la próxima exportación sea mejor. El sistema se compone.
El patrón es humano en el bucle, no humano fuera del trabajo. Make elimina el tedioso paso de traducción. No elimina el pensamiento.
Qué hace esto a tu entregable
Vélo en vivo en atlassian.design
Esto cambia silenciosamente lo que "terminado" significa para un diseñador. Durante años el entregable era un frame perfecto al píxel y la esperanza cortés de que ingeniería lo emparejara. El emparejamiento siempre tenía pérdidas.
Ahora el frame está más cerca de ser el contrato. Si tu diseño referencia tokens reales y tus componentes se mapean a través de Code Connect, la exportación lleva tu intención al código con menos deriva. La entrega deja de ser una traducción y empieza a ser una transferencia.
Eso eleva el valor del trabajo de sistema y reduce el valor de las capturas de pantalla bonitas. Los diseñadores que ganen el próximo año son los cuyos archivos están suficientemente estructurados como para que Make produzca un output limpio. Un archivo desordenado produce código desordenado más rápido, mientras que un sistema disciplinado produce código heredable.
Así que la actualización real no es la IA. Es la presión para finalmente nombrar tus tokens correctamente y mapear tus componentes. Make acaba de hacer que esa disciplina pague de inmediato en lugar de eventualmente.
Preguntas frecuentes
La actualización del 18 de junio cambia las respuestas reales a las preguntas que los diseñadores hacen más sobre Figma Make.
¿Figma Make escribe React listo para producción ahora?
Más cerca, pero no por sí solo. La actualización produce React conectado a tus tokens reales y mapeos de Code Connect, lo que es sólido y vale la pena conservar. Aún deja el estado, la accesibilidad y los datos reales para ti. Trátalo como un borrador sólido, no como una función terminada.
¿Qué es Code Connect y por qué importa para la exportación?
Code Connect mapea un componente en tu archivo de Figma al real en tu base de código. Es la diferencia entre Make inventando un botón nuevo y Make reutilizando el Button que tu equipo ya mantiene, por lo que la exportación apunta a tu fuente de verdad en lugar de generar un duplicado.
¿Make usa mis tokens de diseño o inventa sus propios valores?
Usa tus tokens, el núcleo del cambio del 18 de junio. Las exportaciones anteriores integraban hex en bruto directamente en el marcado. La actualización resuelve los valores a referencias de tokens, por lo que tu código hereda los cambios de tema en lugar de congelar una instantánea. Un hex en bruto en el output significa que ese frame nunca estuvo mapeado a un token.
¿Dónde sigue fallando Make?
Cinco lugares aún necesitan un humano, los mismos que lista la tabla anterior:
- Lógica de estado: cargando, error, vacío, éxito
- Comportamiento de interacción y movimiento
- Accesibilidad más allá de lo obvio
- Datos reales, casos extremos y cadenas largas
- Cuándo reutilizar un componente versus crear uno nuevo
Make gestiona el layout, el estilado mapeado a tokens y los andamiajes estáticos. Los juicios de valor son donde vive el trabajo real.
¿Debería cambiar mi flujo de trabajo esta semana?
Sí, de una manera pequeña. Ejecuta Make en un único componente limpio, revisa el diff como un ingeniero, y usa lo que revela para refinar tus tokens y cobertura de Code Connect. No cambies todo tu equipo a entrega por IA de la noche a la mañana.
La conclusión
Figma Make cruzó la línea de demo a herramienta el 18 de junio. La prueba no son las aproximadas 9,200 republicaciones en el hilo de anuncio de @figma, sino los diffs de producción que los ingenieros publicaron debajo y no borraron.
El mecanismo es simple. Make dejó de describir píxeles con hex en bruto y marcado puntual, y empezó a referenciar tus tokens reales y mapeos de Code Connect. Esa es la diferencia entre código que descartas y código que fusionas.
No se lo sobrevendas a tu equipo. Make construye el esqueleto. El estado, la interacción, la accesibilidad y los casos extremos siguen siendo tu trabajo, y siempre lo serán. El movimiento más inteligente esta semana es usar la actualización como razón para finalmente tener tus tokens y Code Connect en orden, porque un sistema limpio es lo que convierte esta función de un juguete a una herramienta con la que realmente puedes lanzar.
Need a design system your code actually inherits? We build them.
Get Started
