En este tutorial te explicaremos detalladamente cómo construir un menú desplegable en Figma, una de las herramientas UX/UI más utilizadas por los UX/UI Designer. Si quieres aprender y compartir tus experiencias, ¡sigue leyendo y déjame tus comentarios!
Crear un menu desplegable en Figma: paso a paso
Para comenzar con el menu desplegable en Figma, necesitamos crear dos componentes en Figma y sus respectivas variantes para obtener un menú desplegable interactivo.
Dropdown item
El primer componente en el menu desplegable en Figma será la base del menú o dropdown item, esencial para mostrar las opciones del mismo.
El componente Dropdown Item es la pieza fundamental que constituye cada opción o fila dentro del menú desplegable en Figma. En esencia, representa los elementos individuales que el usuario verá y seleccionará al interactuar con el menú. Estos elementos pueden incluir diferentes opciones, como categorías, filtros, acciones o cualquier otro tipo de contenido relevante para la interfaz de usuario.
Cuando creamos el Dropdown Item, estamos definiendo cómo se verá y se comportará cada opción del menú desplegable. Esto implica consideraciones visuales, como el tamaño, la tipografía, los espacios y los colores, así como también aspectos funcionales, como las interacciones al interactuar con el ítem.
Por lo tanto, el proceso de diseño de este componente es crucial para garantizar una experiencia de usuario intuitiva y coherente en el menú desplegable. Cada detalle, desde el texto hasta el diseño de íconos en Figma y los estados de interacción, contribuye a la usabilidad y la estética del menú, lo que hace que el Dropdown Item sea una parte fundamental del diseño de la interfaz. Puedes crearlo del siguiente modo:
- Activar la herramienta de texto: Utiliza la tecla T para activar la herramienta de texto en Figma.
- Crear el texto del ítem: Haz clic en el lienzo y escribe «Menu item label».
- Convertir en auto layout: Selecciona el texto y crea un Auto Layout con Shift + A para permitir la flexibilidad en el diseño.
- Ajustar los paddings: Ajusta los espacios internos del Auto Layout para asegurar que el texto tenga suficiente espacio alrededor.
- Aplicar color de fondo: Utiliza el panel de propiedades para aplicar un color de fondo blanco al Auto Layout.
- Ajustar el espaciado: Configura el espaciado entre los elementos del Auto Layout en «Space between» para distribuir uniformemente los ítems.
- Crear variantes: Convierte el componente en un componente principal y crea cinco variantes para diferentes estados del ítem.
- Agregar íconos: Para las variantes «Header closed» y «Header opened», agrega iconos de flecha hacia arriba y hacia abajo respectivamente para indicar el estado del menú.
Dropdown menu
El segundo componented del menu desplegable en Figma será el menú desplegable propiamente dicho o dropdown menu.
El Dropdown Menu es un componente interactivo en Figma que actúa como el contenedor principal para todas las opciones disponibles en el menú desplegable. Esencialmente, este componente del menu desplegable en Figma encapsula y organiza los «Dropdown Items», creando así la estructura completa del menú desplegable en Figma.
Cuando creamos el «Dropdown Menu», estamos diseñando el marco en el cual se presentarán todas las opciones seleccionables. Esto implica definir cómo se verá el menu desplegable en Figma en su conjunto, incluyendo su diseño visual, tamaño y disposición de los elementos.
Además de su aspecto visual, el «Dropdown Menu» también abarca aspectos funcionales importantes, como el comportamiento de apertura y cierre del menú, así como la capacidad de interactuar con las opciones dentro del menú. Establecer estas interacciones correctamente es crucial para garantizar una experiencia de usuario fluida y sin problemas. Sigue estos pasos para crearlo:
- Incorporar los ítems: Arrastra los ítems del menú al lienzo y duplica según sea necesario para crear las opciones del menú.
- Crear un auto layout: Agrupa los ítems del menú en un Auto Layout para gestionar su disposición y alineación.
- Ajustar configuraciones: Configura el espaciado y el ajuste horizontal para asegurar que el menú se adapte correctamente al contenido.
- Crear variantes: Convierte el Auto Layout en un componente y crea variantes para representar el menú cerrado y abierto.
- Ocultar contenido adicional: En la variante por defecto, oculta cualquier contenido adicional para mostrar solo el menú cerrado.
- Configurar interacciones: Define las interacciones para que el menú se abra y cierre correctamente al interactuar con él.
Creación de un prototipo de menú desplegable
Para mostrar el funcionamiento del menú desplegable en Figma, creamos un prototipo con varias pantallas:
- Mostramos los resultados de una búsqueda organizados por Featured.
- El menú desplegable permite cambiar la ordenación a New y Rating.
- Cada selección actualiza la pantalla con los resultados ordenados según la opción elegida.
- El prototipo puede ejecutarse en bucle para mostrar todas las funcionalidades del menú.
¡Esperamos que este tutorial te haya sido útil! Si te interesa profundizar en diseño UX/UI y mejorar tus habilidades, considera unirte al Bootcamp en diseño UX/UI de KeepCoding. Te garantizamos un cambio de vida al finalizar el curso, ¡no te lo pierdas!
