De CSS Flexbox a Figma Auto Layout: Mapa Propiedad por Propiedad

Cuando flexbox y auto layout hablan el mismo idioma

El auto layout de Figma no es una idea de diseño aparte de CSS flexbox. Es la propia implementación de Figma del mismo modelo de eje principal y eje transversal: un contenedor distribuye a sus hijos en una dirección, reparte el espacio sobrante a lo largo de ese eje y los alinea en el otro. Si ya conoces justify-content y align-items, la mayor parte del panel de propiedades de auto layout es un ejercicio de renombrar, no una habilidad nueva que aprender. Esta referencia recorre la correspondencia propiedad por propiedad: dirección y ajuste de línea, alineación en ambos ejes, gap y espaciado, dimensionamiento con fill y hug, y los pocos puntos donde auto layout se queda deliberadamente corto frente a flexbox completo.

Dirección y ajuste de línea: flex-direction al flow de Figma

CSS define el eje principal con flex-direction: row o flex-direction: column. Figma expone la misma elección como un ajuste de flow en el frame de auto layout: Horizontal para row, Vertical para column. También existe una tercera opción, Grid, que coloca a los hijos en columnas y filas y no tiene un equivalente único en flexbox. Toma más prestado de CSS grid.

El ajuste de línea es donde ambos se separan en alcance. flex-wrap: wrap en CSS permite que los elementos salten a nuevas líneas flex, y cada línea se convierte en su propio mini eje principal, con align-content controlando cómo se distribuyen esas líneas en el eje transversal. El toggle Wrap de Figma, disponible en un frame de auto layout Horizontal, da el resultado visual, los elementos saltan a una nueva fila cuando se quedan sin espacio, sin exponer el modelo completo de distribución de líneas detrás. Para la mayoría del trabajo con componentes y grids de tarjetas, eso es suficiente. Para un layout que depende mucho de flex-wrap junto con align-content: space-between, conviene revisar el resultado a mano después de una importación.

Alineación en ambos ejes: justify-content y align-items

justify-content distribuye el espacio sobrante en el eje principal: flex-start, center, flex-end, o uno de los valores distribuidos, space-between, space-around, space-evenly. El control de alineación a nivel de frame en Figma ofrece las mismas opciones de inicio, centro y fin, y los modos distribuidos viven dentro del ajuste Gap en lugar de una propiedad separada. Más sobre esto abajo. Un detalle se traslada exactamente igual: justify-content no tiene efecto visible una vez que algún hijo tiene flex-grow mayor que 0, porque ese hijo consume todo el espacio sobrante antes de que la alineación llegue a actuar. Configura un hijo de auto layout como Fill container en Figma y verás lo mismo: el ajuste de alineación del frame en ese eje deja de tener efecto visible, por la misma razón.

align-items fija la alineación del eje transversal para todos los hijos como grupo: flex-start, center, flex-end, o stretch. La cuadrícula de alineación en el panel de propiedades de Figma corresponde directamente a esto. Donde ambos se separan es en align-self, la propiedad CSS que anula align-items para un solo hijo. Auto layout no tiene una anulación del eje transversal por hijo a partir de 2026. ¿Necesitas un elemento fijado arriba de una fila mientras sus hermanos se centran? Eso es una posición manual fuera del flujo de auto layout, o un frame anidado, no un ajuste de una sola propiedad.

Gap y espaciado: gap, column-gap, row-gap

gap en CSS (con column-gap y row-gap como su par largo) fija un espacio fijo entre elementos flex adyacentes. row-gap solo tiene un efecto visible una vez que se activa flex-wrap: wrap y los elementos ocupan más de una línea; una fila flex de una sola línea solo usa column-gap. El valor Gap de Figma funciona igual respecto a su propio toggle Wrap: en un frame sin ajuste de línea hay un solo valor de gap a lo largo del eje principal, y activar Wrap introduce un segundo valor para el eje transversal.

Figma también integra los valores distribuidos de justify-content de CSS dentro de Gap mediante un modo Auto spacing: Between, Around y Evenly corresponden a space-between, space-around y space-evenly. Una actualización de 2026 a auto layout acercó los casos límite al comportamiento de flexbox, precisamente aquí. El auto gap ahora nunca baja de 0, lo que coincide con cómo un contenedor flex real colapsa los elementos de un space-between que desbordan hacia el inicio de la fila en lugar de dejarlos superponerse. Un solo hijo en un stack con auto-gap Between ahora se alinea al borde de inicio en lugar de centrarse, de nuevo igual que flexbox. La misma actualización corrigió el padding en hijos con Fill container para seguir el modelo border-box de CSS, así que el padding siempre se respeta por completo en lugar de comprimirse por un ajuste apretado.

Dimensionamiento: flex-grow, flex-shrink, flex-basis a Fill container y Hug contents

flex-grow le indica a un elemento cuánto del espacio sobrante del eje principal reclamar, proporcional a su factor de crecimiento. El valor por defecto de 0 en CSS significa que no crecerá más allá de su flex-basis. La opción de redimensionamiento Fill container de Figma es el equivalente en la herramienta de diseño: un hijo configurado como Fill container se estira para ocupar el espacio que queda en su frame padre de auto layout, respetando siempre el padding y el gap del frame, el mismo papel que juega flex-grow en un contenedor flex.

flex-shrink resuelve el problema opuesto: quitar espacio para que los elementos no desborden un contenedor demasiado pequeño para su tamaño combinado. Figma no expone un factor de reducción proporcional. En su lugar, un frame u objeto configurado como Fixed size mantiene su tamaño sin importar el espacio disponible, y Hug contents ajusta un objeto exactamente a sus hijos. Eso es el equivalente de flex-basis: auto en un elemento con flex-grow: 0, el dimensionamiento por defecto basado en contenido del que parte todo elemento flex antes de aplicar crecimiento o reducción.

Una restricción se traslada directamente de la propia lógica de flexbox: un frame de Figma no puede configurarse para stretch y hug en el mismo eje a la vez, igual que un elemento flex no puede crecer para llenar espacio y reducirse para ajustarse a su contenido en ese eje simultáneamente. Elige un comportamiento de dimensionamiento por eje, en CSS o en Figma.

Lo que auto layout deja fuera de flexbox deliberadamente

El propio equipo de Figma ha descrito auto layout como un subconjunto reflexivo de flexbox, no una reimplementación completa. Cubre dirección, gap, padding, alineación y redimensionamiento fill o hug, las propiedades que cargan con la mayor parte del peso en el layout de interfaz cotidiano. Lo que deja fuera son sobre todo las partes de flexbox que existen para manejar el ajuste de línea múltiple y las anulaciones por elemento: sin align-self, y Wrap es un toggle más simple a nivel de frame en lugar del modelo completo de distribución de líneas flex detrás de flex-wrap junto con align-content.

Nada de eso hace que auto layout sea incorrecto para el trabajo. Lo convierte en un vocabulario deliberadamente más pequeño, dirigido a lo que un diseñador realmente toca día a día. Las piezas que faltan son las que un desarrollador buscaría solo en casos límite.

Qué queda de una importación propiedad por propiedad

Dirección, alineación, gap y redimensionamiento fill o hug cubren la gran mayoría de un layout flexbox típico, y se corresponden con auto layout con la suficiente limpieza como para que la traducción sea sobre todo un cambio de nombre. Los puntos a revisar a mano tras cualquier importación de CSS a Figma son los que esta referencia señala directamente: una anulación align-self por hijo, y un layout con flex-wrap que depende de que align-content distribuya varias líneas de una forma específica. Todo lo demás, dirección, justify-content, align-items, gap, flex-grow y flex-shrink, tiene un lugar claro y directo en el panel de auto layout.

UnHTML lee el CSS flexbox propio de una página y configura las propiedades de auto layout correspondientes automáticamente durante la importación, recurriendo a la posición absoluta solo donde un layout realmente no tiene equivalente en auto layout, como el caso de align-self mencionado arriba. El informe de importación enumera cada caso de reserva, así que nada queda aproximado en silencio.