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.
Respuesta rápida: Auto Layout en Figma: Auto Layout es una propiedad de los frames que ordena capas automáticamente según dirección, gap, padding, alineación y reglas de tamaño. En Figma se activa con
Shift + A. Usalo para crear botones, cards, listas, navbars, dashboards y pantallas que responden cuando cambia el contenido, en vez de mover elementos a mano.
¿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.
Auto Layout en Figma: propiedades que tenés que dominar
La documentación oficial de Figma explica que los elementos dentro de un frame con Auto Layout se organizan por dirección, spacing, padding, alineación y otras propiedades. Si agregás, sacás o redimensionás elementos, el layout se ajusta sin reposicionar todo manualmente.
| Propiedad | Qué controla | Ejemplo práctico |
|---|---|---|
| Dirección | Define si los hijos van en vertical, horizontal o grid. | Lista vertical, navbar horizontal o galería en grid. |
| Gap | Define el espacio entre elementos. | 8px entre ícono y texto, 16px entre cards. |
| Padding | Define el espacio interno del frame. | Botón con 12px vertical y 20px horizontal. |
| Hug contents | El frame toma el tamaño mínimo que necesita su contenido. | Botón que crece cuando el texto es más largo. |
| Fill container | Un hijo ocupa el espacio disponible dentro del padre. | Texto que se estira dentro de una card. |
| Fixed | Ancho o alto se mantiene constante. | Avatar de 40x40 dentro de una fila flexible. |
| Wrap | Permite que elementos horizontales pasen a otra línea. | Chips de filtros que bajan cuando no entran. |
| Ignore auto layout | Saca un elemento del flujo normal del Auto Layout. | Badge, notificación o elemento flotante sobre una card. |
Mini-proyecto: componente responsive con Auto Layout
Construí este componente para entender Auto Layout como se usa en trabajo real de UI/UX.
- Creá un frame llamado
PricingCardy activá Auto Layout vertical conShift + A. - Agregá título, precio, lista de beneficios y un botón. Configurá gap de 12px y padding de 24px.
- Hacé que el botón use Auto Layout horizontal, con texto + ícono, padding interno y Hug contents.
- Probá cambiar el texto del botón: el botón debería crecer sin romper la card.
- Agregá una fila de chips con Auto Layout horizontal y Wrap para que bajen de línea si no entran.
- Duplicá la card en una fila de 3 columnas. Usá Fill container donde necesites que todas ocupen el mismo ancho.
Errores comunes con Auto Layout
- Usar grupos en vez de frames: Auto Layout funciona sobre frames. Si agrupás todo, perdés reglas responsive.
- Poner todo en Fixed: sirve para avatares o íconos, pero rompe botones y cards con texto variable.
- Confundir Hug y Fill: Hug abraza contenido; Fill ocupa el espacio del padre. Usalos según la dirección del layout.
- No anidar: un diseño profesional suele combinar Auto Layout interno para botones, cards, filas y pantalla completa.
Fuente oficial: Guide to auto layout - Figma Help Center. Figma documenta dirección, spacing, padding, Hug contents, Fill container, Fixed, Wrap e Ignore auto layout como propiedades clave.
