Practica: Construye una barra de navegación responsive

Concepto clave

Auto Layout en Figma es como construir con bloques de LEGO inteligentes. Imagina que cada elemento de tu diseño es un bloque que se conecta automáticamente con los demas, manteniendo el orden y la estructura sin importar como los muevas o cambies de tamano. En el mundo real, es similar a como los estantes de una biblioteca se ajustan para acomodar libros de diferentes tamanos, manteniendo siempre una organizacion coherente.

Para una barra de navegacion responsive, Auto Layout funciona como un sistema de rieles invisibles que mantiene tus botones, logos y elementos de navegacion perfectamente alineados y distribuidos, adaptandose a diferentes anchos de pantalla. Esto es crucial porque en el diseno de productos digitales, los usuarios acceden desde dispositivos con resoluciones variadas, y tu interfaz debe verse profesional en todos ellos.

Como funciona en la practica

Vamos a construir una barra de navegacion basica paso a paso:

1. Crea un frame nuevo con las dimensiones de 1440x80px
2. Dentro del frame, dibuja un rectangulo que ocupe todo el ancho y alto - este sera el fondo de tu barra de navegacion
3. Agrega un texto para el logo en la esquina izquierda (por ejemplo, "MiApp")
4. Crea 4 botones de navegacion: Inicio, Productos, Acerca de, Contacto
5. Selecciona todos los botones y aplica Auto Layout (Shift+A)
6. Configura el espaciado entre elementos a 24px y la alineacion a "Center"
7. Ahora selecciona el logo y el grupo de botones, y aplica Auto Layout a estos dos elementos
8. Configura la distribucion a "Space between" para que el logo quede a la izquierda y los botones a la derecha

La magia ocurre cuando cambias el ancho del frame principal: veras como todos los elementos se redistribuyen automaticamente manteniendo sus relaciones y proporciones.

Caso de estudio

Consideremos la barra de navegacion de una aplicacion de e-commerce llamada "ShopFast". En su version desktop muestra:

Al implementar esto con Auto Layout, creamos un grupo principal con distribucion horizontal. Dentro de este, tenemos tres grupos secundarios: logo (izquierda), busqueda (centro con fill container), y grupo derecho (menu + carrito). Cuando el ancho se reduce, el grupo de busqueda se ajusta primero, y en breakpoints especificos, el menu principal se oculta y aparece el icono de hamburguesa.

Un dato importante: el 67% de los usuarios abandonan sitios web con navegacion que no se adapta a su dispositivo. Por eso dominar Auto Layout para elementos de navegacion no es solo tecnico, es estrategico para la retencion de usuarios.

Errores comunes

• No usar constraints correctamente: Olvidar configurar como deben comportarse los elementos cuando el contenedor cambia de tamano. Solucion: siempre define constraints (top, bottom, left, right, scale) para cada elemento dentro del Auto Layout.
• Anidar demasiados niveles de Auto Layout: Crear estructuras muy complejas que dificultan el mantenimiento. Solucion: mantén la jerarquia lo mas plana posible, generalmente 2-3 niveles son suficientes para una barra de navegacion.
• Ignorar los breakpoints: Asumir que un solo diseño funcionara para todos los dispositivos. Solucion: crea frames para los breakpoints mas comunes (mobile: 375px, tablet: 768px, desktop: 1440px) y ajusta tu Auto Layout en cada uno.
• No probar la interactividad: Crear la estructura visual pero olvidar como se comportara realmente. Solucion: usa el prototipo de Figma para simular como se veria al hacer scroll o cambiar entre estados.

Checklist de dominio

1. Puedo crear un grupo con Auto Layout y configurar correctamente direccion (horizontal/vertical), alineacion y espaciado
2. Se como usar "Fill container" para elementos que deben expandirse (como campos de busqueda)
3. Entiendo y aplico constraints a elementos dentro de grupos con Auto Layout
4. Puedo crear variantes responsive para al menos 3 breakpoints diferentes
5. Se convertir elementos en componentes reutilizables dentro de mi barra de navegacion
6. Puedo explicar por que elegiria Auto Layout sobre agrupar manualmente para un caso especifico
7. Verifico que mi diseño mantiene coherencia visual al cambiar entre diferentes tamanos de pantalla

Construye una barra de navegacion responsive para una app de fitness

En este ejercicio practico, crearas una barra de navegacion completa para una aplicacion de fitness llamada "FitLife". Sigue estos pasos:

1. Crea un nuevo archivo en Figma y establece 3 frames con los siguientes anchos: 375px (mobile), 768px (tablet), y 1440px (desktop). Altura sugerida: 80px para desktop/tablet, 60px para mobile.
2. Para el frame de desktop (1440px):
   • Agrega el logo "FitLife" en la esquina superior izquierda
   • Crea un menu horizontal con: Inicio, Entrenamientos, Nutricion, Comunidad, Mi Perfil
   • Agrega un boton "Comenzar Ahora" en la esquina derecha
   • Aplica Auto Layout para organizar todos estos elementos
3. Para el frame de tablet (768px):
   • Mantén el logo en la izquierda
   • Reduce el espaciado entre items del menu
   • El boton "Comenzar Ahora" debe cambiar a un tamano mas pequeno
   • Ajusta las propiedades de Auto Layout para que se adapte al nuevo ancho
4. Para el frame de mobile (375px):
   • Mantén el logo visible
   • Reemplaza el menu horizontal por un icono de hamburguesa (tres lineas)
   • El boton "Comenzar Ahora" se convierte en un icono de "+
   • Configura el Auto Layout para distribuir: logo, espacio flexible, icono hamburguesa, icono "+"
5. Convierte los elementos reutilizables (logo, botones de menu, iconos) en componentes
6. Prueba cambiando el ancho de cada frame para ver como se adaptan los elementos

Entrega: Captura de pantalla de los 3 frames mostrando la barra de navegacion en cada breakpoint.

• Recuerda usar "Fill container" para los espacios vacios que deben expandirse entre elementos
• Cuando conviertas elementos en componentes, usa nombres descriptivos como "btn-nav-primary" o "icon-hamburger"
• Para el menu mobile, considera crear un componente separado que contenga el menu desplegable completo

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.