How to create a submenu ✨hover✨ dropdown prototype in Figma (file in description👇)
HTML-код
- Опубликовано: 13 июн 2024
- In this video i'll show you how to create and prototype dropdown menus and submenus on hover and addressing some challenges like when you place dropdowns a few pixels away from the interaction triggers and etc..
It can be harder than it seems because when you have a gap between the element that triggers the hover and the overlay, for example, when your mouse hits that gap, the interaction will cancel itself and that's what makes it a bit tricky and also the fact that you can't bundle certain interactions to the same component.
🔗 Figma link: www.figma.com/community/file/...
* Just click on the blue "Get a copy" on the top right and have fun!
🔗 Master plugin links:
- Figma: www.figma.com/community/plugi...
- Website: dominate.design/
⏰ Timestamps
00:00 intro & final result overview
00:32 set up walkthrough
01:00 componetizing the navigation
02:52 making the nav item hover behavior
03:42 adding component property to nav item
05:10 creating dropdown menu item component
07:32 setting up the dropdown interactions (ON CLICK)
08:20 setting up the dropdown interactions (ON HOVER)
10:40 componetizing the dropdown menu
11:32 tip auto layout is great for organizing things
11:47 adding component interactions to the dropdown menu component
14:20 finalizing all the interactions + challenges
Follow me on twitter:
🐥 deereis
Thank you for watching!! 🙏 
Наука
the conflicting interactions drove me nuts, man for the elegant logical sequential explanation bud. You are excellent at answering side curiosity questions buddy keep it up ⚡️
Glad it helped! Thank you for the kind words, still figuring out how to best share stuff on youtube but it's always nice to hear. Feel free to reach out if you need any help! ✌️
when watching this video, it absolutely looks like me making prototype in Figma (deja vu), but the difference is that you SOLVE the problem! thank you so much for sharing this
hahah nice, glad I could help!
This is the most mind-probing prototyping Video I have ever watched 👌
Thanks for uploading. I learnt a lot
Thanks, I’m glad you learned some tricks!
thank you very much! this video really helped me with my troubles in animating such kind of menu on hover! very useful!
Awesome, glad it was helpful!
Very helpful. Thank you so much!
You're a lifesaver!!! I wasn't even aware there were a mouse enter / leave option .
I'm glad that was helpful! i've realized that there's also another way which is just adding some padding so that empty space is still part of the element where the hover belongs to but you end up not leaving the element because you have that transparent padding. Anyway, the mouse enter/leave is always a helpful option to have!
thank you! you have very useful content!!
Glad it was helpful! ☺️
thank you so much. You saved my final project😃
Happy to have helped! Means a lot!
its helps me a lot thankyou 👍
Most welcome 😊
you are a life saver thank you
Hey Angie, glad it helped! 🙏
Thank you so much for making this video. I am currently studying UX design remotely and there was no one to help when I got stuck. Your video was super helpful! 😊🎉
You’re very welcome!
Amazing guide, thank you. One bit I got stuck on for a long minute was at 16:13 where if you choose anything except 'Instant' animation for the sub-menu [open overlay], it will blink erratically and give you a migraine.
Haha glad it helped and yeah it’s a bit hacky!
There are probably other ways to achieve the same result though
anyone else having trouble where the mouse leave interactions are activated instantly no matter what i set them to
So this is only usable on that specific home page?
i’m really struggling to get this to work properly. I’ve downloaded your attached file inside Figma and it uses ‘Mouse move inside’ and ‘Mouse move outside’ which don’t appear to be available in the interaction options! if I switch them to use ‘Mouse enter’ and ‘Mouse leave’ the first level (second menu item) and the submenu flicker on and off constantly when I hover the second menu item. Any ideas?
If I understood correctly you need to add a slight delay so the flickering doesn’t happen anymore.
If you still have a hard time can you share the link to the file so I can take a look?
I did add a delay but it still flickers. It looks like a conflict between mouse leave and mouse enter on different elements at the same time. Could you upload the actual file you used as the current one uses options that are not available in the latest Figma.
@@tasteconsultancy the work file in the description is the only file I have. The interactions are the same as “Mouse enter” and “Mouse leave” which are currently available in Figma. Feel free to share your file link with me or invite me to it and I can take a look
@@tasteconsultancy adrianoreis.design@gmail.com
Doesn't this create the issue that the hover state with the drop-down is on a timer, and means the user can't hover over a tab and read the drop-down options without moving their mouse?
It shouldn’t because it’s not really a “timer” it’s just a delay for the dropdown to show so it gives you enough time for the mouse to hover over. You can also achieve the same thing by using a container wrapping the dropdown with extra invisible padding on the side so the hover doesn’t trigger off
its great video...can u also make a video on integration of payment gateway on figma please ..?
hey, glad it helped! can you elaborate a bit more on what you mean by 'integration' of payment gateway in figma? if you have some reference to share that'd be great. Thanks!
@@AdrianoReisDesign payment gateway like stripe...where buyer can pay the payment
@@deepakbakshi1008 i think that could be cool for a video! what's the main thing you'd like to learn there? just how to design it or is there anything specific you're looking for?
@@AdrianoReisDesign i want to learn how to integrate payment system in figma and it should ne live payment demo..if you can make it?
@@AdrianoReisDesign i am looking for payment integration system ..if u can make video ?
If I want to change the text color and icon color while hovering. How can I do that? It works for the text but I encountered an issue with the icon. Only the exact icon I used as a main component changes the color, while the replaced icons stay the same color as default state.
Hi on the nav item hover variant if you change the color of the icon there it should change it when you hover if it’s not changing make the sure the icon has the exact same name and structure as the one from the default state. If it’s still not changing it may be a bug that you need to reach out to the support team for help. Hope that helps
@@AdrianoReisDesign all icons have different names. Does it mean I have to create 3 variants for 3 different icons?
I mean they should have the same name in the default and hover state. If you’re using components for the icons make sure that the icons themselves(not the frame that wraps them) are flattened and have a consistent name. I add the icon names to their parent frame and the vector itself I flatten (command/ctrl + E) and name them all “shape”
Also you shouldn’t need to create new variants just to have different icon. If the icons are components and their structure are the same (as I mentioned above) they should work
@@AdrianoReisDesign I'm having a hard time understanding this but thank you for your response.
Hi! This video taught me a ton about auto layout and components! Thank you so much. I did have a question,.When I add the mouse enter interaction to my main nav component, in your case the Recipies component, to open the hover frame, I then add the on mouse leave interaction to the drop down menu that appears on the over frame only for it to blink rapidly when my mouse is on the "Recipe component". I'm guessing its because its witching between the two frames based on the mouse entering one component and at the same time leaving the drop down menu component. How can I get around this?
Answered it at 18:50 !! I must have skipped over that part, thank you
Amazing!! So glad it's been helpful. The fix must've been to add the delay, right? I know the flickering is really annoying, i've been there! 😅
@@AdrianoReisDesign Yes that was it! now I am trying to figure out how to keep the main nav menu option highlighted as the user selects different options on the drop down menu :) I think you answered it in the video though!
But you can't hovering other menus when dropdown is active
You can, at 11:47 I start building the inner interactions for the hovers including the submenu
this video is out of date, figma no longer functions like this. Mouse leave refuses to not activate to matter what I do
Hey there, yes the video is a bit old now after many releases but "mouse leave" still works same way today. What are you struggling with?
btw there's an easier way to build this which is to wrap the dropdown on another auto-layout and just add invisible padding on top so when your mouse travels it doesn't travel on an empty area that will cause the dropdown to trigger-off