Menú lateral y Tooltip

Duplicado la versión 2.7 del UX fomo Design system obtendrás dos nuevos componentes, un Menú lateral para Figma y un Tooltip dinámico.

Déjame contarte todo lo que tienen…

Menú lateral

Este menú lo desarrollamos en los últimos directos que hicimos YouTube, lo hicimos para explicar cómo aprender a utilizar y combinar herramientas de Figma como Auto Layout, Constraints y prototipado.

El resultado nos gustó muchísimo, por eso decidimos añadirlo al sistema de diseño.

La estructura de la primera versión del sidebar es la siguiente:

• Tiene botón para colapsar y expandir
• Contiene dos bloques de enlaces, cada uno con su encabezado (HeaderMenu) y botones con icono y texto (ItemMenu)
• Un bloque CTA (Banner)

Por cierto, el componente se llama Sidebar dentro del sistema de diseño, pero en este post como puedes ver la llamamos menú lateral.

Tiene dos variantes: expandido (expanded) y colapsado (collapsed), ambas poseen conexiones para su uso en prototipos de Figma.

La variante colapsada sólo muestra iconos y, al hacer hover sobre los ItemMenu colapsados, se muestra al usuario un Tooltip con el label del botón.

El elemento ItemMenu tiene propiedades de texto para editar el contenido del label y un Instance swap para seleccionar el icono que quieres mostrar en cada botón.

Como dije antes hablamos de la versión nº 1, este componente recibirá muy pronto nuevas actualizaciones.

Cómo diseñar un menú lateral en Figma

Si quieres conocer todos los pasos para diseñar este sidebar te dejo el vídeo tutorial donde expliqué cómo he creado todos los componentes que lo forman, cómo hice el prototipo, etc.

Hablemos ahora del Tooltip.

Tooltip

La estructura del componente Tooltip incluye una cadena de texto con una Text property que te permitirá editar su contenido desde el panel del componente, ubicado en el sidebar derecho de Figma.

Esta versión también cuenta con propiedades booleanas para mostrar u ocultar flechas en sus cuatro lados: Top, Right, Bottom y Left. Con ellas podrás utilizar el componente en cualquier parte o elemento de tu interfaz.

Para terminar te quiero contar que en esta versión del design system hemos aplicado las nomenclaturas PascalCase, camelCase y kebab-case a todos los componentes, sus variantes, propiedades y atributos.

Seguiremos trabajando para añadir más componentes y upgrades en próximas versiones.

Compartido bajo licencia Creative Commons 4.0

Como siempre, mil gracias por el apoyo y por el feedback que quieras dejar aquí en un comentario.

Seguimos.