No video :(

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

Подписаться 45 тыс.

Просмотров 77 тыс.

50% 1

Get the SOURCE FILE for this dropdown menu ($1.99): bit.ly/mavi-dr...
Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Get FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
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-de...

Опубликовано:

15 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 60

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

@elenkarapetyan7499 Месяц назад

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

@pankajjain8263 Месяц назад

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.

@brookethompson6662 Год назад

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

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

@jdeso3 2 года назад

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 2 года назад

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 2 года назад

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

@KopilaShrestha-yz5en Год назад

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

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

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

@user-oe1vb9kf6s 8 месяцев назад

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.

@jessicacanul4966 9 месяцев назад

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

@nattyleyo Год назад

Thanks alot for amazing tips 👏👏

@na_beel Год назад

Very helpful, Thank you so much!

@hillaryugochukwuaniugbo9347 Год назад

Thank you. This was really helpful

@THIDACHHIEN 9 месяцев назад

Thanks you. I found the solutions.

@melissaviesca2299 Год назад

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?

@sayekatchakraborty2552 2 года назад

Thank you. Love the explanation 👏❤️

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

@depullso Год назад

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

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

@voodazz Год назад

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

@mavidesign Год назад

Working on it;)

@vamshisri3431 Год назад

Finally I got it

@doxican 2 месяца назад

29min for what should be 2min

@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

@SuperRomanHoliday 6 месяцев назад

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

@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

@roarkeven 2 года назад

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

@mavidesign 2 года назад

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

@LorettaIndo Год назад

good but so fast found it hard to keep up

@handsoffmyskull Год назад

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

@Saeedeh1364 Год назад

awesome tutorial

@still_alive_yoon 2 года назад

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

@mavidesign 2 года назад

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 2 года назад

@@mavidesign Alright, I understood your explanation !

@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

@hashemsaleh538 7 месяцев назад

In 14:39 isnt work with me

@gcndc Год назад

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

@AgUzodinma Год назад

Good but too fast

@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