Dominar auto layout anidado en Figma te permite construir interfaces responsivas que se comportan como código real, sin escribir una sola línea. Aquí aprendes a combinar auto layouts dentro de otros, fijar mínimos y máximos, y manejar paddings automáticos, negativos y posiciones absolutas para diseñar como un profesional de UI.

¿Cómo funcionan los auto layouts dentro de otros auto layouts?

Cuando metes un auto layout dentro de otro, el comportamiento de los elementos hijos depende de cómo configures su longitud. Por defecto, Figma asigna un valor fijo (por ejemplo, 178 px), lo que hace que el objeto se quede anclado a la izquierda aunque amplíes el contenedor padre.

La diferencia visual entre dos tarjetas idénticas aparece justo aquí. Una mantiene sus elementos pegados a un lado; la otra los expande para llenar el espacio disponible. La clave está en una propiedad llamada Fill Container [02:15].

¿Cuándo usar fixed width o fill container?

Usa fill container cuando quieras que un elemento hijo respete el padding del contenedor padre y se estire o encoja con él. Selecciona el objeto, abre el menú de auto layout y cambia la longitud de fijo a Fill Container.

¿Qué hace Fill Container en Figma? Hace que el elemento hijo ocupe todo el ancho disponible del contenedor padre, respetando los márgenes definidos por el padding. Es la base para diseños responsivos dentro de auto layouts.

Puedes aplicarlo a varios objetos a la vez seleccionándolos con shift. Así logras que botones, imágenes y textos dentro de una tarjeta crezcan juntos cuando el contenedor cambia de tamaño.

¿Cómo aplicar mínimos y máximos en auto layout wrap?

Un auto layout en modo wrap combina dirección horizontal y vertical, y reacciona cuando el contenido cruza ciertos umbrales. Esa magia que parece código se logra definiendo un mínimo y un máximo de longitud o altura [04:30].

El proceso para construirlo desde cero sigue estos pasos:

1. Selecciona los dos elementos base, por ejemplo Cover Art y Copy, y cópialos a un frame nuevo.
2. Crea un auto layout que los recubra usando Shift+A.
3. Aplica un stroke blanco escribiendo FF y un padding universal de 16 manteniendo Cmd al hacer clic en cualquiera de los valores.
4. Cambia la dirección a wrap para activar el comportamiento bidimensional.
5. Define un mínimo de 240 para la tarjeta y un mínimo de 200 para el frame interno.
6. Configura ambos hijos en Fill Container para que respondan al espacio.

Cuando reduces el contenedor por debajo de 200, el frame colapsa a una versión vertical automáticamente. Y si intentas agrandarlo más allá del máximo definido (por ejemplo, 630), Figma te muestra un aviso de Max en pantalla [05:50].

¿Por qué importan los límites en diseño responsivo?

Los límites permiten que un mismo diseño se adapte a múltiples tamaños sin duplicar pantallas. Cuando un componente cruza su mínimo, el auto layout busca la siguiente versión más inteligente, normalmente cambiando de horizontal a vertical, y los elementos internos se reorganizan solos.

¿Qué hacen el padding automático, negativo y la posición absoluta?

No siempre quieres un padding numérico fijo. A veces necesitas que el espacio entre elementos se rellene solo según el contenedor [08:40].

Para lograrlo, escribe la palabra AUTO en el campo de padding. Figma distribuirá el espacio dinámicamente, siempre que el contenedor padre tenga un tamaño fijo. Si el padre intenta abrazar el contenido y los hijos quieren rellenar, hay una contradicción y Figma fuerza un valor fijo automáticamente.

¿Cómo apilar avatares con padding negativo?

Un padding negativo, como -34, te permite superponer elementos: avatares de comentarios, íconos apilados, badges encimados. Es un recurso visual muy común en feeds y notificaciones [09:50].

Puedes controlar qué elemento queda visualmente encima yendo a settings del auto layout y alternando entre last on top y first on top.

¿Qué es ignore auto layout en Figma? Es una opción que saca un objeto del flujo del auto layout y lo posiciona de forma absoluta dentro del contenedor, conservando el resto de la composición. Útil para badges de notificación o elementos flotantes.

Cuando aplicas ignore auto layout en la barra de propiedades, vuelven a aparecer los constraints de alineación. Así puedes anclar una notificación arriba a la derecha y mantenerla ahí sin importar cómo cambie el tamaño del contenedor [11:20].

¿Cómo truncar texto largo en un auto layout?

En capas con texto extenso, activa la opción truncate text dentro de las propiedades de tipografía. Figma cortará el texto y añadirá tres puntos suspensivos al final. Si la altura del bloque está en fill container, el texto se expandirá completo cuando haya espacio vertical suficiente [12:30].

Este detalle marca la diferencia entre un mockup y una interfaz que se siente real. Combina truncado con auto layouts anidados y obtienes tarjetas que respiran con el contenido.

Ahora te toca a ti: combina mínimos, máximos, paddings automáticos y posiciones absolutas en tus propios componentes. Comparte en los comentarios qué resultados conseguiste y qué experimentos hiciste con tus interfaces.