If you have problems with keeping the menu overlay open, try removing the "mouse leave" interaction and instead check "Close when clicking outside" in "Overlay" under "Interaction details". Hope this helps 👍
You're a great teacher. The way you're able to explain things in detail to help your viewers understand not only how to do something but how it works is a skill that very few educational channels have.
02:46 In this video, we will create a dropdown menu for the header navigation. 05:32 Creating dropdown menu items in Figma 08:18 Customize dropdown menu navigation in Figma 11:04 Creating a dropdown menu with menu items for resources, blog, success stories, case studies, and press 13:50 Designing the dropdown menu in Figma 16:36 Create a dropdown parent menu item with an arrow 19:22 Create an interaction to open and close the dropdown menu on mouse enter and mouse leave 22:08 Setting up a dropdown menu in global navigation on websites
This is super helpful, thanks! I am running into the error/bug of when the drop down parent is hovered, it doesn't do the hover effect. I thought it was me and rebuilt the entire nav and components...then realized it is a Figma bug. Maybe too many interactions in one component?
This is great. I think we are missing the interaction when you hover on the dropdown_parent default, it doesn't change to the hover effect (black text in this case). I'm struggling in creating that interaction.
Not sure if this is the right fix, but I was able to create a bit of a hack for this by adding a second copy of the button into the overlay itself so that when the overlay appears the second button (with the hover state) appears on top of the original button along with the overlay. I added a 200ms delay to the overlay to make sure the interactions didn't interrupt each other.
Thank you for the great video, I've been following the series without problems until episode 9, when I click on the FAQs I can no longer scroll to the bottom of the footer, and the footer is less visible the more FAQs I open. Do you have any ideas on how to fix this?
Gracias por tus videos! para solucionar el tema del menu sobre el menu, apliqué un menu acordeon entre las opciones, asi no es tan dificil desplegar opciones entre cada menu item Saludos!!!!
I watched till this episode and I just wanted to say thank you sir!! I am going to watch ell episodes of your series. Thank you, you helped me a lot!!!
Great videos! Much appreciated. QUESTION: Around 18:51, I understand your Interaction setting to "Close Overlay" when the "Mouse Leaves" the region of the overlay but I think we also need a setting to cause the overlay to close if the user moves the mouse away OUT OF THE "RESOURCES" MAIN MENU REGION. Can't figure out how to do this! I added an interaction fro the "Resources" Main Meny Region to "Close Overlay" when Triggered by "Mouse Leave" but it had no effect. Please help!
How do hover and mouse enter work together? For example, when I hover over Resources, the color has to change and the drown drop has to open all altogether. How it's possible?
Thanks so much! Only issue I'm having is if I dont put my mouse into the dropdown menu theres no way for it to disappear.. I thought maybe giving the header a "Mouse Leave" > "Close Overlay" but not a solve. Any ideas?
Same here :c even the other buttons hover animation "freeze" when the submenu appears. It´s like the active area of the upper part of the submenu became the whole menu as well...
Hi! Thank you for a great tutorial! I have an issue with "about us" section of the menu. When I hover over "Resources" button, "resources dropdown" menu opens, and every part of it works perfect. Then if I do not move my mouse on the "resources dropdown" menu panels and continue moving it on the main menu panel to the "About Us" section, it is not active, and the dropdown menu remains open. How can I fix that?
Man, I would like to congrats you so much… your tutorials are superb. Thank you for that work you’ve done. It’s a gold mine for me. So much thank you. Could you also make an easy to digest tutorial on variables, because I have problem to Wrap my heap around this topic ? Also, one big question please… how could I be sure, that my header content is above the fold in figma since there Is no above the fold tool like, in adobe XD? Thx
The hover state of the drop down button in the menu does not work with the drop down parent overlay. So I set my hover to orange, but the button stays black but the overlay does fire. Does anyone have a fix for this? 1
Thank you for the tutorial, great job. If you insert an instance of the component in another page that doesn't work . Do you have any solution ? Thanks
Unfortunately I'm unable to determine the issue with your projects from your description alone --------- To get more specific help and feedback with your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over TH-cam - thank you for your understanding! Mavi
I'm having problem with the alignment of that arrow it seems good in component but differs in child component as well as in prototype, can you help me with that.
Any ideas why I can't set the Resources to Resources Dropdown interaction? When I select "Mouse enter" and "Open overlay" I don't have an option to select my resources dropdown... Super weird.
@@mariadecat THANK YOU SO MUCH FOR LEAVING THIS COMMENT 😭 I've been going crazy trying to make the overlay and it wouldn't make the connection to the dropdown
The part from 15:00 where you make all the variants for the overlay and link them is extremely unclear. I watched this 10 times and can't get the overlay to show. You should have just explained this with a simple button that a 1 default and 1 hover state. I don't understand why you have to make it so complicated by having 8 variants.
Is there a way to navigate from the dropdown menu to another page, and then also auto-scroll to a specific section? For example: 1. I am at the HOME page and I want to go to the ABOUT page. 2. The ABOUT page has a FAQ section at the bottom of the page. 3. In the top menu there is a button for ABOUT that also is a dropdown menu. 4. In the dropdown menu, many buttons correspond to the content of the ABOUT page. 5. At the bottom of the dropdown menu, one button says FAQ. So what I want to do is, on the HOME page, open the ABOUT dropdown menu and select FAQ. It should take me to the ABOUT page and then auto-scroll to the FAQ section at the bottom of the page. I hope I'm explaining myself clearly. Please! send help! Thanks!!!
Thank you, but even at 1.75x speed it felt too slow and long winded. You could assume that most of us understand how to make chevrons and so on, just stick to the interaction we are here for. I appreciate none the less
Thanks for the Web Design in Figma series. I have been looking for real, hand-ons tutorials on Figma, and this is just what I needed... Great!
Thank you for your support, Jess!! Glad you found this series helpful!
@@mavidesign Good for a Coffee Time ☕☕☕
If you have problems with keeping the menu overlay open, try removing the "mouse leave" interaction and instead check "Close when clicking outside" in "Overlay" under "Interaction details". Hope this helps 👍
It was causing trouble initially but when I changed the timing for overlay to close a bit, it worked.
WHAT WORKS FOR ME: under the "close interaction" add a delay of 100ms!
Can you please share the figma file or made a community page on figma..?
thank you!@@lynnduong7525
Hi! A great lesson!
But the "Hovering" function does not work on the main element, before the dropdown
You're a great teacher. The way you're able to explain things in detail to help your viewers understand not only how to do something but how it works is a skill that very few educational channels have.
*Your channel is underrated*
They're really helpful contents. Not usual stereotype contents. I love it. Keep it up!
02:46 In this video, we will create a dropdown menu for the header navigation.
05:32 Creating dropdown menu items in Figma
08:18 Customize dropdown menu navigation in Figma
11:04 Creating a dropdown menu with menu items for resources, blog, success stories, case studies, and press
13:50 Designing the dropdown menu in Figma
16:36 Create a dropdown parent menu item with an arrow
19:22 Create an interaction to open and close the dropdown menu on mouse enter and mouse leave
22:08 Setting up a dropdown menu in global navigation on websites
This is super helpful, thanks! I am running into the error/bug of when the drop down parent is hovered, it doesn't do the hover effect. I thought it was me and rebuilt the entire nav and components...then realized it is a Figma bug. Maybe too many interactions in one component?
Resources doesn't get bold when you hover on it
This is great. I think we are missing the interaction when you hover on the dropdown_parent default, it doesn't change to the hover effect (black text in this case). I'm struggling in creating that interaction.
I am also struggling for the same could you pls let me know how can we fix this and apply hover value.
Not sure if this is the right fix, but I was able to create a bit of a hack for this by adding a second copy of the button into the overlay itself so that when the overlay appears the second button (with the hover state) appears on top of the original button along with the overlay. I added a 200ms delay to the overlay to make sure the interactions didn't interrupt each other.
I fixed it by adding a delay of 1ms to the mouse enter interaction
Thank you!!!@@amirtouma5802
Super helpful, finally I'm understanding a lot of little things that were not taught in my school , but I did not get how to make the radius apparent?
I love you! This is exactly the approach I knew it must work but wasn't sure how to make it. Helped me tremendously! Thank you!!!
Thank you for the great video, I've been following the series without problems until episode 9, when I click on the FAQs I can no longer scroll to the bottom of the footer, and the footer is less visible the more FAQs I open. Do you have any ideas on how to fix this?
Thank you !! I'd have to see the source file to determine what's the problem. Feel free to reach out to me via email or Instagram
Tell me if u fixed that problem... I have it too
Gracias por tus videos! para solucionar el tema del menu sobre el menu, apliqué un menu acordeon entre las opciones, asi no es tan dificil desplegar opciones entre cada menu item
Saludos!!!!
I watched till this episode and I just wanted to say thank you sir!! I am going to watch ell episodes of your series. Thank you, you helped me a lot!!!
By far the best and most useful tutorial for building a real flexible menu. Zhank you so much.
Wow! what a episode these is. Thanks for sharing these awesome.
This is such a helpful tutorial. Thank you so much!
Great videos! Much appreciated. QUESTION: Around 18:51, I understand your Interaction setting to "Close Overlay" when the "Mouse Leaves" the region of the overlay but I think we also need a setting to cause the overlay to close if the user moves the mouse away OUT OF THE "RESOURCES" MAIN MENU REGION. Can't figure out how to do this! I added an interaction fro the "Resources" Main Meny Region to "Close Overlay" when Triggered by "Mouse Leave" but it had no effect. Please help!
Agreed I also can’t figure it out
Your dropdown link hover 16:04 doesn't work, your arrow icon doesn't face up while hovering 19:26.
overlay is blinking while hover the mouse on resourcs
ive got this too its suck in a cycle
Thank you for sharing with great didactics!!!!!!!!!!!
Great tutorial, thanks :)
Is there a reason the drop-down menu wasn’t made into a component?
Resources menu does't change color when on hovering
Thank you so much. I have been confused with Hover and Mouse Enter
Thank you for all the video learning series
Really nice. Thank you for sharing. So helpful.
thank you so much bro
it was really helpful
How do hover and mouse enter work together? For example, when I hover over Resources, the color has to change and the drown drop has to open all altogether. How it's possible?
Got the same problem, but looks like it's not possible. Probably there is another way to prototype the dropdown part
Add a delay to mouse enter (1ms) that worked for me
thanks bro this tutorial is very usefull for my project :)
So why hover is not working on the drop down?
Awesome! Thank you!
This is too good thank you so much again!
7:41 i cant see that state menu.
Why in my Figma, under the current variant, there is only one column Property, there is no state or type?
thanks
Thanks for this resource!!!!
The problem Is that drop down menu icon didn't change from facing down to facing up
Yes, it is possible to do that?
Thanks so much! Only issue I'm having is if I dont put my mouse into the dropdown menu theres no way for it to disappear.. I thought maybe giving the header a "Mouse Leave" > "Close Overlay" but not a solve. Any ideas?
I have the same problem, still no solution. If you found one please share.
Same here :c even the other buttons hover animation "freeze" when the submenu appears. It´s like the active area of the upper part of the submenu became the whole menu as well...
How can you successfully apply a OnClick URL to the Resources text, should you want to?
Hi! Thank you for a great tutorial!
I have an issue with "about us" section of the menu.
When I hover over "Resources" button, "resources dropdown" menu opens, and every part of it works perfect. Then if I do not move my mouse on the "resources dropdown" menu panels and continue moving it on the main menu panel to the "About Us" section, it is not active, and the dropdown menu remains open.
How can I fix that?
Man,
I would like to congrats you so much… your tutorials are superb.
Thank you for that work you’ve done. It’s a gold mine for me.
So much thank you.
Could you also make an easy to digest tutorial on variables, because I have problem to
Wrap my heap around this topic ?
Also, one big question please… how could I be sure, that my header content is above the fold in figma since there
Is no above the fold tool like, in adobe XD?
Thx
The hover state of the drop down button in the menu does not work with the drop down parent overlay. So I set my hover to orange, but the button stays black but the overlay does fire. Does anyone have a fix for this? 1
Thank you for the tutorial, great job. If you insert an instance of the component in another page that doesn't work . Do you have any solution ? Thanks
Unfortunately I'm unable to determine the issue with your projects from your description alone
---------
To get more specific help and feedback with your project, please join my free Discord server.
You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
I'm unable to help everyone over TH-cam - thank you for your understanding!
Mavi
can you do a course on designing with ios or material guidelines
Why don't I have this feature?
I'm having problem with the alignment of that arrow it seems good in component but differs in child component as well as in prototype, can you help me with that.
Any ideas why I can't set the Resources to Resources Dropdown interaction? When I select "Mouse enter" and "Open overlay" I don't have an option to select my resources dropdown... Super weird.
Okay so I found out why. Because I had put all my components including the menu in a frame to keep everything organized.
@@mariadecat THANK YOU SO MUCH FOR LEAVING THIS COMMENT 😭
I've been going crazy trying to make the overlay and it wouldn't make the connection to the dropdown
I still cant figure out why i can't select it. Could you help me out?
@@egor1381 hi! You have to put the components in a different frame. Once you move the components to the frame try to do the overlay
The part from 15:00 where you make all the variants for the overlay and link them is extremely unclear. I watched this 10 times and can't get the overlay to show. You should have just explained this with a simple button that a 1 default and 1 hover state. I don't understand why you have to make it so complicated by having 8 variants.
Is there a way to navigate from the dropdown menu to another page, and then also auto-scroll to a specific section?
For example:
1. I am at the HOME page and I want to go to the ABOUT page.
2. The ABOUT page has a FAQ section at the bottom of the page.
3. In the top menu there is a button for ABOUT that also is a dropdown menu.
4. In the dropdown menu, many buttons correspond to the content of the ABOUT page.
5. At the bottom of the dropdown menu, one button says FAQ.
So what I want to do is, on the HOME page, open the ABOUT dropdown menu and select FAQ. It should take me to the ABOUT page and then auto-scroll to the FAQ section at the bottom of the page.
I hope I'm explaining myself clearly.
Please! send help! Thanks!!!
thanks
You can't close the overlay without hovering on the drop-down
another banger
🔥🔥 awesome
2:45
thanks
when i hover over the resources dropdown, the dropdown menu keeps flickering
ive got this too!
I fixed this bug by adding a 200ms delay on the overlay interaction.
after hours of head scratching i found this too - so weird such a simple prototype needs some 'hacking' to work @@wailingwizard
This only works if you enter your mouse inside the dropdown, otherwise it will remain opened if you do not enter the mouse
thank you
man i am lost half way through
Thank you, but even at 1.75x speed it felt too slow and long winded. You could assume that most of us understand how to make chevrons and so on, just stick to the interaction we are here for. I appreciate none the less
Sound quality is rather poor -he's mumbling & it's impossible to see his cursor.
too long video and unfortunately I didn't understand :(
wow this was really helpful, thanks