Wrap y min/max width en Figma Auto Layout

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:14

Wrap y min/max width en Figma Auto Layout

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 7 de 29

Clase 7 / 29

Recursos

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.

Comentarios (10)10 comentarios

Anthony Figuera

Hace 3 años

Esta muy bueno el curso, ya he aprendido varias cosas que antes me costaba aprender en otros. Gracias!

Derek Perez

yo he apredido cosas tan basicas que antes me rascaba la head y ahora veo que son tan sencillas jaja

Andres Cavedal

El curso va siendo súper util y bien explicado, además la profe me inspira a escuchar The Doors mientras hago las practicas jajja

Juan Antonio Galdo Ustares

Es que Figma cada vez se la banca sacando actualizaciones que nos permiten tener una mejor experiencia al momento de diseñar, que churo!

Estos dos minutos de explicacion fueron perfectos la profe va al grano me encanta este curso.

Victoria Sanchez

Este es de los mejores cursos de figma que he tomado, he aprendido muchas cosas que antes no tenía muy claras, gracias!

Leydi Johana Madrid Vásquez

Excelente curso, ¡Me encanta!

Luis Gonzalez

Excelente clase.

Nidia Carrillo

Hace 2 años

Es una de las mejores funcionalidades que Figma ha agregado desde el autolayout.

Miguel Alejandro Camacho Sánchez

Puntos importantes de la clase:

Propiedad Wrap:
- Permite redistribuir automáticamente los elementos dentro de un contenedor cuando este cambia de tamaño.
- Facilita el diseño responsive al hacer que los elementos se ajusten automáticamente cuando el espacio disponible se reduce.
- Funciona en disposición tanto horizontal como vertical.
Propiedades Min/Max Width:
- Controla el tamaño mínimo y máximo de los elementos en un auto layout.
- Ayuda a mantener consistencia en el diseño, sobre todo en componentes como botones o secciones que deben adaptarse a diferentes tamaños de pantalla.
- Incluso si el contenido o el contenedor cambia, los elementos respetarán sus límites de tamaño mínimo o máximo.
Diseño Responsive Multi-dispositivo:
- Gracias a Wrap y Min/Max Width, es posible crear diseños que se adapten a múltiples dispositivos de manera fácil y rápida.
- Estas herramientas simplifican el diseño responsive, permitiendo interfaces más fluidas y adaptativas.

Carolina Gómez

Hace un año

Resumen: Nuevas funciones de Auto Layout en Figma

1. Propiedad Wrap

Ahora Figma incluye una tercera opción en Auto Layout llamada Wrap.
Esta permite que los elementos dentro de un contenedor se acomoden automáticamente en varias filas o columnas cuando el espacio es insuficiente, haciendo que el diseño sea responsive de forma sencilla.
Se activa fácilmente al convertir un contenedor a Auto Layout con Shift + A, y luego seleccionando la opción Wrap.

2. Max-width / Min-width

Se pueden establecer anchos máximos y mínimos para los elementos dentro del Auto Layout.
Esto permite que, por ejemplo, un botón siempre mantenga un ancho mínimo (como 220 px), aunque su contenido cambie.
Si se define un ancho mínimo, el elemento no se hará más pequeño que ese valor, mejorando la adaptabilidad del diseño.

Beneficio principal: Estas nuevas funcionalidades permiten crear interfaces responsive de manera más rápida, fácil y efectiva, sin complicaciones adicionales.

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Wrap y min/max width en Figma Auto Layout