Multi-level Nested Dropdown Menu in Figma | Figma Nested Components and Variants (2021)

hi everyone and welcome to today's video i'm going to be showing you today how to create a nested drop down menu in figma so check it out so when i click on this we can see it's a normal drop down menu like the way we may have been used to but when i when i highlight and hover over the different elements you can see they turn to blue this is a cool it's a cool feature that we're gonna work on in this video and then when i click on this you can see we have a third sub menu so this is what i would call a nested drop down menu in figma so if you wanted to know how you can do this you today you're in the right video it's your lucky day so without wasting time let's get into today's video [Music] all right so we're gonna open a new project let's click on this and just give it a second to load then we're going to name our project let's give it a name that matches with what we're doing we're going to go call this a nested drop down [Music] menu all right so there you go just add an all right there all right so next we're going to add a frame into our design let's just make sure you know the size doesn't matter really just make sure you create a frame any size any size you'd want so now what we're going to do next is we're going to work on different items we're going to call components so we're going to create our sub menu but we're gonna use a functionality of components and variants so with this just pay very close attention because this is where it may work or it may not work but i'm sure and i guarantee you that it will work for you today so let's just create a design right here so we're going to create off our our menu i'm going to change this color let's change it to black okay then we're going to add some text right there let's type in you can type in anything but i'm going to type in the word services i'm sure you can't see that yet but we're gonna just because of the color just make sure it's white but as you can see the text is actually so small let's increase this 2.25 okay i think that looks better that's the right size and i'm gonna push this a little bit towards the right to create room for uh design just just make sure it's positioned right around all right so next we're gonna design we're gonna add a polygon it's gonna be a rectangular polygon we're gonna reduce its size so let's just compress this let's compress this from the top okay actually i want this to be facing down so i'm going gonna rotate this by 180 set confess down okay so that's like a signal that when someone clicks on this rectangle there'll actually be a drop down menu right below okay i think that looks good from from the outlook of it let's just yeah i think that looks okay all right so next we're gonna we're gonna use the knowledge of components all right so next we're gonna highlight this then we're gonna turn this into a component so just right click and then we're gonna say create component okay so this is gonna be our component one so we're gonna call this actually let's just change the name i'm going to change it to the name main change to main component okay so that's our main component right there so we're gonna add a variant to this so just write add click on the plus icon right there then we're gonna create a variant okay so right here inside the variant just click on that drop down we're gonna go and uh we're gonna change the polygon in the variant we're gonna rotate this we're gonna change this to zero so that it faces upwards okay all right so it's actually facing up just to want it then we're gonna change this color to something light blush like that then also gonna change the text in the variant to something light bluish just the same color as the as the icon okay so this is our this is our default and then this is going to be our variant what happens when an action an action takes place so when we're going to select our default then inside our default we're going to go to prototype and i'm going to add an interaction so i'm going to say what on click change to variant 2 and we're going to smart animate all right then we're also going to choose our variant then we're going to say on click so when someone clicks on the variant some interaction also happen we're going to change to default all right then we're also going to make sure this is set to smart animate right so if we run this just give it a second to run so when you click on this you realize that our animation actually works just like we planned and uh so this we can go to the next step all right so back to our project we're gonna continue we're gonna proceed forward to the next part so what we're going to do next is we want to duplicate this uh it's just going to variant 2 we just want a duplicate of the rectangle just hold alt so this is just a duplicate we're going to use this for the other different menus all right so we're going to type in some text so the first text i'm going to type is menu one okay so just gonna change this color to white so that it's actually visible let's just make sure it's actually centered yeah so that's right the center then we're going to duplicate this three times actually two times like that and like that so this is going to act as our menu to menu item two then this is going to be our menu item three all right so we're gonna reserve menu three four a sub menu we shall work on that later so we're going to first deal with many one and many two okay so this is our menu one right here so what we're gonna do is we're gonna make this create a component out of menu one so i'm gonna call this component a menu one component okay so also when i create a component out of menu too we just want to create components so i'm going to call this menu to control i just hope i spell that correctly all right so that's it we have many one and many two components so we're gonna go into our menu one component and we're gonna add the variant just click on this plus right here add new variant so we're gonna add the variant to this so we want to want to make some changes we want to when a whole so this is what you want when i use the hovers over over the default we want just make sure it actually changes to light blue sky blue so we're going to go to our variant too so i'm going to change the color of the rectangle in the variant to something light blue okay so go into our prototyping just make sure you have your default selected go into your prototyping then you're going to add an interaction it's going to say while hovering change to variant 2 then we just want to make sure this is set to smart animate okay yeah that's it so i'm going to do the same thing with our menu two components so we're gonna add the variants to just go back to your design just click on this plus and add a variant to our menu too sorry about that we just wanna make sure menu three is hidden for another use so in our minitor component we're going to go into the go into variant 2 i'm going to change the color of the rectangle even variant 2 to sky blue all right then i'm going to do the same setting so just go to the default prototyping add an interaction console while hovering change to variant two just make sure that set smart animate all right and that's it so what we're going to do next is we're going to duplicate our our default menu so we're going to go into the menu one component just make sure you select the default then holding alt on your keyboard you're going to duplicate that oh sorry about that just make sure to go into your design mode select your default and then we're gonna duplicate that okay just make sure to have a duplicate of the default of this of the menu one and menu two okay so now we're gonna broaden our main component right here just gonna we're just gonna add some add some things to the add some creativity to the to variant two of the main components so we're gonna add mainly add these into the main component into its uh into its um second variant so this duplicate we've created of the menu one component we just want to make sure we drag this and make sure you drag it and place it within variant two of the main component right just like that so when i do the same thing for menu too just make sure to drag it and just make sure it's within the main component variant two all right so we're gonna create some design we're just gonna some more creativity we're just gonna design variant to a little bit more so i'm gonna draw a rectangle right here just make sure so this is just for design purposes we're just going to give this a sky blue color just adding some design to our just make sure this so it's actually within variant variant too so just make sure to place this right below i'm gonna place a mini one right below there all right so same thing with menu2 just gonna position it right below a new one so you can zoom out all right so we're gonna test our r2 menu so just click on the play button so when you click and it drops down oh sorry that just shows you that menu one is probably not within the variant too as you can see it has actually moved out just make sure to drag that back in so i'm going to run this again and because you can see it's actually back in so this time when we drop down you can see we have menu one and many two then when we hover over menu one you can see that it actually changes to sky blue same thing happens when you hover over menu two and that's like that's now gonna be our second step okay so lastly we're gonna work on menu three now menu three will require some more creativity but uh nothing to worry about that all right so we're gonna set our menu one component to the side we need to component to this side all right so we're gonna need some rectangle it's just gonna go back into our main component so we're gonna duplicate this uh this icon right here this rectangle shape so we're gonna make use of this in our menu three so we're working on menu three now so let's arrange this uh bring to front all right so working on menu three now so just to make sure this is actually facing the right direction let's change this to 270 right that's actually it it's just gonna leave that as white by default by default it's going to be white all right so we're gonna make some uh duplicate we're gonna duplicate this let's just duplicate this that rectangle all right so uh next we're gonna turn our menu three into a component just select it all and then we're gonna say create component okay so i'm gonna add the variant into our menu three like that so i'm gonna change this i'm gonna name this component um menu three control net okay so we're gonna work on variant two of the menu three component so i'm gonna change this rectangle just gonna make it face the other direction just change that to 90. all right that works so you just want to make sure in variant two it's actually sky blue in color okay okay not sky blue let's change that um let's do the same thing just we're gonna change this rectangle color to sky blue actually okay then let's let's leave this as white all right now but we're gonna we're gonna we're gonna uh edit the menu through component furthermore we wanna just wanna make sure that the actual submenus that appear just want to make sure the sub menus that appear right below it whenever user hovers through okay all right so in this rectangle we've just created we're going to add some text i'm going to call this menu one so we're gonna change this text color to something white let's change this m to a small m all right so we're gonna change this into a component so just create component so this is working on the sub menu so i'm gonna call this sub menu component all right i think i have the spelling i think i have the spelling right so i'm going to add a variant to this uh on the variant the variant of the sub menu component we're going to change the the blue to sky blue yeah just make sure it doesn't sky blue and never use our hovers so let's add some setting there so and so when i use the hovers over the the default or hovering change to variant two just make sure it's set to smart animate all right so that's it for the sub menu so i'm gonna duplicate the sub menu all right so when i duplicate that then i'm gonna make sure so this duplicate we've actually just made we're just gonna drag it into the variant two of the of the sub of the so let's first drag this let's place it within the menu three components just make sure you have it within variant two of the menu three component all right so right there we have it inside variant two so the sub menu component will actually appear on the right side let's zoom in make sure we have that perfectly all right so gonna duplicate this two times let's just uh position that right this i want our sub menu to just pop a little bit on the right hand side so we can actually edit the text juncture edit edit the text right there so just want to make sure that our so when i change this text to sub menu 2 and we also want to change this text to sub menu 3. okay so next we want to make sure that all our sub menus are within that just want to make sure that all these are within the menu three variant two just make sure that they all are within variant two of menu three all right i think that's it so next we're gonna add some we're gonna prototype the menu three component so we're gonna add some prototype let's go into the default of the menu we're going to add an interaction so let's say um one click change to variant two so i'm gonna smart animate that right i think that's it it's gonna play and then we're gonna test it so this is our main component so when you click on that we actually have the first actually so we have to make sure that we have menu three so that's something we've just forgotten we have to add menu three into the main component so that's something we've not yet done so we're gonna duplicate the the default of menu three duplicate that so i'm gonna drag this we're gonna place it within the main component so this is our menu three component just wanna make sure so it's actually you just want to make sure that our menu three is within variant two of the main component so i'm gonna position this just make sure it's positioned rightly otherwise it will not appear in the final all right so that's it so we're going to play again let's try it one more time just make sure it's actually it's not yet in so let's drag this in just make sure it's within there so we're gonna click on play again all right so finally it has actually appeared so this is how our how it looks now so let's go back into our menu three actually it's all okay so this is how it looks now when you click on the main component on the main drop down we have this this appears so when you hover you see menu one turns to blue main two changes to blue but now when it comes to menu three relax you have to click on the on the drop down button as you can see we have our sub menus so when you hover over the sub menus we also have they also change colors okay and then we can we can always so so one one one thing we didn't do is we didn't actually add a functionality to this so actually that's why it actually cannot close so we cannot close the the the variant two of the menu three so for that to happen we're gonna go back to our menu three component right here so we're gonna add some action to variant two we need an interaction so it can go back to the default so i'm going to say uh one click change to default so i'm gonna smart animate that and that's it so i'm gonna play again so let's try it again so when you click on this you can actually see many three actually closes and uh that's it that's how create our sub menu our nested drop down menu using figma in a few simple and easy steps i hope you learnt it there's a lot to do with components and variants it's a little bit complex but actually when you understand it it's it actually makes sense at the very end of it and there is so much more you can do with this knowledge well i hope you learned something uh if you feel you learned something and just tell me below in the comments and then if you're new to this community i encourage you to subscribe and join in the community search you get updates every time i upload a new video so also don't forget to hit that notification bell because i'll be updating every single week with new concepts i hope you learned something today and i hope this uh this helped you in your knowledge and figma otherwise thank you so much for watching i'll see you all in my next video bye [Music]

Channel: Create Beautiful Things

Views: 243

Keywords: Multi-level Nested Dropdown Menu in Figma | Figma Nested Components and Variants (2021), figma drop down menu, figma dropdown prototype, drop down menu in figma, figma nested variants, figma nested components, figma dropdown animation, figma dropdown variants, figma dropdown navigation, figma dropdown menu tutorial, figma dropdown menu with variants, figma dropdown menu template, figma variants prototype, animate figma, figma sub menu, figma sub dropdowns

Id: v5iQwx4uXNI

Length: 22min 28sec (1348 seconds)

Published: Thu Nov 18 2021