Figma actualizó Auto Layout con dos propiedades que cambian la forma de diseñar interfaces responsive: wrap y min/max width. Si trabajas en UI y necesitas que tus pantallas se adapten a varios dispositivos sin duplicar frames, estas funciones te permiten lograrlo en segundos.

¿Qué hace la propiedad wrap en Auto Layout?

La propiedad wrap permite que los elementos dentro de un contenedor se reacomoden automáticamente cuando el espacio se reduce. Es la base para construir layouts que respondan al tamaño de pantalla sin esfuerzo extra.

Para activarla, primero conviertes tu contenedor en Auto Layout con Shift + A. Antes solo tenías dos opciones de dirección: vertical u horizontal. Ahora aparece una tercera, wrap, que al activarse hace que los hijos del contenedor salten a una nueva fila cuando ya no caben.

¿Para qué sirve wrap en Figma? Sirve para que los elementos de un Auto Layout pasen automáticamente a la siguiente línea cuando el contenedor se hace más pequeño. Así logras un diseño responsive sin crear varias versiones del mismo frame.

El resultado es directo: reduces el ancho del contenedor y los componentes se acomodan solos, replicando el comportamiento de un flex-wrap en CSS.

¿Cómo controlo el tamaño con min y max width?

La segunda novedad es la posibilidad de fijar un ancho mínimo o ancho máximo a cualquier elemento dentro de Auto Layout. Esto resuelve un problema clásico: cuando un botón con hug content cambiaba de tamaño cada vez que el texto crecía o se acortaba.

Antes tenías dos opciones para el ancho de un elemento: fixed width o hug content. Ahora puedes mezclar lo mejor de ambos mundos al permitir que el componente se ajuste al contenido, pero dentro de un rango que tú defines.

Un ejemplo concreto del flujo: un botón mide 192 px de ancho con su contenido actual. Si le defines un ancho mínimo de 220 px, ese será su piso, sin importar que el texto interno sea más corto. Aunque el modo siga siendo Auto Layout, el botón no bajará de esa medida.

¿Cuándo uso min width en lugar de fixed width? Usa min width cuando quieras que el elemento crezca con el contenido, pero nunca se vea más pequeño que un tamaño base. Fixed width lo bloquea siempre; min width le da espacio para expandirse.

¿Qué ventaja tiene esto para sistemas de diseño?

Definir mínimos y máximos te permite mantener la consistencia visual en componentes como botones, chips o cards. Garantizas que un botón nunca se vea raquítico ni se estire de más, incluso cuando lo reutilizas con textos distintos en todo el producto.

¿Por qué estas funciones aceleran el diseño multidispositivo?

Combinar wrap con min/max width te da un control que antes requería trucos o frames duplicados. Con un solo contenedor cubres varios breakpoints y ajustas el comportamiento de cada hijo según su rol.

Algunos usos prácticos donde estas propiedades se complementan:

• Galerías de tarjetas que pasan de 4 columnas a 2 o 1 según el ancho.
• Barras de navegación que reorganizan sus enlaces en pantallas pequeñas.
• Botones que mantienen un ancho mínimo para no romper la jerarquía visual.
• Formularios donde los campos se apilan al reducir el viewport.

Después de aplicar estos ajustes, tu prototipo se siente mucho más cercano al producto final en código, porque imita la lógica que vive en CSS moderno.

¿Ya probaste wrap en alguno de tus proyectos? Cuéntanos en los comentarios cómo lo estás usando y qué componentes de tu sistema de diseño se beneficiaron más.