Cómo crear un menú desplegable en Figma

Este no será el primer tutorial para crear un menú desplegable en Figma, en la red hay muchísimos… pero igualmente lo estoy escribiendo, porque no fueron pocas las personas que me lo han pedido. Si tienes ganas de aprender UX y UI sigue leyendo y si te surge alguna duda o deseas compartir tu experiencia por favor deja un comentario. Gracias de antemano.

A continuación te voy a explicar todos los detalles para que puedas construir un menú desplegable de los que puedes encontrar en cualquier tienda online mientras recorres una categoría de productos o los resultados de una búsqueda.

Pasos para crear el menú dropdown

Para construir el menú desplegable interactivo necesitamos primero crear dos componentes, cada uno con sus Variants con las que luego obtendremos dos componentes interactivos.

Dropdown item

El primer componente será la pieza más simple y a la vez fundamental del menú dropdown, hablamos de un ítem del menú, una de las filas u opciones del mismo.

• Sobre el canvas de Figma pulsa la Tecla T para activar la herramienta de texto, cuando el cursor cambie de estado pincha sobre el canvas y escribe “Menu item label” utilizando la fuente Source Sans Pro, con los parámetros Regular, tamaño de 16 px y 24 px de alto de línea.
• Selecciona la cadena de texto y utiliza la combinación de teclas Shift + A o Mayúsculas + A para crear un Auto Layout.
• Ajusta los paddings del Auto Layout con: 16 px Left, 12 px Right y 10 px en Top y Bottom.
• Desde el módulo Fill ubicado en el tab Design del sidebar derecho aplica el color de fondo #FFF al Auto Layout.
• También ajusta el Spacing mode del Auto Layout en Space between.
• Selecciona el Frame, edita su nombre utilizando la combinación de teclas Control + R en Windows o Command + R en macOS y escribe “dropdown item”. También puedes editar el nombre de un Frame pinchando dos veces sobre su título, en el canvas de la aplicación y en el sidebar izquierdo de Figma.
• Ahora vamos a crear el primer componente de este tutorial, selecciona el Frame y utiliza la combinación de teclas Control + Alt + K en Windows o Option + Command + K en macOS. También puedes pinchar en el icono Create component ubicado en el margen superior de la aplicación.
• Llega el momento de crear los Variants, serán 5 en total.
• Selecciona el componente y pulsa el icono Add variant ubicado en el margen superior de la pantalla, también puedes abrir el menú contextual y seguir el camino Main component > Add variant.
• Ahora hay que renombrar los Variants utilizando uno de los métodos comentados anteriormente, los nombres serán: “Header closed”, “Header opened”, “Default”, “Hover” y “Selected”.
• Vamos a añadir iconos en las 2 primeras variantes del componente: Header closed y Header opened.
• Instala y ejecuta el plugin Material Design Icons (Community). Puedes hacerlo desde Main menu > Plugins, pinchando en el icono Resources del menú de herramientas de Figma, que también lo puedes abrir usando la combinación de teclas Shift + I o Mayúsculas + I, o abriendo el menú contextual sobre el canvas y encontrarlo dentro del ítem Plugins.
• Busca el primer icono, su nombre es chevron-down, introduce el término en el campo de búsqueda y pulsa Enter. Identifica el icono en el grid de resultados. Pincha en el canvas de Figma y después sobre el icono para dejarlo sobre el lienzo.
• Repite el proceso del punto anterior pero buscando el icono chevron-up.
• Arrastra el icono chevron-down al interior de la variante Header closed, ubícalo a la derecha de la cadena de texto.
• Repite la acción anterior con el icono chevron-up arrastrándolo al interior de la variante Header opened.
• Como puedes ver la variante Header closed la usaremos para mostrar el menú desplegable cerrado y Header opened para mostrarlo abierto.
• Antes de configurar la interacción entre algunos de los Variants aplica los últimos cambios visuales.
• Desde el módulo Stroke configura un borde Inside y Bottom de color #E9EFF2 y aplícalo a la variante Header opened.
• A la variante Hover ponle un background de color #DAF2FF.
• Y a la variante Selected un fondo de color #1EABF8 y en texto en color #FFF.
• Pincha el tab Prototype ubicado en el sidebar derecho de Figma.
• Por último, selecciona la variante Default y crea una conexión con la variante Hover, con los siguientes parámetros While hovering, Change to e Instant. De esta forma le dirás a Figma que se muestra la variante Hover cuando tu ratón sobrevuele la variante Default.
• ¡Bravo, ya tienes el primer componente interactivo creado!

Dropdown menu

El segundo componente que vamos a crear será también un componente interactivo y tendrá dos Variants.

• Activa el tab Assets ubicado en el sidebar izquierdo de Figma utilizando la combinación de teclas Alt + 2 en Windows u Option + 2 en macOS.
• Arrastra el componente dropdown item desde el sidebar izquierdo al canvas de la aplicación.
• Duplica el componente 3 veces, después de hacerlo tendrás 4 copias del componente dropdown item.
• Selecciona los 4 elementos y crea un Auto Layout con ellos, para ello utiliza cualquiera de los métodos explicados anteriormente.
• Renombra el Auto Layout que acabas de crear como “dropdown menu”.
• Edita el valor de Spacing between items en 0 desde el módulo Auto layout ubicando en el sidebar derecho.
• Selecciona los 4 elementos del Auto Layout y edita el Horizontal resizing como Fill container. De esta forma haremos que los ítems del menú desplegable se ajusten al ancho de su contenedor.
• Selecciona las cadenas de texto de los 4 elementos y edita el Horizontal resizing como Fill container para que los ítems del menú con textos largos se vean en más de una fila, siempre que fuera necesario.
• Renombra los 4 elementos como: “Featured”, “Featured”, “New” y “Rating”.
• Selecciona el segundo “Featured”, “New” y “Rating” y crea con estos elementos un nuevo Auto Layout llamado “options”.
• Edita el valor Corner radius en 8 px y selecciona el checkbox Clip content para darle bordes redondeados al menú desplegable.
• Crea un nuevo componente utilizando cualquiera de los métodos que expliqué anteriormente.
• Edita su nombre, renombrarlo como “dropdown menu”.
• Crea una variante para obtener un componente de 2 Variants.
• Renombra las 2 variantes, a la primera llámala “Closed” y a la segunda “Opened”.
• Oculta el elemento options de la variante Default. Una vez seleccionado utiliza para ello la combinación de teclas Control + Shift + H en Windows o Command + Shift + H en macOS.
• Como puedes ver ya hemos creado el componente del menú dropdown, ahora vamos a crear las interacciones necesarias para crear un componente interactivo y utilizarlo en prototipos de Figma.
• Pincha en el tab Prototype del sidebar derecho.
• Selecciona la variante Closed y crea una conexión con la variante Opened, con los siguientes parámetros: On click, Change to, Smart animate, Ease out y 75 ms. De esta forma le dirás a Figma que se muestra la variante Opened cuando pinches o hagas tap en la variante Default.
• Selecciona el elemento header de la variante Opened y crea una conexión con la variante Closed, con los siguientes parámetros: Mouse leave, Change to, Smart animate, Ease out y 75 ms para cerrar el menú desplegado pinchando o haciendo en el elemento header.
• ¡Seguimos avanzando! Ya hemos creado el segundo componente. Demos el último paso del tutorial para crear un prototipo que nos permitirá ver cómo funciona nuestro menú desplegable.

Cómo crear un prototipo de menú desplegable

Antes de crear el prototipo me gustaría decir que no hay una sola forma de prototipar menú desplegable, las posibilidades son casi infinitas. Me explico, el componente interactivo que montamos en la primera parte del tutorial podría tener dos finalidades.

• Presentar el funcionamiento del menú desplegable a personas del equipo de Front-end que van a desarrollar el código necesario para obtenerlo y a confirmar que las características del mismo no afectarán la performance del desarrollo.
• Y también presentarlo a stake holders de la compañía que necesiten validar funcionalidades relacionadas con el producto.

Lo que quiero decir es que tanto el componente como el prototipo han sido creados para alcanzar objetivos concretos. Y si esos objetivos son diferentes la creación del componente y del prototipo podría ser distinta.

Ahora veamos los detalles del prototipo:

• La primera pantalla del prototipo nos muestra los resultados de una búsqueda ordenados por Featured.
• Sobre el listado vemos el componente de menú desplegable con el cual podremos cambiar el orden de los elementos.
• Pinchamos o hacemos tap en el dropdown menu y elegimos ordenar los resultados por New.
• La pantalla se refresca y obtenemos el mismo listado con la nueva organización.
• Abrimos el menú desplegable y elegimos la opción Rating.
• Llegamos a la última pantalla del prototipo, el mismo listado con elementos organizados por valoración.
• Si queremos ejecutar el prototipo en bucle podremos abrir el dropdown menu y elegir la opción New.

Tutorial en vídeo para crear un menú desplegable

Aquí te dejo el vídeo del tutorial que compartí en mi canal de YouTube, reprodúcelo y sigue mis indicaciones para crear tu menú desplegable.

El vídeo estará disponible en breve.
Mientras tanto puedes buscarlo en mi canal de YouTube.
Gracias por tu paciencia.

Menú desplegable en Figma Community

Si deseas utilizar el componente de menú desplegable en tus proyectos te dejo un enlace a mi perfil de Figma Community para que lo puedas duplicar.

Más temas en este tutorial

Durante este tutorial para «crear un menú desplegable en Figma» vimos otros temas del curso de Figma en español que te pueden interesar:

• Atajo de teclado para activar la herramienta de texto.
• Uso y creación de un Auto Layout.
• Crear Variants de un componente.
• Cómo crear interacciones entre Variants para crear un componente interactivo.
• Métodos para renombrar un Frame.
• Instalación y uso de plugin para utilizar iconos de Material Design.