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:

1. Al logo dile que se ancle a la izquierda y arriba.
2. Al icono dile que se ancle a la derecha y arriba.
3. 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?