Configurar Auto Layout: Fill Container para botones y textos

Para que botones anidados, textos, iconos y contenidos de longitud variable se redimensionen bien en Figma, asigna una función clara a cada marco: usa Ajustar al contenido (Hug contents) cuando el componente deba adaptarse a lo que contiene; Rellenar contenedor (Fill container) cuando un hijo deba ocupar el espacio que ofrece su padre; y Fijo (Fixed) solo cuando la dimensión responda a una restricción real del producto. Después añade límites mínimos y máximos si la expansión necesita un tope, revisa la cadena de tamaños entre padres e hijos y prueba etiquetas largas en anchos reducidos. Auto Layout permite diseñar comportamientos adaptables en el lienzo; no decide tus puntos de ruptura, no garantiza una experiencia móvil usable ni genera por sí solo el CSS de producción.

Esta guía explica una configuración fiable para un botón dentro de una barra, una tarjeta con texto flexible y una fila de formulario que debe soportar localización. También muestra qué revisar cuando desaparece Fill container, un padre deja de ajustarse al contenido o el diseño funciona en un marco y falla en otro.

Construye la jerarquía de marcos alrededor del contenido

Empieza por el objeto más pequeño que tenga sentido y añade sus contenedores. Para un botón con icono y etiqueta, coloca el icono y el texto como hermanos dentro de un marco horizontal con Auto Layout. Añade relleno horizontal y vertical, separación y ajuste Hug en ancho y alto. Si la etiqueta cambia de «Guardar» a «Guardar cambios», el marco debería crecer alrededor del texto y conservar el espacio interior. La lección de Figma sobre botones muestra este comportamiento y recomienda comprobar etiquetas más largas y traducciones.

Mantén fijas las dimensiones del icono si su dibujo no debe estirarse y alinéalo con la línea visual del texto. Deja que el texto use su altura natural; una etiqueta con altura fija puede recortarse cuando cambian la fuente, el interlineado o el idioma. El botón exterior puede ser, a su vez, un hijo dentro de una barra. En esa relación, el botón puede ajustarse al contenido mientras la barra controla su posición y separación. Cada capa tiene una responsabilidad de tamaño y resulta más fácil encontrar los errores.

Auto Layout sigue la jerarquía de marcos, no la impresión visual de una captura. Una capa que parece centrada puede tener posición absoluta; una fila que parece espaciada de forma uniforme quizá use una separación fija. Antes de cambiar tamaños, inspecciona el panel de capas e identifica el marco que actúa como padre. Aplica Auto Layout a ese marco y revisa dirección, alineación, separación y relleno. La guía de Figma explica los flujos horizontal, vertical y de cuadrícula, además del ajuste de líneas.

Elige Hug, Fill o Fixed según la responsabilidad

Piensa en estas tres opciones como un contrato entre una capa y su padre. Hug significa «mide mi contenido y ajústate a él». Fill significa «ocupa el espacio disponible que me ofrece el padre con Auto Layout». Fixed significa «mantén esta dimensión en el valor indicado». No son niveles de calidad y no conviene aplicar la misma opción a todas las capas anidadas.

Para un botón de acción dentro de una barra, Hug suele conservar un control compacto. Para un campo de búsqueda junto al botón, Fill puede ocupar el espacio horizontal restante mientras el botón conserva su tamaño Hug. Para un icono, una miniatura o un control con una dimensión conocida, Fixed puede ser adecuado. El título de una tarjeta puede ajustarse verticalmente al contenido mientras su columna de texto ocupa el ancho interior. La combinación correcta depende del contenido y la función del padre.

Fill solo se aplica a hijos de marcos con Auto Layout. La guía actual de Figma indica que un padre no puede ajustarse con Hug en un eje si un hijo rellena ese mismo eje: en esa dimensión, el padre pasa a Fixed. Es una causa habitual de menús de redimensionamiento confusos. Si no aparece una opción, sube por la jerarquía y comprueba si el hijo está dentro de un padre Auto Layout y si el padre tiene un tamaño definido en ese eje. No soluciones el síntoma imponiendo un ancho fijo al azar; primero aclara la cadena de tamaños.

Define la jerarquía antes de ajustar los detalles

Usa un marco vertical para una sección de página, uno horizontal para una barra y otro horizontal más pequeño para cada control de icono y etiqueta. Así podrás cambiar el ancho de la página sin mover cada hijo a mano. La captura siguiente procede del grupo local de recursos de EmviUI y muestra el panel de separación y tamaños de Auto Layout que se usa durante esta configuración.

Cuando la jerarquía esté clara, configura el comportamiento de ancho de cada padre antes de ajustar el ancho de sus hijos. Una sección puede rellenar el marco de página; un contenedor interior puede tener un ancho máximo y permanecer centrado; la barra puede rellenar ese contenedor; y el campo de búsqueda puede rellenar el espacio libre entre controles fijos o Hug. Así separas la adaptación de la página del comportamiento de cada componente. Evita crear marcos adicionales solo para imitar un espacio visual cuando el relleno o la separación del padre ya expresan esa relación.

Los consejos de Figma para páginas adaptables recomiendan Fill en secciones que deben seguir el ancho del padre y límites mínimos o máximos cuando el contenido no debe crecer sin control. El artículo trata sobre Figma Sites, así que toma sus ejemplos como principios de composición en el lienzo, no como garantía del comportamiento de tu código.

Haz que el texto y los iconos soporten contenido variable

El texto de longitud variable es la mejor prueba de una composición flexible. Prueba una etiqueta breve, otra realista y larga, y una traducción bastante más extensa que el inglés. Si un botón debe crecer con su etiqueta, deja que el marco interior use Hug y mantén un relleno uniforme. En un campo de formulario, permite que el campo se expanda dentro del padre mientras la etiqueta puede saltar encima o ocupar otra línea. No fijes el ancho a partir de la primera cadena de ejemplo. Una interfaz que solo admite el texto más corto no está preparada para contenido real.

Separa la caja de texto de la forma de fondo cuando esta tenga que seguir el contenido. En Auto Layout, el marco padre puede encargarse del relleno, borde, radio y espacio interior; el texto queda como hijo. Es más fiable que estirar un rectángulo decorativo detrás de una capa de texto independiente. Si hay un icono junto al texto, conserva su tamaño y define la separación en el padre. Si el icono es opcional, prueba ambas versiones para que el texto no herede un desplazamiento manual antiguo.

Usa las dimensiones mínimas y máximas como límites, no como sustitutos de la composición. Un campo puede rellenar el espacio disponible hasta un mínimo razonable y pasar a una disposición apilada cuando el padre sea demasiado estrecho. Una columna de contenido puede rellenarse en móvil y dejar de crecer en una pantalla muy ancha. La guía de Auto Layout de Figma documenta los límites mínimos y máximos junto a Hug, Fill y Fixed. Elige valores según el uso real del componente y prueba la transición en lugar de copiar anchos habituales de dispositivos.

Compón filas adaptables sin sobrediseñar puntos de ruptura

Prueba el componente en los anchos donde cambia su comportamiento, no solo en los ajustes preestablecidos de móvil y escritorio. Una barra puede mantener el campo de búsqueda junto a un botón en un ancho amplio y apilar los controles cuando el campo llega a su mínimo útil. Una fila de formulario puede mostrar la etiqueta y el campo uno al lado del otro en un panel espacioso y colocar la etiqueta encima en uno estrecho. El punto de ruptura útil es aquel donde la tarea deja de ser cómoda, no un número copiado de otro producto.

Auto Layout permite distribuir y ajustar hijos a nuevas líneas, pero eso no garantiza una jerarquía clara. Si una fila de acciones pasa a una segunda línea, comprueba que el orden siga teniendo sentido y que la acción principal sea fácil de encontrar. Si la composición cambia a una columna, revisa el orden de lectura, la alineación y el espacio para pulsar. Para estructuras más definidas, Grid Auto Layout puede representar filas y columnas mejor que una cadena larga de marcos horizontales anidados; elige el flujo que describa la relación real.

Un marco de diseño es una propuesta de comportamiento adaptable. La implementación web necesita restricciones CSS y puntos de ruptura que respondan al contenido. En Flexbox de CSS, los elementos pueden crecer o encogerse según su base y el espacio disponible, y su tamaño mínimo de contenido influye en el resultado; consulta la guía de Flexbox de MDN. En la entrega, documenta qué elementos pueden encogerse, cuáles deben saltar de línea y dónde cambia la estructura. El flujo de Figma a Tailwind amplía cómo traducir una decisión de diseño a código frontend mantenible.

Revisa los fallos en la cadena entre padres e hijos

Si un hijo no puede usar Fill, confirma que está dentro de un marco con Auto Layout y que el padre ofrece espacio en el eje correspondiente. Si un padre deja de ajustarse a Hug, busca hijos que usen Fill en ese mismo eje. Si una etiqueta se recorta, revisa el ancho y la altura del texto y después comprueba si algún antecesor tiene altura fija o recorta el contenido. Si una separación parece irregular, verifica que la controle el espaciado del padre y no una mezcla de gap y posiciones manuales.

Si el icono, el texto y el fondo del botón se separan, reduce el problema a un componente pequeño y prueba un cambio cada vez. Alarga temporalmente la etiqueta, oculta el icono, amplía el marco y luego estrecha el ancho. Observa qué límite falla primero. Un orden de depuración útil es: tamaño del hijo, tamaño del padre, relleno y separación, y después restricciones en los antecesores. Así evitas «arreglar» un hijo que está respondiendo correctamente a un padre con tamaño equivocado.

Valida el ancho reducido y el reajuste accesible

Comprueba la pantalla terminada en un ancho estrecho y con el zoom ampliado. El criterio Reflow de WCAG 2.2 espera que la mayoría del contenido con desplazamiento vertical quepa en un ancho equivalente a 320 píxeles CSS sin requerir desplazamiento en dos dimensiones; hay excepciones para contenido cuyo significado requiere una disposición bidimensional. Consulta el documento explicativo del W3C para conocer el criterio y sus límites. Es un requisito para contenido web, no una afirmación de conformidad de un marco de Figma por sí solo.

En formularios y barras de herramientas corrientes, comprueba que las etiquetas salten de línea, los campos sigan siendo utilizables, los controles permanezcan visibles y el orden de lectura tenga sentido. No reduzcas el texto hasta que quepa. Si una tabla u otro control realmente bidimensional necesita desplazamiento horizontal, mantén esa región acotada y permite que el contenido que la rodea se reajuste. Revisa también el orden del foco en la página implementada: una composición reorganizada visualmente no debe crear una secuencia de teclado confusa.

Usa EmviUI como una colección de ejemplos de anatomía de componentes y aplica después las reglas de tamaño a tu propia tarea. Su biblioteca de componentes incluye botones, campos, navegación, tarjetas y otros patrones que ayudan a comparar formas y estados de interfaz. Un kit de Figma acelera el punto de partida visual; aún tienes que elegir la jerarquía de capas, probar contenido localizado y comprobar el CSS y la accesibilidad del producto.

Ejecuta una prueba de redimensionamiento antes de entregar

Prepara una matriz pequeña de pruebas en vez de confiar en un único marco que «se ve bien». Incluye la composición amplia prevista, el contenedor más estrecho esperado, un caso de texto largo, un icono opcional ausente y una etiqueta localizada. Cambia el ancho del padre hasta el punto donde deba cambiar el diseño. Comprueba los límites mínimos y máximos y compara después el resultado implementado con las mismas restricciones. Anota el comportamiento esperado en cada punto: en paralelo, con salto de línea, apilado o con desplazamiento horizontal.

En un botón, verifica que Hug conserve el relleno cuando cambia la etiqueta. En un campo junto a una acción, comprueba que Fill solo consuma el espacio disponible y no expulse el botón fuera del marco. En una tarjeta, verifica que el texto salte de línea antes de que desborde el componente. Un sistema de diseño debería definir una vez esos comportamientos para componentes compartidos, pero cada pantalla de producto necesita contenido realista y su propia composición adaptable.

Para organizar los estados de los componentes, consulta variantes de Figma para los estados de interfaz. Para practicar con una pantalla completa, sigue con una página adaptable en Figma. Si el siguiente paso es implementar, continúa con el flujo de entrega de Figma a Tailwind. Estas guías cubren tareas relacionadas; aquí nos centramos en el contrato de tamaño dentro de Auto Layout.

Preguntas frecuentes