Diseñar interfaces que se adapten de forma fluida al contenido es uno de los retos más frecuentes en el trabajo con Figma. Cuando agregas un elemento a una lista o el texto de un botón cambia de longitud, todo puede desacomodarse: huecos fantasma, elementos encimados y la necesidad constante de reordenar. Auto Layout resuelve exactamente ese problema, permitiendo que los componentes reaccionen al contenido que contienen y no solo al contenedor que los rodea.
¿Por qué los constraints no son suficientes cuando el contenido crece?
Los constraints, que se utilizan para anclar elementos a los bordes de un frame, funcionan bien cuando el contenedor cambia de tamaño. Sin embargo, cuando lo que crece es el contenido interno —una transacción nueva en la lista, un texto más largo en un botón— los constraints no logran reorganizar los elementos de forma automática [0:18]. Auto Layout llena ese vacío porque redistribuye los elementos hijos según reglas de dirección, espaciado y relleno.
¿Cómo se activa Auto Layout en un elemento?
El atajo más rápido es seleccionar el elemento y presionar Shift + A [1:28]. Al hacerlo, Figma envuelve el contenido en un frame especial cuyo ícono es diferente al frame convencional: en lugar del típico numeral, muestra flechas que indican la orientación del flujo. Por defecto se activa en orientación horizontal, aunque también puedes elegir vertical o grid según el caso de uso [1:45].
¿Qué significan hug content y fill container?
Estos dos modos definen cómo se comporta el ancho o alto del componente:
- Hug content: el frame se adapta al tamaño de lo que contiene. Si el texto es corto, el botón es pequeño; si el texto crece, el botón crece con él [2:28].
- Fill container: el frame ocupa todo el espacio disponible del contenedor padre, respetando el padding definido. Útil cuando necesitas que un elemento se estire hasta los extremos [2:40].
Cuando un texto supera el espacio horizontal disponible en modo fill container, Figma lo envía a una segunda línea, aumentando la altura. Para evitarlo en elementos como botones, se aplica la opción truncate text, que corta el texto con puntos suspensivos y mantiene una sola línea [3:08].
¿Cómo construir un botón adaptable paso a paso?
Partiendo de un simple label, se le aplica Auto Layout y se configura el padding: en el ejemplo se usan 20 píxeles en laterales y 12 píxeles arriba y abajo [2:05]. Después se asigna el color de fondo del branding y un border radius de 999 para lograr bordes completamente redondeados [3:28].
Para agregar un ícono, basta con pegarlo dentro del frame y usar las teclas de navegación para reposicionarlo a la izquierda del texto [3:50]. La alineación se controla con el pequeño grid de alineación que aparece en el panel de propiedades, donde se puede centrar verticalmente con align left en el medio [4:15].
Se puede crear una variante de solo ícono duplicando el componente con Option + Shift + arrastrar o Comando + D, eliminando el texto y ajustando el padding para obtener un botón circular tipo fab button [4:35].
¿Cómo aplicar Auto Layout a una fila de transacción con contenido dinámico?
El transaction row es un elemento replicable que contiene un ícono, un bloque de contenido y un ícono secundario. Al seleccionarlo y aplicar Auto Layout, Figma detecta automáticamente el gap entre elementos hijos y el padding existente [5:40].
La configuración recomendada es:
- Ícono izquierdo: tamaño fijo de 36 x 36.
- Bloque de contenido: fill container para que ocupe todo el espacio disponible.
- Ícono derecho: tamaño fijo de 20 x 20 [6:05].
Dentro del bloque de contenido se repite el proceso: se aplica Auto Layout a cada subelemento, se asigna fill container al título y hug content al valor dinámico [6:30]. Si el nombre del restaurante o concepto excede el espacio, se utiliza truncar a máximo una línea para mantener la consistencia visual [7:10].
Finalmente, para reemplazar los elementos antiguos se usa clic derecho → Paste to replace [7:30]. Es importante verificar que cada contenedor interno también esté configurado como fill container para que toda la cadena de Auto Layout funcione correctamente al cambiar el ancho del componente padre [7:55].
Ahora que dominas Auto Layout en botones y filas de transacción, el siguiente paso es aplicar estos mismos principios al componente de categoría y al tab bar del proyecto. ¿Qué componente te resulta más complejo de adaptar? Comparte tu experiencia en los comentarios.
