Pensé que este momento no iba a llegar más, pero aquí te lo cuento. En la versión 2.9 del UX fomo Design system ya está disponible la primera versión del componente Menú responsive para Figma.
En el directo que hicimos en YouTube el viernes pasado construimos un componente TopMenu responsive para el proyecto WordPress for UX.
Nos quedó tan parecido al menú que ya teníamos en nuestro sistema de diseño, que a Tomás, un miembro de la comunidad de UX y UI, se le ocurrió una idea genial: añadirlo al UX fomo Design system actualizando el componente original con todas las variantes del nuevo menú responsive.
Entonces…
A partir de esta versión el componente TopMenu tienes las siguiente características:
- Tamaños Desktop, Tablet y Mobile para que el menú se adapte a distintos dispositivos y tamaños de pantalla.
- LinkMenu, un bloque con enlaces con una propiedad de texto Label en cada uno de ellos, y una propiedad booleana para mostrar u ocultar un Separator, que nos ayudará a separarlo visualmente del bloque que te comento en el siguiente punto.
- UserMenu, un bloque con 2 botones (cada uno de ellos con sus propiedades) y una propiedad booleana para mostrarlo u ocultarlo.
- Un IconButton con un icono de hamburguesa para mostrar el acceso a todas las opciones del menú en pantallas de tabletas y de teléfonos móviles.
En la próxima actualización del menú responsive añadiremos un buscador basado en el componente TextField.
Cómo diseñar un menú responsive en Figma
Si quieres conocer todos los pasos para diseñar este menú te dejo el vídeo tutorial donde expliqué cómo he creado todos los componentes que lo forman.
Como siempre te dejo el link duplicarlo en tu Figma.
Compartido bajo licencia Creative Commons 4.0
Si quieres dejar alguna pregunta usa el formulario de comentarios u obtén más información en el artículo donde explicamos cómo diseñar un menú responsive en Figma.
Muchas gracias.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
