Diseñar interfaces responsivas exige dominar cómo los autolayouts se combinan entre sí, cómo establecer límites de tamaño y cuándo conviene ignorar por completo el flujo automático. Aquí se desglosa cada técnica para que puedas replicar comportamientos propios de aplicaciones y páginas web directamente en Figma.
¿Cómo funciona fill container dentro de autolayouts anidados?
Cuando un autolayout contiene elementos con longitud fija, estos se alinean según la configuración general —izquierda, centro o derecha— sin adaptarse al espacio disponible. La diferencia aparece al cambiar esa propiedad a fill container [01:18]. En ese momento el elemento respeta el padding del contenedor pero se estira o encoge junto con él.
- Selecciona el objeto dentro del autolayout.
- En el panel de propiedades cambia el ancho de un valor fijo a fill container.
- Repite la operación con cada elemento que necesite ser responsivo.
Al aplicar esto a varios objetos simultáneamente —seleccionándolos con Shift— se obtienen tarjetas que responden de forma idéntica al redimensionar el contenedor [02:05].
¿Qué es el modo wrap y por qué importa?
El modo wrap permite que un autolayout no sea solo horizontal o vertical, sino que maneje ambas direcciones [02:24]. Cuando el espacio horizontal se reduce, los elementos colapsan a la línea siguiente, exactamente como ocurre en CSS con flex-wrap. Este comportamiento es la base para crear tarjetas que cambian de disposición horizontal a vertical de forma automática.
¿Cómo se configuran mínimos y máximos de tamaño?
Establecer un mínimo de longitud en un frame le indica a Figma que, al alcanzar ese umbral, debe reorganizar el contenido [03:41]. Por ejemplo:
- Asignar un mínimo de 200 px a la imagen de portada.
- Definir un mínimo de 240 px para la tarjeta completa.
- Configurar un máximo para impedir que crezca más allá de cierto punto —en el ejemplo, 630 px [03:26].
Cuando el frame de la imagen no puede ser más pequeño que 200 px, el autolayout en wrap colapsa a su versión vertical, generando un efecto que parece código pero es puro diseño [05:00].
¿Qué es el padding automático y cuándo usarlo?
En lugar de asignar un valor fijo, puedes escribir auto en el campo del padding [06:14]. Esto distribuye el espacio sobrante de forma equitativa entre los elementos, similar a justify-content: space-between en CSS.
Hay una regla importante: si el autolayout padre está configurado para abrazar su contenido (hug contents) y le pones padding auto a los hijos, Figma revertirá el padre a un tamaño fijo. Ambas instrucciones se contradicen porque una intenta rellenar espacio y la otra intenta ceñirse al contenido [06:51].
Para aplicar un valor universal de padding rápidamente, mantén presionado Command (o Ctrl) y haz clic sobre cualquiera de los campos de margen. Figma entenderá que deseas el mismo valor en los cuatro lados [04:22].
¿Se puede usar padding negativo?
Sí. Un padding de -34, por ejemplo, apila elementos unos sobre otros [07:16]. Es útil para mostrar avatares superpuestos o íconos agrupados. Además, en los settings del autolayout puedes alternar entre last on top y first on top para controlar qué elemento queda visualmente por encima [07:42].
¿Cómo ignorar el autolayout con posición absoluta?
Algunos elementos —como una insignia de notificación— deben flotar sobre la tarjeta sin participar en el flujo del autolayout. Para lograrlo, selecciona el objeto y en la barra de propiedades elige "Ignore auto layout" [08:24]. Esto activa la posición absoluta y recupera el panel de constraints.
- Fija la notificación a arriba-derecha para que permanezca ahí sin importar el tamaño del contenedor [08:40].
- Cambiar los constraints a arriba-izquierda reubicará el objeto en esa esquina.
¿Cómo funciona truncate text dentro de un autolayout?
Cuando un bloque de texto es demasiado largo, la opción Truncate Text recorta el contenido y añade tres puntos suspensivos al final [09:14]. Si la altura del bloque está configurada como fill container, al ampliar el autolayout verticalmente el texto completo vuelve a aparecer, adaptándose al espacio disponible [09:30].
Combinar autolayouts anidados, límites de tamaño, padding auto, posición absoluta y truncado de texto te da un control total sobre el diseño responsivo en Figma. Experimenta creando tus propias tarjetas y comparte los resultados en los comentarios.
