Lección 4 de 12 · Lectura y práctica
Auto Layout: Diseños Flexibles
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.
Del concepto a la práctica
Taller de esta lección
Auto Layout resulta especialmente útil cuando una tarjeta debe soportar nombres de profesionales y horarios de distinta longitud. La decisión clave es asignar Hug al contenido que debe crecer con su texto y Fill al elemento que debe ocupar el espacio disponible del contenedor. El objetivo no es automatizar todo, sino expresar relaciones que puedan mantenerse.
Ejemplo resuelto
Crea un botón “Elegir horario” dentro de un frame horizontal con padding de 16 px y 12 px, gap 8 y Hug en ancho y alto. Después crea una fila de resultado con nombre a la izquierda y hora a la derecha. Haz que la fila sea Fill en el ancho de la lista, mientras el texto del profesional usa Fill en ancho, permite salto de línea y usa Hug en alto; la hora conserva Hug en ancho. Así un nombre largo no desplaza la hora fuera de la fila.
Pruébalo
Construye el botón con texto e icono.
Activa Auto Layout horizontal y ajusta padding.
Cambia el texto a “Elegir otro horario”.
Amplía el frame padre y revisa qué elemento ocupa el espacio.
Error frecuente: fijar manualmente el ancho del botón. Corrígelo eliminando la medida fija y conservando padding para que el texto determine el tamaño.
Crea una tarjeta con el nombre “Dra. Valentina Ríos” y la hora “18:45”. Resultado esperado: la tarjeta conserva sus márgenes, el botón no se solapa y la fila sigue alineada al cambiar el nombre por uno más largo.
Comprueba tu resultado
Sustituye el nombre por uno de 30 caracteres y confirma que no invade la hora ni rompe el frame.
Mapa de prácticaHug ajusta el tamaño al contenido, Fill ocupa el espacio disponible de su padre de Auto Layout y Fixed mantiene la medida. Compara los tres en el mismo eje y evita intentar que el padre abrace a un hijo que llena ese eje.
Ver la infografía en tamaño completo ↗
Mapa de prácticaEl padding separa los hijos del borde del contenedor; el gap separa hijos entre sí. En una fila de 360, con padding 16 a cada lado, icono 24 y gap 8, quedan 296 para el contenido que llena el resto.
Ver la infografía en tamaño completo ↗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.
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.
Sigue con Figma desde Cero
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.