Construir un menú responsive en Figma requiere dominar dos técnicas complementarias: autolayout y constraints. Saber cuándo usar cada una —y entender por qué no siempre funcionan juntas— marca la diferencia entre un prototipo rígido y uno que se adapta a cualquier pantalla.
¿Cómo se prepara el frame base para un menú responsive?
El punto de partida es crear un frame con las dimensiones de un dispositivo real. En este caso se trabaja con un iPhone 8 Plus (414 × 736 píxeles) [0:06]. Se recoge el logo y el icono del menú existente; para poder extraerlos del componente original hay que hacer un detach del componente, lo que separa los elementos y permite manipularlos de forma independiente [0:24].
Con ambos elementos listos, se crea un frame contenedor de 414 píxeles de ancho y 40 de alto que funcionará como barra de navegación [1:04]. Logo e icono se colocan dentro de ese frame, y se le aplica un color de fondo diferente para distinguirlo visualmente del resto del diseño.
¿Cómo funciona autolayout en la barra de navegación?
Al activar autolayout en el frame de la barra, Figma reorganiza los elementos y puede alterar las dimensiones. Es habitual que el ancho pase de 414 a 408 píxeles porque autolayout aplica márgenes internos por defecto [1:37]. Para corregirlo:
- Se fija el ancho a 414 px manualmente.
- Se eliminan los paddings poniéndolos a cero [2:44].
- Se ajusta el espaciado entre elementos también a cero [3:30].
Cuando el frame contenedor del iPhone también recibe autolayout, sus hijos adoptan la propiedad hug content, así que es necesario volver a establecer ancho y alto fijos (414 × 736) [2:18].
¿Qué es fill container y space between?
Para que la barra se expanda con el contenedor, se cambia el comportamiento horizontal de la barra de fijo a fill container [3:07]. Así, el frame de navegación ocupa siempre el 100 % del ancho disponible.
El siguiente paso es acceder a los ajustes avanzados de autolayout (los tres puntitos) y cambiar el modo de espaciado de packed a space between [4:05]. Con esta configuración:
- El logo se queda a la izquierda.
- El icono se desplaza a la derecha.
- El espacio central se calcula de forma automática según el ancho del contenedor.
En la sidebar derecha, el valor del espaciado muestra auto, confirmando que Figma gestiona la distribución sin valores fijos [4:22].
¿Cuándo conviene usar constraints en lugar de autolayout?
Figma no permite combinar autolayout y constraints en el mismo elemento [5:55]. Cuando necesitas que un hijo se ancle a un punto concreto del contenedor, constraints es la opción adecuada.
Para replicar el menú con constraints se monta la misma estructura: frame de 414 × 40 con logo e icono dentro [5:00]. La diferencia está en cómo se posicionan los elementos:
- Al logo se le asigna constraint left + top: permanece fijo en la esquina superior izquierda [5:33].
- Al icono se le asigna constraint right: se ancla al borde derecho y se desplaza cuando el contenedor crece [5:40].
Después, el frame contenedor de la barra se pone en fill container sin necesidad de autolayout [5:50]. El resultado visual es idéntico al método anterior.
¿Qué ventaja exclusiva ofrecen los constraints?
Con constraints es posible indicar que un elemento se posicione en el centro del contenedor [6:15]. Al crecer el frame, el elemento se mueve proporcionalmente hacia el centro del nuevo ancho. Este comportamiento no se puede lograr con autolayout, lo que convierte a constraints en una herramienta esencial para diseños con posicionamiento relativo.
Finalmente, un design system bien estructurado facilita todo este proceso: los componentes ya están listos para reutilizarse y las soluciones de diseño quedan estandarizadas [6:35]. Tener un sistema de diseño significa menos trabajo repetitivo y más coherencia en cada pantalla.
¿Has probado a combinar ambas técnicas en un mismo proyecto? Comparte tu experiencia y las situaciones donde cada enfoque te ha resultado más útil.
