Menú responsive con Auto Layout y constraints

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:009:18

Menú responsive con Auto Layout y constraints

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

Clase 6 de 29

Clase 6 / 29

Comentarios (18)18 comentarios

Harold Bennett

Andres Arias

Ariel Hernán Contini

Samuel Domínguez

Laura Rodriguez

Juan Perdomo

JOSE A. LOPEZ REDONDO

Hace 2 años

iecgerman .

Hace 3 años

José Luis Ochoa Rivas

Enrique Isasi

Laura Rodriguez

Alejandro Díaz

Samuel Domínguez

Alan Valentín Castellón Cuentas

Hace 2 años

Josué Emanuel Pérez Rodriguez

Hace un año

Josué Emanuel Pérez Rodriguez

Hace un año

Tatiana González Rodríguez

Hace 3 años

Laura Pino

Hace 2 años

Carolina Gómez

Hace un año

Cristina Belén Bascur

Hace 3 años

William Rojas Ballesteros

Hace 3 años

Miguel Alejandro Camacho Sánchez

Hace 2 años

Paola Correa

Hace 3 años

Fabian Rafael Calzadilla Andrade

Hace 3 años

Felix J. Guerra

Hace 3 años

Recursos

Diseñar un menú responsive en Figma se vuelve mucho más sencillo cuando entiendes cuándo usar Auto Layout y cuándo usar constraints. Ambas herramientas resuelven el mismo problema (que tu menú se adapte al ancho del contenedor), pero lo hacen de forma distinta y eligen una u otra cambia el control que tienes sobre cada elemento.

Esta guía es para ti si estás aprendiendo Figma y quieres montar barras de navegación que se comporten bien en distintos tamaños de pantalla, empezando por un iPhone 8 Plus de 414 px de ancho.

¿Cómo preparo el frame base para un menú responsive?

Antes de tocar Auto Layout o constraints, necesitas un punto de partida limpio.

Empieza con un frame de iPhone 8 Plus, que mide 414 x 736 px. Sobre ese frame, crea otro frame de 414 px de ancho y 40 px de alto que será la barra de navegación. Dentro mete dos elementos: el logo de Figma a la izquierda y un icono pequeño a la derecha.

Si tu logo viene de un componente y no te deja extraerlo, haz detach del componente para liberarlo y poder reutilizar sus piezas.

¿Qué es un detach de componente en Figma? Es separar una instancia de su componente maestro para editarla libremente. Lo necesitas cuando quieres extraer elementos internos que el componente no permite mover por separado.

¿Cómo armo el menú con Auto Layout paso a paso?

Auto Layout convierte tu frame en un contenedor inteligente que distribuye los elementos según reglas de espaciado.

Selecciona el frame de la barra y aplica Auto Layout desde el botón + de la sidebar derecha. Vas a notar que el ancho cambia de 414 a 408 px porque Figma añade un padding automático. Para corregirlo:

Pon todos los paddings internos en 0.
Fija el ancho en 414 px y el alto en 40 px.
Aplica Auto Layout también al frame contenedor del iPhone (736 px de alto).

Cuando metes la barra dentro del iPhone con Auto Layout, el comportamiento por defecto es hug content. Cambia el ancho de la barra a fill container para que ocupe todo el espacio horizontal disponible.

¿Cómo hago que los elementos se separen automáticamente?

Aquí está el truco que muchos pasan por alto. Por defecto, Auto Layout usa modo packed, donde los elementos se mantienen juntos con un espaciado fijo entre ellos.

Ve a los tres puntitos de la configuración avanzada de Auto Layout y cambia el modo de espaciado a space between. El logo se irá al extremo izquierdo y el icono al derecho, y Figma calculará el espacio del medio de forma automática (lo verás marcado como auto en la sidebar).

¿Qué hace space between en Auto Layout? Empuja el primer elemento al inicio del contenedor y el último al final, repartiendo el espacio sobrante entre ellos. Es ideal para barras de navegación con logo a un lado y acciones al otro.

¿Cómo logro el mismo menú usando constraints?

Los constraints son la alternativa cuando necesitas más control sobre la posición individual de cada elemento.

Duplica un nuevo frame de iPhone 8 Plus al lado del anterior para comparar comportamientos. Crea otra vez una barra de 40 px de alto, mete el logo y el icono, y aplica un color distinto para diferenciarla visualmente.

Ahora la diferencia clave: en lugar de configurar Auto Layout en la barra, selecciona cada elemento por separado y asígnale una constraint:

Al logo dile que se ancle a la izquierda y arriba.
Al icono dile que se ancle a la derecha y arriba.
A la barra contenedora aplícale fill container para que crezca con el frame padre.

Cuando el contenedor crezca, el logo se queda pegado a la izquierda y el icono a la derecha sin que tengas que tocar nada más.

¿Por qué no puedo usar Auto Layout y constraints al mismo tiempo?

Esta es una de las frustraciones más comunes en Figma. La herramienta no permite que un mismo elemento tenga Auto Layout y constraints activos simultáneamente, porque las dos lógicas chocan: Auto Layout decide la posición por flujo, mientras que constraints la decide por anclaje.

La solución es elegir según el caso. Si necesitas que un elemento se quede centrado mientras el contenedor crece, usa constraints. Auto Layout no te deja anclar al centro de esa manera.

¿Cuándo elijo Auto Layout y cuándo constraints?

La decisión depende del comportamiento que buscas en cada elemento.

Usa Auto Layout cuando quieras distribución automática, paddings consistentes y elementos que se reorganicen al cambiar contenido.
Usa constraints cuando necesites anclar elementos a posiciones específicas (izquierda, derecha, centro) sin que el contenedor reorganice nada.
Combina ambos en distintos niveles: el frame padre con Auto Layout y elementos hijos con constraints dentro de frames sin Auto Layout.

En la siguiente clase vas a montar un layout responsive completo apoyándote en un design system con componentes ya listos. Cuéntame en los comentarios: ¿cuál de las dos técnicas te parece más intuitiva para tus proyectos?

Si les pasa que no les aparece la opción Space-between en la ventana de Advanced auto layout settings a la hora de hacer responsive los elementos dentro del header, utilicen la propiedad Auto, en la opción de espaciado entre elementos.

Para hacer space-between ahora hay que darle doble clic encima del cuadro donde se muestra la alineación, el automáticamente te ajusta el diseño a space-between

Gracias, que loco, debe ser solo para la interfaz de windows o mac esa opción. Yo estoy usando figma desde el browser y no veo esa opción. Me hizo perderme...jaja

**Auto layout ** es similar a CSS, así es como yo le entendí cuando aprendí

/* Auto Layout == Flex */
.auto-layout {
    display: flex;
    align-items: center; /* flex-start, flex-end */
    justify-content: space-between; /* center */
}

Así es el autolayout haría referencia en CSS al comportamiento de las propiedades del módulo flexbox.

Como desarrollador recomendaría mas el uso de autolayout ya que se traslada mejor al código de CSS que se vaya a crear. Las constraints se asemejan a la posición absoluta que es poco usada para el desarrollo responsivo y pueden generar ciertos problemas incluso en el mismo template de Figma. Sea lo que sea es bueno conocer estas herramientas. :)

Solución para implementar los constraints 2024 en figma

seleccionar el botón que se indica en pantalla
luego nos aparecerá el constraints y podremos realizar las modificaciones necesarias.

Figma no permite el uso de constrains y autolayout al mismo tiempo

LO RESOLVISTE

Es interesante como figma está constantemente optimizando su interfaz, pues actualmente basta con hacer doble click al cuadro para realizar el space-between y es genial

Un elemento no puede tener autolayout y constrains al mismo tiempo.
Con constrains puedo jugar con comporamientos de anclaje individuales dentro del frame. cosa que no se puede con autolayout.
El autolayout automaticamente flexibiliza el tamaño del frame ajustandolo a su contenido, si quiero que el tamaño sea mas grande debo alterar la dimensión que necesito dejándola fija.

Woooooow, no sabía que podías añadirle un fill container a un frame, creí que solo se podía si era autolayout :o

Qué buen dato, no sabía que se podía aplicar 'Fill Container' a los elementos sin usar 'Auto Layout'. Lo aplicare

Es un problema que la mayor parte de los cursos asuman que la mayoría utiliza Mac, cuando la realidad es que la mayoría utiliza Windows y vaya que cabe resaltar que muchas de estas cosas explicadas en el video se logran mucho más rápido y fácil en Windows.

la mayoría de los creadores digase cualquiera que no ocupe únicamente excel, word y correos use Mac. es simplemente superior y no crashea a cada rato.

2025 solo hice autolayout a los dos frames y ya se ajustaban el frame inferior según el tamaño del frame que lo contenía y los iconos se comportaban segun el frame sin ningúna alteración por default. parece que esto es un cambio en figma

Buenas tardes, por que cuando abro los 3 puntos de Auto-Layout en las opciones avanzadas no me sale Spacing mode?

Hola Tatiana! Figma se ha actualizado... ahora cuando creas un auto layout, le das doble click en el recuadro de las barras para que se active el Spacing mode.

Resumen de la clase: Menú Responsive en Figma

1. Preparación inicial:

Se parte de un diseño basado en el tamaño de un iPhone 8 Plus (414x736 px).
Se importa un menú prehecho desde otra página con elementos como el logo de Figma.
Se usa Auto Layout para organizar el menú dentro de un Frame contenedor.

2. Uso de Auto Layout:

Al activar Auto Layout, el Frame cambia de tamaño automáticamente si no se configuran bien los ajustes.
Para evitar esto, se debe fijar el ancho del Frame contenedor (ej. 414 px).
Se coloca el menú en la parte superior del Frame del iPhone y también se le aplica Auto Layout.

3. Ajustes clave en Auto Layout:

Se eliminan los márgenes internos (padding) del contenedor para que el menú se alinee correctamente.
Se configura el ancho del menú para que se ajuste al tamaño del contenedor (en lugar de ser fijo).
Dentro del menú, los elementos se ajustan con la opción “Space between” (espacio entre elementos) en lugar de “Packed”.
Esto permite que el espaciado se adapte automáticamente al tamaño del contenedor.

4. Uso de Constraints (Restricciones) como alternativa:

Se crea otro menú, esta vez usando Constraints en lugar de Auto Layout.
Se colocan los elementos dentro de un nuevo Frame de 40 px de alto.
A cada elemento se le asigna una posición fija (por ejemplo: el logo a la izquierda, el ícono a la derecha).
Al crecer el contenedor, los elementos se mantienen en su lugar correcto.
Ventaja: los Constraints permiten posicionar elementos con mayor precisión cuando se desea un comportamiento específico (como centrar un logo de forma dinámica).

5. Conclusión:

Ambos métodos (Auto Layout y Constraints) permiten crear menús responsive.
Auto Layout es ideal para diseños fluidos donde se necesita adaptar el espaciado entre elementos automáticamente.
Constraints ofrecen mayor control individual sobre la posición de cada elemento.
En la próxima clase se utilizará un Design System con componentes ya configurados para facilitar el diseño.

cómo consigo el archivo con el que ella trabaja?

Aquí.

Puntos importantes de la clase:

Auto Layout y Constraints:
- Auto layout gestiona el espaciado y la distribución de los elementos dentro de un frame de manera automática.
- Constraints permiten controlar cómo se comportan los elementos en relación con su contenedor (fijo, centrado, alineado a los lados).
Configuraciones en Auto Layout:
- Ajustar el ancho y alto fijo del contenedor.
- Configurar el comportamiento de los elementos dentro del auto layout: space between, packed (espaciado fijo), o automático.
- Utilizar márgenes (padding) y cambiar los valores para asegurar que no haya espacios no deseados entre los elementos.
Uso de Constraints:
- Puedes definir cómo un elemento debe comportarse cuando el contenedor cambia de tamaño: alineado a la izquierda, derecha, centrado, arriba, abajo, etc.
- Ideal para casos donde auto layout no permite el comportamiento que buscamos (por ejemplo, mantener elementos fijos en el centro).
Comparación entre Auto Layout y Constraints:
- Auto layout se utiliza para layouts más fluidos y automáticos.
- Constraints son útiles cuando necesitamos control más específico sobre la posición y el tamaño de los elementos.
Responsive Design:
- Utilizar constraints para que los elementos se adapten a cambios de tamaño en el contenedor.
- Los menús responsive deben crecer o decrecer de manera proporcional al contenedor.

yo tengo problemas para mover la barra de figma despues de hacer el autolayout en el frame de iphone

No me sale el sapcin mode

Porque hay que batir el puntero como un remolino?

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

Menú responsive con Auto Layout y constraints