Cómo diseñar un menú responsive

Aprende cuáles son los pasos para diseñar un menú responsive en Figma, un tema que cubrí recientemente en un tutorial en mi canal de YouTube.

Si quieres ganar tiempo y usar el menú en tus proyectos lo tienes disponible en el UX fomo Design system, es fácil y rápido, duplícalo y empieza a diseñar.

Anatomía del menú responsive

La anatomía del componente es la siguiente:

• Cuenta con 3 formatos que se adaptarán a pantallas de teléfonos móviles, tablets y ordenadores de escritorio.
• Tiene un espacio para mostrar el logo o branding de la empresa o proyecto.
• Un bloque con enlaces que será el menú principal.
• Y un campo de búsqueda.

Ya conoces la estructura del menú, ahora vamos a construir paso a paso el componente.

Pasos para diseñar el menú responsive

Como siempre aplicaremos la metodología atomic design diseñando primero los elementos más pequeños.

Utilizaremos la combinación de nomenclaturas de tokens y componentes que aplicamos a todos nuestros proyectos de UX y UI.

Crear el ítem del menú

• Crea una cadena de texto de color negro #000000 con la fuente Inter, con tamaño de 16 px y una altura de línea de 24 px.
• Selecciona la cadena de texto y genera un Auto Layout simple con nombre LinkMenu.
• Añade a LinkMenu un color de fondo blanco #FFFFFF, una altura de 48 px y 12 px en padding-top y padding-bottom.
• Convierte el Auto Layout en un componente.
• Selecciona la cadena de texto y crea una propiedad de texto llamada label.

Construcción del menú principal

Con el ítem del menú creado vamos a diseñar otro componente del menú responsive.

• Crea varias instancias del componente LinkMenu para secciones como Proyectos, Servicios, Acerca de, Contacto y Blog.
• Añade los nombres utilizando el campo de la propiedad label que creaste en el paso anterior.
• Selecciona todas las instancias y crea un Auto Layout llamado MainMenu, ajustando el gap horizontal a 16 px.

Campo de búsqueda

El campo de búsqueda del menú responsive es muy simple.

• Crea una cadena de texto de color gris #666666 con la fuente Inter, con tamaño de 14 px y una altura de línea de 22 px.
• Selecciónala y crea un Auto Layout, ponle de nombre InputSearch.
• Ajusta los paddings: 8 px en top y bottom y 16px en left y right.
• Crea un componente del mismo nombre.

Diseño del Botón

El diseño del componente botón es muy parecido al del buscador, sólo cambian algunos parámetros.

• Crea un botón reutilizando una cadena de texto, con ella genera Auto Layout de nombre Button.
• Aplica color de fondo gris oscuro #444444 y color blanco #FFFFFF a la cadena de texto.
• Ajusta los valores de paddings del Auto Layout: 12 px en top y bottom y 16 px en left y right.
• Pon un valor de 4 px en el campo de bordes redondeados.
• Selecciona el Auto Layout y conviértelo en un componente.
• Crea una propiedad de texto llamada label.
• El componente Button necesita otro tamaño, crea una variante del componente Button.
• Renombra la propiedad Property 1 como size.
• Usa nombres lg (large) y md (medium), para las 2 variantes que ahora tiene el componente Button.
• Ajusta los valores 14 px y 16 px de tamaño de texto y alto de línea a la variante md.
• Cambia el valor de paddings top y bottom en 8 px.

Diseña el buscador

El buscador del menú lo vamos a diseñar utilizando los elementos de los pasos anteriores.

• Arrastra al canvas dos instancias, una del componente InputSearch y otro del componente Button.
• Selecciona las instancias y crea con ellas un Auto Layout llamado Search.
• Ajusta la alineación de los elementos de su interior: centro horizontal y vertical.
• Aplica un valor de 8 px en el campo Horizontal gap between items.

Navegación y búsqueda

• Arrastra al canvas una instancia del componente MainMenu y otra del componente Search.
• Selecciona las instancias y crea un Auto Layout de nombre container.
• Ajusta el comportamiento de los elementos que hay en su interior.
• Aplica 32 px en el campo Horizontal gap between items para separar las instancias MainMenu y Search.

Crea el componente menú responsive

• Arrastra al canvas el logo de tu marca o proyecto.
• Selecciona el logo y el Auto Layout container y crea con ellos un Auto Layout de nombre Header.
• Ajusta el comportamiento del Auto Layout aplicando Gap set to auto – Align center, para que los elementos de su interior floten en el centro vertical y se genere un espacio dinámico entre ambos.
• Selecciona el Auto Layout Header y crea un componente.
• Crea 2 variantes del componente, para obtener 3.
• Renombra la propiedad Property 1 como format.
• Aplicar nombres a las 3 variantes: desktop, tablet y mobile.

Variantes del menú

Vamos a hacer cambios en las variantes para tablets y teléfonos móviles:

• Arrastra al canvas de Figma un icono de hamburguesa, renómbralo como menu. No hace falta diseñarlo, puedes usar un icono de Material Design.
• Arrastra el icono menu al interior de las variantes tablet y mobile del componente Header.
• Oculta el bloque de navegación y búsqueda llamado container.
• Si tu proyecto lo necesita ajustar los valores de padding de las variantes tablet y mobile.

Llegamos al final del tutorial para saber cómo diseñar un menú responsive con Figma.

Si necesitas más información puedes dejar tus preguntas en un comentario.

Muchas gracias.