El Auto Layout en Figma convierte tus diseños en cajas inteligentes que responden al contenido y al tamaño de la interfaz. Aprenderás a crear botones adaptables, organizar componentes con wrap responsive y dominar alineaciones que te ponen por delante del 50% de los diseñadores de UI.

¿Qué es Auto Layout y por qué importa en diseño UI?

Auto Layout es la propiedad de Figma que transforma un frame común en un contenedor inteligente. La diferencia se nota apenas modificas el contenido: un frame normal ignora lo que pasa adentro, mientras que un frame con Auto Layout reacciona al instante.

Mira este caso del minuto [0:55]: si escribes Santiago Camargo dentro de un botón sin Auto Layout, el frame permanece indiferente al texto. Pero al activar Auto Layout, el botón se expande sobre su eje y mantiene el contenido centrado. Esa es la magia: tus componentes empiezan a sentirse replicables y consistentes.

¿Para qué sirve Auto Layout en Figma? Para crear componentes responsivos que se adaptan automáticamente al contenido, al espacio y al dispositivo, sin que tengas que ajustar cada elemento a mano.

¿Cómo crear un Auto Layout desde cero en Figma?

El flujo es directo y lo puedes practicar en menos de un minuto, tal como se muestra en [2:10].

1. Presiona la tecla T y escribe el call to action, por ejemplo: buscar en el mapa.
2. Aplica Auto Layout sobre ese texto.
3. Agrega un fill con buen contraste y ajusta el color de la tipografía para que resalte sobre el fondo.
4. Arrastra otros elementos dentro del contenedor, como un rectángulo que actúe de icono.

A medida que escribes, el fondo responde al tamaño ideal. Y si añades un nuevo objeto, el contenedor reparte las distancias según el espacio que necesita cada parte.

Cómo manipular padding y espaciado

Desde la barra de propiedades puedes cambiar el espaciado entre elementos, por ejemplo subirlo a 16 píxeles. También puedes ajustar el padding directamente desde el canvas: pasas el cursor sobre el borde superior, ves que está en 8, y lo subes a 16 si quieres más aire arriba. Después bajas el espaciado entre elementos a 8 para equilibrar la composición.

¿Qué es el wrap en Auto Layout y cómo activa el diseño responsive?

El wrap es la propiedad que permite que los objetos colapsen horizontal o verticalmente según el largo del contenedor. Es el mismo principio que sostiene la web responsive: páginas que funcionan igual de bien en pantallas pequeñas y grandes.

En [4:15] puedes ver el truco: seleccionas varios botones de descarga, presionas Shift + A y eliges la opción wrap. Al achicar el contenedor, los botones se acomodan en vertical. Al estirarlo, vuelven a alinearse horizontalmente.

¿Cómo hacer un diseño responsive en Figma? Activa Auto Layout con la opción wrap. Los componentes se reorganizarán automáticamente según el ancho del contenedor, igual que en una página web real.

Cómo combinar varios Auto Layout con sugerencia inteligente

Cuando tienes objetos ya estructurados y quieres anidarlos en un Auto Layout más grande, presionar Shift + A aplica un padding uniforme que a veces rompe tu diseño. Ahí entra el comando Control + Shift + A, que activa la sugerencia con inteligencia artificial de Figma.

En vez de aplicar un Auto Layout ciego, Figma analiza tus decisiones previas y propone una caja más pequeña dentro de la cual encajan tus contenedores existentes, respetando los paddings que ya definiste. Es útil cuando, por ejemplo, el atardecer en Monte Uhira debe quedar más cerca de la locación que la elevación.

¿Cómo funcionan hug, fix y la alineación dentro de Auto Layout?

En la barra de capas, los Auto Layout horizontales, verticales y con wrap aparecen con iconos distintos, lo que te ayuda a identificar la estructura de un vistazo.

Las dos propiedades clave para controlar el tamaño son:

• Hug: traduce a abrazar el contenido. La caja se ajusta a lo que hay adentro.
• Fix: la caja tiene un tamaño fijo que tú determinas desde afuera.
• Absolute position: te permite ignorar el Auto Layout para un elemento específico.

Cómo controlar la alineación de los componentes

La sección alignment muestra una previsualización con nueve posiciones posibles: arriba a la izquierda, centrado a la izquierda, abajo a la izquierda, arriba a la derecha, centro a la derecha, y así sucesivamente. En [7:30] se ve cómo tres rectángulos con un padding de 16 y altura fija cambian de posición al hacer clic en cada opción.

Y hay un detalle que ahorra muchísimo tiempo: con las flechas del teclado puedes mover un botón dentro del Auto Layout sin romper la estructura. Si seleccionas el botón A y el botón B con Shift + clic y presionas Command + D, duplicas ambos respetando las posiciones y la lógica responsive del contenedor padre.

Prueba crear alineaciones distintas, experimenta con el modo horizontal y el wrap, y cuéntame en los comentarios qué resultados lograste.