Figma Accordion Menu | Animated Working Accordion Menu

hi everyone and welcome to today's figma video today i'll be showing you something unique and very special in figma something i discovered and learnt recently we're gonna create this school accordion menu in a few simple and easy steps so this is how accordion menu is going to work you can click on that arrow then to actually just drop in and then it will just slide in so you can click on any error and to actually just drop in and then just open up as you can see so you can create that accordion menu you can close it from any direction from any side as you choose you can live in a side open it actually really doesn't matter so i'm gonna do this in a few simple and easy steps we're gonna learn how to do this using auto layout and then using components and variants at the same time and so just sit down relax and let's learn something new [Music] all right so before we start today's video there's something i want to point out something very very important so uh in in a few videos in the past i've been trying to create this accordion menu but i've been having some issues i think it's some issue some of you may have encountered every time i click and design i find sometimes there is an overlap of text and this is something that does not look neat it's something i want to avoid when i do my designing so as you can see when i open this second section too there is an overlap you actually see the text you access the accordion menu opening up behind section three and that's something we want to avoid so that's something we're going to learn we're going to learn how to create a neat accordion menu today in a few simple and easy steps so just might just be careful about that that's something we're going to eliminate and we're gonna work on that all right so we're gonna create a new project let's just click on plus new design file all right so we're gonna name our project are called dion menu alright so i want to emphasize something i want you to make sure you follow each and every single step make sure you do not miss out on anything because missing out on any step will actually some things may not work out so make sure to do exactly what i want to do and don't skip any step all right so we're going to first type in some text i'm going to type in some text i'm going to type the text category category one okay um so we can increase the size of this text a little bit let's increase this to size um let's try size 18. all right so i'm going to change it to my favorite text font i love using poppins we're going to use poppins bold all right so we're going to change our text color let's change it to white don't worry about that so we're gonna right click then i'm gonna add in some errors there's a plugin i love using so much font or some icons so i'm gonna make use of some errors right here so this greater than sign just click on that all right so we have that so you can zoom in so just make sure to click on the greater than sign then i want you to drag out okay so that pulls it out from this title we're only interested in the symbol okay so i'm going gonna drag this and we're gonna place it right next to our text so we're gonna change the color of this to white also all right and then there we have it so next we're gonna highlight both then we're gonna we're gonna create an auto layout so there are two options of creating auto layout you can go right here on the right hand side then you can click on this plus icon or you can actually simply right click and then just say add auto layout and then there's also a shortcut shift a so you can do anything you want but i just love doing this this would be simple for demonstration just click on this plus icon and as you can see this the uh this has changed and then we've created an auto layout okay so i'm going to call our author layout a ding one actually let's just call it heading because it's actually the only heading so make sure your auto layout is selected then we're gonna align this we're gonna do some alignments just go to this alignment so i may just want to align to center all right that's fine now so we're gonna add some fill color to our outer layer just by clicking on the plus and we're gonna give this a purple color okay we're gonna make use of that purple all right so there you go so next we're gonna we're gonna do some padding on our auto layout so this is direct just make sure to select your order out and then we can just drag around the edges and then that actually does padding okay some cool knit padding okay that that that will do then what uh what's up what i'm going to do is i'm going to add the spacing between this and this so i'm going to increase the spacing to let's try a hundred okay 100 is still not too big let's try 120 right there you go that would do all right so next we're gonna we're gonna add type in some more text so just make sure to click on your text icon so we're gonna work on the content on the content section so just uh drag so we're gonna drag like that all right so i'm gonna add some text i want this to be font 12. so i'm going to make use of a plugin i've installed it's called lorem ipsum so this is going to generate text for us so i'm going to auto generate to make sure to just fill in those boxes all right so there you go we've auto generated some text so just gonna make sure our text is set to white okay so this is gonna be our content within so we're gonna write we're gonna we're also gonna create an auto layout of this just right click and then just say add auto layout okay then so we're gonna call this auto layout we're gonna call it content there you go then we're also gonna add the fill we're going to add a dark color something not to dark but right around that then we're going to change our text to regular yeah that will look more neat so gonna so i'm gonna reduce the size of this just make sure it fits so what what's happening is our text is actually not not appearing clear so just gonna reduce the size of the text class just reduce the font size to 10. so that would do okay so we're just gonna fit our content box just make sure it fits in well all right so it looks much better so um [Music] okay so just make sure your text is aligned to centers just select on that then we're gonna align our text let's just align that to center all right that will work so just make sure to drag this let's just position it right below okay so that's how our content will look so we have two auto layouts designed so what happens next is we're gonna combine this into one so make sure you select both the content auto layout and the heading auto layout then we're gonna right click and then we're also gonna click say auto layout so add auto layout a combination of both so combination of both are going to call it the accordion all right so there you go so with our coordinate selected so just right click and then we're going to create a component out of that all right so we've created a component so we're going to go to our component and then we're going to add a variant so just so right here on the right hand side you can click add variant right all right so we've added variant all right so what we're gonna do is we have the default and we have variant two so what what we're going to do is with our component selected so just going to go right here so where you have the variance here so i'm going to change the titling of this text so i'm going to call this uh so we're going to call our variant open that's just the name i choose to call it and then for the first option so this is our default this is gonna be set to false because uh it is not open by default all right so we're going to change variant 2 to true because variant 2 is open okay so next we're going to just go to where you have so we're just going to go to our our default right here where we said it's first then we're going to hide the content so where you have the content section you're going to hide that just click on the ice so i've hidden that and yeah that looks much better so next just for neatness we're gonna uh just just just for neatness you can right click all right so so be before before we do that we're gonna do some uh prototyping okay so we can so we have the open true and we have the open force just go to prototype so we're going to select this so when someone clicks on this we're going to say on click change to just make sure this is set to open okay change to then we're going to use smart animate so it will change to the cut data category by default then we're going to make sure this happens quickly so i'm going to let it happen in 100 milliseconds that would do sorry let's just set that to 100. so i want that to happen really fast okay so i'm gonna do the same thing so just go to the other the other variant so we're gonna add an interaction too so just we're gonna click on change to so we can close this let's just make sure set that to auto animate then also going to change the timing to 100 milliseconds right and there you go so next we're going to select to search for just neatness we're going to select our entire accordion and then we're gonna we're gonna add an auto layout again just for neatness so i'm going to do something that will just make it neat so this will allow me to like order the contents uh in a better way so we're gonna change the spacing it's just for neatness we're gonna change the spacing to 20 so that's just so that our entire component looks neat okay and uh there you go so uh in our second you know on our second variant yeah so within the the heading we just want to make sure this error actually faces down so when someone clicks on this and then it changes to the to the variant we want this arrow to face downwards so we're gonna change that to degrees to 70. okay and all right so it has actually turned in the other direction when you type into 70 that's also the same as negative 90 so that would do alright so we are almost there so next we're going to do something very very important we're going to create another big frame so we're going to create a major frame the frame we're going to be doing most of the work also the animations so we're going to create this major frame and then in this new frame we're going to add an auto layout so with the new frame selected just click on add auto layout so this we're gonna call the main frame okay [Music] all right so next we're gonna select our our open force here we're gonna select our default we're going to just make a copy of it by holding alt just make sure to make a copy of that they're going to insert it into this frame okay and just make sure to enlarge this frame a little bit more so we're gonna do some auto layout within this frame so just make sure that mean your mainframe is selected and then make sure it's set to vertical and then we're gonna change the alignment let's change to align center from the top okay so next we're going to duplicate this just click ctrl d it's i prefer to do it ctrl d i would actually do that four times you can do it however many times you actually want so we won't just make sure our content is actually spaced but not too much so we're gonna reduce the spacing to um let's try reducing the spacing to one so it actually looks better but let's try 0.5 okay so as you can see our content is best all right so next we're going to just change the naming so i'm going to change the naming of the headings so i'm going to change this to um category 2. so i'm going to also change the heading of this category 3 and then we're going to do the same thing for the fourth one change that to category four all right just make sure you followed each and every step that i've done just make sure you've done exactly what i've done and then with that done we can click the play we can run it just give it a second to load all right and there you go we've loaded the animation so let's try to let's try to click [Music] as you can see our accordion is actually working let's try to change this to um let's change that fitting so that i can actually click on all as you can see all the different categories are working and uh it doesn't matter you can have all open at the same time you can close any it will still work anyhow and that's how you create an accordion menu using auto layout and then components and variants in figma in a few simple and easy steps i hope you learned something through this video if you learned something feel free to tell me in the comments i'll i'll be glad to reply and then uh if you're new to this channel i encourage you to subscribe and join in the community and then don't forget to hit that notification bell so that you get updates every time i upload a new video i hope you learned something about something new about autonomy in today's video and then your knowledge of components and variants actually went to the next level after the act so um thank you so much for watching today's video i'll see you all in my next video have a nice day [Music] you

Channel: Create Beautiful Things

Views: 479

Keywords: Figma Accordion Menu | Animated Working Accordion Menu, figma accordion prototype, figma accordion, figma accordion animation, figma accordion menu, figma expand collapse prototype, figma accordion menu prototype, animated accordion menu, how to design accordion menu in figma, figma auto layout, figma accordion menu using autolayout and variants, figma component variants, accordion menu prototype, figma collapse menu, figma drop down menu, figma dropdown menu tutorial

Id: KKlQ9mVXPJU

Length: 16min 23sec (983 seconds)

Published: Fri Nov 19 2021