Auto Layout: El Superpoder de Figma

Auto Layout es la funcionalidad que separa a los diseñadores principiantes de los profesionales en Figma. Permite crear diseños que se adaptan automáticamente al contenido, similar a Flexbox en CSS. Una vez que lo dominas, nunca volverás a mover elementos pixel por pixel.

¿Qué es Auto Layout?

• Un frame con Auto Layout organiza sus hijos automáticamente en fila (horizontal) o columna (vertical)
• Se adapta al contenido: si el texto crece, el botón crece con él automáticamente
• Atajo: selecciona elementos y presiona Shift + A para activar Auto Layout
• Piensa en Auto Layout como una caja flexible que sigue reglas de dirección, espaciado y padding
• Es equivalente a display: flex en CSS — si sabes Flexbox, ya entiendes el concepto

Propiedades principales

• Dirección: horizontal (fila) o vertical (columna) — elige según cómo quieres que se apilen los elementos
• Gap: el espacio entre elementos hijos — uniforme y consistente sin mover nada manualmente
• Padding: el espacio interior entre el borde del frame y su contenido (arriba, abajo, izquierda, derecha)
• Alignment: cómo se alinean los hijos (inicio, centro, fin, space-between) — igual que en Flexbox
• Hug contents: el frame se ajusta al tamaño de su contenido / Fill container: el hijo ocupa todo el espacio disponible

Casos de uso prácticos

• Botones: texto + ícono con padding automático que se adapta al largo del texto
• Cards: imagen + título + descripción + botón apilados verticalmente con espaciado consistente
• Navegación: logo + links + botón CTA en una fila horizontal con space-between
• Listas: elementos repetidos en columna con el mismo gap entre cada ítem
• Formularios: labels + inputs apilados verticalmente con gap uniforme

Auto Layout anidado

• El verdadero poder está en anidar Auto Layouts: una card (vertical) dentro de un grid (horizontal)
• Ejemplo: una fila de 3 cards donde cada card tiene su propio Auto Layout vertical interno
• Combina horizontal y vertical para layouts complejos como dashboards o feeds
• Usa 'Fill container' en hijos para que se repartan el espacio disponible equitativamente
• Con anidamiento puedes recrear prácticamente cualquier layout de una web real

Consejo: Empieza por hacer botones con Auto Layout. Una vez que entiendas cómo el padding se adapta al texto, tendrás la base para aplicarlo a cualquier componente.