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.
