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.
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
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
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?
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.
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 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 (((
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!
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...
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!
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
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
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.
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
Hey @Mavi design I didn't figure it out 14:54 individual, how did that convert to category like submenu variant?
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?
Thanks lots, Sir. ❤️❤️ Please upload more for our beginners
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 :(
Thanks, man! lifesaver indeed!
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 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?
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.
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.
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?
This is a lifesaver and a wonderful tutorial. Thank you so much!
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 (((
HI, I bout your plug in, how to add one more category?
Un buen video para comenzar a conocer las interacciones de figma. Muchas gracias por compratir tus conocimientos. Saludos
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!
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...
Thanks you. I found the solutions.
In 14:39 isnt work with me
Very helpful, Thank you so much!
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
Thank you. This was really helpful
Very nice, but as you take it to HTML code for its real operation on the web
Could you do the tutorial?
Thanks alot for amazing tips 👏👏
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 !
Thank you. Love the explanation 👏❤️
It wont work in my end. Its hard to understand figma. Ugh
Finally I got 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
good but so fast found it hard to keep up
awesome tutorial
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!
"Do you see what I did there?"
NO! I didn't. Slow down, man! lol!
Working on it;)
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.
29min for what should be 2min
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
Good but too fast
Sooooo fast. I hardly could follow you. Really wanted to learn this. Bummer...
you go too fast at some parts..