How To Create a Functional DROPDOWN MENU Prototype in Figma (Tutorial)
HTML-код
- Опубликовано: 2 июн 2024
- 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 
Хобби
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 :)
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.
This is a lifesaver and a wonderful tutorial. Thank you so much!
Thank you. Love the explanation 👏❤️
Thank you. This was really helpful
Very helpful, Thank you so much!
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?
Thanks alot for amazing tips 👏👏
Un buen video para comenzar a conocer las interacciones de figma. Muchas gracias por compratir tus conocimientos. Saludos
Hey @Mavi design I didn't figure it out 14:54 individual, how did that convert to category like submenu variant?
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 (((
Thanks you. I found the solutions.
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.
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...
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.
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
@@mavidesign I slowed the video down as far as it would go and saw the change. Thanks for responding.
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.
Hi! I’m having this same issue even with the auto layout removed.
I still don’t understand how to remove the auto layout :(
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?
HI, I bout your plug in, how to add one more category?
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?
Finally I got it
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?
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!
Thank you
brother how to move 14:54 time individual items to catogory u showed zoom its not work for me
Same bro
Same
@@Sha-rl5bz yo I figured it out, did you still need help
@@2style409hello! Just saw your comment, I figured it out too thanks so much
I have same issue and didn't figure it out, how did you guys figured that? can you help me understand it please?
You can create a frame that has no fill or not visible for the mouse leave interaction
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!
awesome tutorial
I purchased this file but it failed to import. What could be the error? It keeps "Failed to download the file importer" while importing
That’s weird, no idea. Could you reach out to my email? Please see the about section of my channel. Thanks!
Couldn't fine your email but I have sent you a dm on Instagram. Kindly respond
I found an error, when logo clicked go to the 'HOME' page and show up submenu too.
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
@@mavidesign Alright, I understood your explanation !
"Do you see what I did there?"
NO! I didn't. Slow down, man! lol!
Working on it;)
I am playing with this for about 3 days, but still didn't finish. :) I just don't know what I am doing wrong.
ME TOO
It wont work in my end. Its hard to understand figma. Ugh
good but so fast found it hard to keep up
A bit too fast had to slow it down to .75 but great information!
Apologies for the speed and thanks for the tip, hope it was useful anyway!
In 14:39 isnt work with me
You need to slow down and explain more. I got lost and had to try a different video.
amazing, but if you just showed steps and not all the changing your mind on design it would be about 6 mins long.
Good but too fast
IT'S NOT WORKING
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
Sooooo fast. I hardly could follow you. Really wanted to learn this. Bummer...
you go too fast at some parts..