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

Рет қаралды 72,618

Күн бұрын

Get the SOURCE FILE for this dropdown menu ($1.99): bit.ly/mavi-dropdown-menu-figma
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
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
Visit the Mavi Design Store: bit.ly/mavi-design-store

Пікірлер: 60

@brookethompson6662 Жыл бұрын

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

@joshbellingham5180 Жыл бұрын

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 :)

@jasonprinceart Жыл бұрын

Thanks for the tip! I tried this and I got the dropdown menu to show up on hover, and close when the mouse leaves the nav item, but how do I keep the menu open when my mouse moves to the menu? I tried putting a "mouse enter" interaction on the menu, but since that interaction's task is to keep the menu in its current state, and since there's no state change, figma displays this interaction as "mouse enter - state change - none" and the menu closes.

@sayekatchakraborty2552 2 жыл бұрын

Thank you. Love the explanation 👏❤️

@hillaryugochukwuaniugbo9347 Жыл бұрын

Thank you. This was really helpful

@na_beel Жыл бұрын

Very helpful, Thank you so much!

@nattyleyo 11 ай бұрын

Thanks alot for amazing tips 👏👏

@jessicacanul4966 7 ай бұрын

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

@THIDACHHIEN 8 ай бұрын

Thanks you. I found the solutions.

@vamshisri3431 Жыл бұрын

Finally I got it

@aleynatuncer4395 Жыл бұрын

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?

@KopilaShrestha-yz5en Жыл бұрын

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

@pankajjain8263 4 күн бұрын

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.

@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...

@innamashek2609 Жыл бұрын

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 (((

@Saeedeh1364 Жыл бұрын

awesome tutorial

@jdeso3 Жыл бұрын

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.

@mavidesign Жыл бұрын

Hi Joe, thank you very much for the constructive feedback. Apologies for the speed! Regarding your problem, I think that might be caused by the "menu" component being an auto layout. This means the submenu will be positioned according to the auto layout settings. I (very quickly) mention a fix to that when I say: 14:51 "This is not gonna be an auto layout" and I click to remove the autolayout settings from that component. When creating videos I take the extra time to cut out "dead air", the "ummms" and so on, to make them more interesting and in some instances this might get too far 😅 I will keep that in mind. Hope this video helped you anyway and let me know if there's anything else unclear. Thanks!! Mavi

@jdeso3 Жыл бұрын

@@mavidesign I slowed the video down as far as it would go and saw the change. Thanks for responding.

@TheNNguyener96 Жыл бұрын

I think it would help if you want to make it to be more beginner friendly is to explain why you're doing what you're doing.

@lz3083 Жыл бұрын

Hi! I’m having this same issue even with the auto layout removed.

@Sha-rl5bz Жыл бұрын

I still don’t understand how to remove the auto layout :(

@depullso Жыл бұрын

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

@melissaviesca2299 11 ай бұрын

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?

@user-oe1vb9kf6s 6 ай бұрын

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.

@darrellbatinga7040 Жыл бұрын

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

@kelsiet7373 Жыл бұрын

I love this idea. It was bumming me out that he did not come up with a better solution that's more realistic. When you say create a frame, are you saying to create a frame around each separate variant in the menu component? I'm going to try it out myself. Thanks!

@kalaivanikarthikeyan1729 Жыл бұрын

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?

@mavidesign Жыл бұрын

You need to hover over the side of the object - then a circle connector appears. Please keep in mind that the side the connection is coming from does not affect the functionality of the prototype. If you need more specific advice, please consider joining my Discord. Due to the number of questions I'm getting I'm unable to analyze everyone's request in-depth. Hope this helps!

@kalaivanikarthikeyan1729 Жыл бұрын

Thank you

@abdulhafiztarmizi3473 Жыл бұрын

why i cant move, submenu near menu bro? i have cut submenu and paste on menu, and i cant move that submenu, how to fix that?

@TYNDALL_ Жыл бұрын

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

@2style409 Жыл бұрын

Same bro

@Sha-rl5bz Жыл бұрын

Same

@2style409 Жыл бұрын

@@Sha-rl5bz yo I figured it out, did you still need help

@Sha-rl5bz Жыл бұрын

@@2style409hello! Just saw your comment, I figured it out too thanks so much

@KopilaShrestha-yz5en Жыл бұрын

I have same issue and didn't figure it out, how did you guys figured that? can you help me understand it please?

@voodazz Жыл бұрын

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

@mavidesign Жыл бұрын

Working on it;)

@solomonakpa1428 Жыл бұрын

I purchased this file but it failed to import. What could be the error? It keeps "Failed to download the file importer" while importing

@mavidesign Жыл бұрын

That’s weird, no idea. Could you reach out to my email? Please see the about section of my channel. Thanks!

@solomonakpas Жыл бұрын

Couldn't fine your email but I have sent you a dm on Instagram. Kindly respond

@hashemsaleh538 5 ай бұрын

In 14:39 isnt work with me

@still_alive_yoon Жыл бұрын

I found an error, when logo clicked go to the 'HOME' page and show up submenu too.

@mavidesign Жыл бұрын

Hello Phoebe, thanks for bringing this up. I've been trying to find a solution for this but unfortunately can't find any - really sorry about that. Figma limits the number of actions you can associate with one element and one event (for example "Page 1" button when "clicked") to 1. I have not yet been able to find a workaround. At the same time, Figma remembers the state of a component when you leave the screen. It doesn't reset when you return there, even though that screen of the prototype features the component in its default state. If you, however, need to revert the prototype back to its initial state, you can press R to reset the prototype. This should clear the history of your interaction and move you to the home screen. I will try and come up with a solution and if I do, I will let you know as well as upload the source file on my store. Thank you and I apologize once again for the inconvenience. Mavi

@still_alive_yoon Жыл бұрын

@@mavidesign Alright, I understood your explanation !

@LorettaIndo Жыл бұрын

good but so fast found it hard to keep up

@roarkeven Жыл бұрын

A bit too fast had to slow it down to .75 but great information!

@mavidesign Жыл бұрын

Apologies for the speed and thanks for the tip, hope it was useful anyway!

@handsoffmyskull Жыл бұрын

It wont work in my end. Its hard to understand figma. Ugh

@masamerjak8518 Жыл бұрын

I am playing with this for about 3 days, but still didn't finish. :) I just don't know what I am doing wrong.

@Valeria-nv1fy Жыл бұрын

ME TOO

@doxican 17 күн бұрын

29min for what should be 2min

@gcndc Жыл бұрын

You need to slow down and explain more. I got lost and had to try a different video.

@AgUzodinma Жыл бұрын

Good but too fast

@SuperRomanHoliday 4 ай бұрын

amazing, but if you just showed steps and not all the changing your mind on design it would be about 6 mins long.

@Valeria-nv1fy Жыл бұрын

IT'S NOT WORKING

@mavidesign Жыл бұрын

There’s also a second drop-down video on my channel, or you can buy the source file through the link in the description. Otherwise I can’t help you because you haven’t shared any specifics