How To Create a Responsive & Interactive ACCORDION Component in Figma (Tutorial)

in this video we're going to build an accordion element that you can click to open and close and it's also responsive if you modify the width so to start we're going to have to create the headlines so i'm going to press t to select a text tool and then say headline we're gonna i can use avenir when you're next actually and then i'm gonna use the frame tool to create a placeholder for for the arrow icon that we're gonna create later let's say it's gonna have 30 pixels i'm going to name this icon placeholder and we want to make the headline a bit bigger let's say 18 could be appropriate i think maybe increase the size of the icon placeholder to 40. we can always adjust later so it doesn't really matter that much and of course we need to also create the text contents so i'm going to copy this all to height i'm going to make sure it's the same width as both both of these elements and then just fill in the contents so let's say this is an accordion content laura zoom and this can just go on the size of this is going to be around 12 pixels that seems appropriate i'm going to select these two and then press shift a to wrap them inside and alt layout i'm going to name this auto layout headline and icon and i'm going to make sure that the headline has the width settings set to fill container i'm going to also let the spacing between items to zero this should ensure that we can modify the width and that the headline is going to react to this so now i'm going to take this auto layout and then this text content at first i'm going to set this to medium so that it's not bold and i'm going to select both of these two and again press shift a to wrap this inside an old layout i'm gonna name this accordion again i'm gonna decrease this all the way to zero we're gonna make sure that the layout that says headline the auto layout that says headline and icon is also set to fill container so this ensures that when we take the whole accordion the whole auto layout and we modify the width that the auto layout wrap inside this is actually reacting to this we also have to set up the same for the text contents so we can fill container and now when we do this you can see that it reacts the way we intend it right and now we have to set basing also set margins to 20 and add a fill as well as rounded corners the fill is gonna be gray dark gray which means we're gonna set the copy to white and i'm gonna also bring this icon placeholder it's gonna be 24 pixels i'm gonna also add a line that's gonna divide this area so it's gonna split the space up a bit into the part with the headline and the icon and into the part with the text contents i'm gonna go to the pen tool and then create a line this line is going to be light gray i'm going to cut this command x and then paste it inside the accordion outlay out i'm going to move this and then again set this to fill container so you can see that we um if i set this to fill container it's going to fill all the way to the edges except for the margins the paddings that we set up elements inside an auto layout don't actually overlap you know go into padding areas so when setting this to fill container it takes up all of the available space but nothing more and since there is a padding available space means everything except padding if you'd like to learn more about auto layout if you're not sure how to use this feature and you maybe want an explanation go and check out this video it should be on the screen right now and in the description below where i explain how to layout alright so we will play around with the colors a bit i'm gonna make this a little bit subtle we're gonna also modify the colors later so preparation and we also want to make sure that the distance to the top edge and the line is the same so instead of 18 this is going to be 20. or if we decrease the sizes we also decrease the spacing i think something like this works better right and now i'm going to create the icon so i'm going to go to the ellipse tool by pressing o i'm going to create a circle that's 24 pixels i'm going to set the color to yellow so it's going to be ffff00 and then i'm going to go to the pen tool to create this arrow that's going to be black and it's going to be about this big width stroke it's going to be two pixels thick around endings maybe a bit smaller now always when setting up these dimensions for these elements um the only thing that really matters is that it has to look good and especially as you get more experienced you should be able to rely on your perception you simply look at it at the element and say well this looks good this doesn't look good and uh to get the sense of what is proportional and what is not oftentimes comes after a certain period of time you just spend looking at this stuff so i'm going to take this icon and then i'm going to paste it inside the icon placeholder so inside all right so i'm going to maybe we have to take this outside actually on a second thought i'm i'm just going to remove this from the auto layout together right so this this is actually starting to look as an accordion right and maybe we want to set the stroke to be yellow as well or maybe set a gradient that's going from uh yellow to cyan second one from yellow to cyan i really like this combination color combination especially on a dark background so we're gonna i'm gonna make this a little bit softer we're gonna decrease the opacity to around 30 maybe move this a little bit outside so that the yellow is more dominant dominant we're going to also set the shadow of the icon to be yellow as well so that it looks as if it's glowing and also finally i'm gonna i'm gonna add a few gradients to the accordion background so we're gonna go to fill here and then select the yellow color um and then go to radial that's going to turn this into a gradient let's just exp do some experiments i'm not sure where i'm going with this but let's try and make this work radio all right so maybe something like this and make them almost invisible so let's make them very subtle right and now if we change the size of this it's gonna adjust accordingly not intended by the way all right let's actually set up the component i think this is good to go i think we have the basic visual outline now we're just gonna have to make this work so i'm gonna select this and then go to here to turn this into a component i'm going to create a variant so the variant 2 is going to say actually it's going to be open and this one is going to be closed and just to change this from property one we're going to name this property state let's say i think that's more appropriate and since this is closed we actually and now that now we can see why now we're gonna see why it's good to use auto layout everywhere so if you just wanna make this you know look close you just hide these elements and now it looks closed right and also we have to rotate this so that it's this icon basically says this is able to be opened and here it says this is able to be closed i'm going to also prepare a screen for us so f to access the frame tool 1000 by 600 and this is going to be a screen actually i'm going to make this smaller right and now we will background just set it to now we will set up the interactivity so let's say what needs to happen is whenever you click this this is gonna expand and whenever you click it again it's gonna collapse but also we don't want to maybe the user will have to copy and copy and paste something from the text contents so we don't want this to be closed accidentally which means we won't be setting up the interaction to be triggered when clicking the whole element but rather i would say let's go for this area right that makes sense so this headline and icon auto layout so whenever this is clicked it's going to open and whenever where it's clicked again it's going to close all right so i'm going to go to prototype and then with this selected i'm going to select this and snap it here so on click change to state open and the animation this is important is gonna be smart animate right smart animate let's say this is gonna take 200 milliseconds then the same needs to be done here select this again then click and drag on click change to state closed again smart animate 200 milliseconds all right this should be this should be finished now i'm gonna just prepare for you to see how you can actually stack this up i'm gonna take the accordion paste it here right i think this looks i mean look at this i think this looks awesome the dark background with these with these gradients on on the on the accordion i mean that i think it looks awesome maybe we want to make this darker i don't know slightly lighter right i think this is good okay so you so this will be a singular accordion but then you can also have like multiple right we're gonna it's gonna be an auto layout like all of these shift a let's see what we created let's launch this prototype fill screen okay so i think this looks pretty good i mean check this out if we click this area it's gonna animate and the icon is gonna be rotating as well so i think this looks good and now for this second part of this so if you click this and if you stack them inside an auto layout you can see that it moves all of those beneath it moves them downwards so i think this is super cool this really feels like an actual interface and what is good is that if a user clicks the text maybe let's say i want to copy something i want to you know select this and then press command c and paste it elsewhere when i click this nothing happens right so um only if we press again this area or you can press the icon directly all right this has been how to create an expandable interactive accordion component if you enjoyed this tutorial if you found this useful i would appreciate you leaving like if you're into this type of stuff if you like creating interactive prototypes with figma you're in the right place i have plenty of tutorials on my channel so definitely go check them out thanks for joining me and i will see you in the next one

Channel: Mavi Design

Views: 38,101

Keywords: figma, figma tutorial, figma tutorial for beginners, accordion component, accordion component figma, interactive prototype figma, accordion figma, accordion figma prototype, accordion web design, accordion UI design, ux ui design, accordion ui element, figma responsive layout, figma responsive accordion

Id: SQWMFFhBSaE

Length: 11min 49sec (709 seconds)

Published: Mon Jul 25 2022