How To Create a Functional DROPDOWN MENU Prototype in Figma (Tutorial)

In this video we’ll go through creating and setting up an interactive & functional dropdown menu navigation prototype in Figma. It also features a subtle swipe-in animation for the category menus. I chose a component-based approach that enables us to customize everything very easily. You’ll learn how to use components, nested components and variants to build a dropdown menu navigation. It’s great for website and app prototypes and guaranteed to keep your Figma prototype organized.

How to create / design / build and interactive animated functional dropdown menu prototype component in Figma (full process explanation tutorial)

——————————
© 2022 Mavi Design

[elenkarapetyan]

thank you so much! I spent all day today trying to make a dropdown menu that actually works. you are a lifesaver. and I don't agree with people saying it's too fast. what's the problem just pausing the video and then returning to it? idk with people

[joshbellingham]

There is a trick to solve the "Mouse enter" issue you encountered. In the settings for the "Mouse Leaves" interaction there is a little stop watch icon that adds an delay to how long it takes for the submenu to disappear after the mouse leaves. I found that setting the delay between 500ms - 700ms was enough time that I could move the mouse on to the option I wanted to click before the looping starts. This may be a new feature since you made the tutorial but I figured I would still share :)

[pyaephyo]

Thanks lots, Sir. ❤️❤️ Please upload more for our beginners

[brookethompson]

This is a lifesaver and a wonderful tutorial. Thank you so much!

[jdeso]

Your speech is really good and easy to understand but if someone else also mention you're moving way too fast we can't see what you've done we don't know what settings you're changing.
Every time I placed my sub menu into the menu it snaps left hand side I can't get it to go where I placed it it keeps snapping back to the left I missing something or I can't see what you've changed so that I can place the sub menu wherever it needs to be.

[jasonprinceart]

Great tutorial! I don't agree with the "too fast" comments - great speed, IMO and if you missed something, that's what rewind is for. Going slower would turn this 30 minute video into an hour...

[caitlincole]

Thanks for the great tutorial! I have an issue with hovering. While hovered it shows "Individual item" instead of Page no. How do I fix this?

[KopilaShrestha-yzen]

Hey @Mavi design I didn't figure it out 14:54 individual, how did that convert to category like submenu variant?

[aleynatuncer]

Thank you, this video is very helpfull but I have a problem about responsive design.
I created the video content exactly, but the menu is not responsive. Static menu is responsive, but after creating the component set, the menu remains constant and no settings work. What should I do?

[jessicacanul]

Un buen video para comenzar a conocer las interacciones de figma. Muchas gracias por compratir tus conocimientos. Saludos

[ZainArshad-gv]

What if I want to open Categories 1, 2, and 3 by hovering over them instead of clicking? Also, each category's dropdown should stay open until I move my mouse to category 2.

[TYNDALL_]

brother how to move 14:54 time individual items to catogory u showed zoom its not work for me

[gohan]

Very nice, but as you take it to HTML code for its real operation on the web
Could you do the tutorial?

[innamashek]

Great tutorial! I just have an issue with hovering. While hovered it shows an "Individual item" instead of Page #. Can you please help me to fix this? I watched till the end, repeating all the actions and the prototype does not work correctly (((

[pankajjain]

Hi, I tried to make a drop down menu following the instructions but when I click on Page 1, Page 2 or Page 3 submenu then I navigate to their connected pages 1, 2 and 3 but the drop down submenu doesn't goes off, it still shows drop down sub menu list and have to click on menu bar to hide it. Guide me what am missing, where is the fault.

[depullso]

HI, I bout your plug in, how to add one more category?

[honeylavender]

My issue is that when I have a drop-down in a page with other content below it, it pushes all of the content below it down, anyway to avoid that?

[darrellbatinga]

You can create a frame that has no fill or not visible for the mouse leave interaction

[voodazz]

"Do you see what I did there?"
NO! I didn't. Slow down, man! lol!

[kalaivanikarthikeyan]

Thanks for the great video. At 2.19, I was able to get the connection directly below (like a flow chart) instead from the side of the first box. Could you please advise how to get it from the side?