Auto Layout en Figma: cómo se traduce a CSS Flexbox (y cuándo sigues necesitando Grid)

Si alguna vez abriste un archivo de Figma y viste "Auto Layout" activado en un frame, ya estabas viendo algo muy parecido a Flexbox: los diseñadores de Figma tomaron ese modelo mental a propósito. Entender esta correspondencia no es solo un dato curioso: es lo que te permite pasar de un archivo de diseño a CSS funcional sin adivinar cada valor de espaciado a ojo.

Qué controla realmente Auto Layout

Auto Layout es la forma en que Figma hace que un frame se comporte como un contenedor de layout real, en lugar de un simple grupo de formas posicionadas de manera absoluta. Al activarlo en un frame, obtienes un conjunto de propiedades configurables:

• Direction — si los elementos hijos se apilan vertical u horizontalmente.
• Spacing / gap — la distancia fija entre cada elemento hijo.
• Padding — el espacio entre el borde del frame y sus hijos, configurable por cada lado.
• Alignment — cómo se alinean los hijos a lo largo del eje principal y del eje secundario.
• Comportamiento de redimensionado — si el frame y sus hijos se ajustan al contenido, llenan el espacio disponible o mantienen un tamaño fijo.

Nada de esto es arbitrario. Cada propiedad existe porque corresponde a algo que un motor de layout real necesita saber, y por eso se traduce de forma tan limpia a CSS.

La correspondencia directa con Flexbox

Propiedad Auto Layout de Figma	Equivalente en CSS Flexbox
Dirección (vertical/horizontal)	flex-direction: column / row
Espaciado entre elementos	gap
Padding	padding
Alineación en el eje principal	justify-content
Alineación en el eje secundario	align-items
Ajustarse al contenido (hug)	width: fit-content / height: fit-content
Llenar el contenedor (fill)	flex: 1 o width: 100% / height: 100%
Tamaño fijo	width / height explícitos

Con esta tabla queda claro por qué Auto Layout resulta intuitivo para cualquiera que ya conozca Flexbox, y por qué Flexbox resulta intuitivo para los diseñadores que empezaron en Figma. Ambos describen el mismo modelo de caja, solo que con nombres distintos.

Dónde falla la traducción manual

Incluso con una correspondencia clara, los desarrolladores que reproducen Auto Layout a mano suelen tropezar con los mismos detalles:

• La alineación mixta se aplana. Figma permite que hijos individuales sobrescriban la alineación del grupo; es fácil pasar esto por alto y aplicar un único valor de align-items a todo, perdiendo los overrides individuales que necesitarían align-self.
• Ambigüedad entre "hug" y "fill". Un frame configurado para ajustarse a su contenido se ve idéntico a un frame de ancho fijo en un solo tamaño de viewport, pero se comporta de forma completamente distinta cuando cambia el contenido o el tamaño de pantalla. Adivinar mal aquí es una causa habitual de layouts que se rompen con contenido real.
• Se omite gap. Algunos desarrolladores siguen recurriendo a trucos con margin en lugar de gap, heredados de consejos antiguos de Flexbox; ya no es necesario ahora que gap cuenta con buen soporte en los navegadores, y hacerlo reintroduce exactamente los bugs de espaciado que gap estaba pensado para resolver.
• Los frames Auto Layout anidados se convierten en contenedores flex anidados sin ningún plan. Cada frame anidado es su propio contexto flex, y una traducción literal uno a uno puede producir más elementos wrapper de los que el layout realmente necesita.
• El padding se aplica al elemento equivocado. Es fácil aplicar el padding de un frame a un hijo en lugar de al contenedor, lo que descuadra el espaciado basado en gap entre elementos hermanos.

Cuándo Flexbox no es el objetivo correcto — recurre a Grid

Auto Layout es un modelo de un solo eje: funciona muy bien con filas y columnas, incluyendo combinaciones anidadas de ambas. Pero algunos diseños son genuinamente bidimensionales, y forzarlos en Flexbox anidado produce código más difícil de mantener que el propio diseño. Recurre a CSS Grid cuando veas:

• Un layout donde los elementos necesitan alinearse tanto en filas como en columnas al mismo tiempo — piensa en grids de tarjetas, dashboards o galerías de imágenes.
• Comportamiento explícito del tipo "este elemento ocupa dos columnas" o "dos filas", que Grid maneja de forma nativa con grid-column / grid-row y que Flexbox no puede expresar directamente.
• Diseños donde el número de columnas debe responder al ancho disponible (repeat(auto-fit, minmax(...))) en lugar de a una lista fija de breakpoints.
• Regiones superpuestas o en capas dentro de una misma grilla, algo sencillo con el sistema de posicionamiento de Grid pero incómodo con Flexbox.

Una buena regla general: si el Auto Layout de un frame de Figma solo se anida en una dirección a la vez, Flexbox es una traducción fiel. Si te encuentras construyendo una grilla de frames Auto Layout solo para simular la alineación de filas y columnas, suele ser señal de que la interfaz de Figma está compensando la falta de un modo de layout Grid bidimensional nativo, y en ese caso conviene generar CSS Grid de verdad.

Cómo lo automatiza MarkupGen

Esta correspondencia se entiende bien, pero aplicarla correctamente en cada frame, cada valor de gap y cada contenedor anidado de un archivo de diseño real es un trabajo tedioso, y es exactamente el tipo de trabajo de traducción repetitivo que MarkupGen está diseñado para eliminar. El flujo de trabajo tiene cuatro pasos: exportas el frame desde Figma con el plugin complementario, que lleva la estructura, los estilos y las imágenes directamente a tu workspace; la IA de MarkupGen construye HTML y CSS a partir de esa estructura real, mapeando automáticamente la dirección, el gap, el padding y la alineación de Auto Layout a una estructura Flexbox equivalente en lugar de dejarlo a conjeturas manuales; luego refinas el contenido, las fuentes y el layout de forma visual en un editor integrado; y por último exportas el paquete final. Los breakpoints responsive se generan automáticamente a partir de las restricciones de redimensionado del diseño, y puedes elegir el formato de salida —HTML/CSS puro, Tailwind CSS o componentes React— según tu stack. Cada exportación recibe también una puntuación de calidad automática por IA, para que veas de un vistazo si el código generado está listo para producción. El resultado prioriza HTML limpio y semántico, sin <div> anidados innecesarios, algo que importa tanto para el mantenimiento como para el SEO.

Pruébalo con tu propio diseño

Entender la correspondencia de Auto Layout a Flexbox te hace más rápido revisando código generado y más certero al identificar dónde un diseño realmente necesita Grid. Si prefieres saltarte por completo la traducción manual, prueba MarkupGen gratis con tu propio archivo de Figma, o lee la guía completa de conversión de Figma a HTML para ver el flujo de trabajo de principio a fin.