Creating An Interactive Accordion in Figma

all right today we're going to learn how to make a interactive accordion component in figma that you can use in any page and you don't have to create a new screen for your open versus your closed states thanks to figma's new variance features so we have our canvas over here with our cabin app and we'd like to add a little drop down or accordion that talks about the different amenities within the cabin so here we have all our elements we have a garden on-site shaft wi-fi puzzles and workshop we have our chevron and we have our amenities title so the first thing we're going to do is we're going to take our amenities and our chevron and we are going to frame them and we are going to add auto layout and we will probably go space between so that we can stretch them out and they will expand so you can set it so that you can fill the size later but right now i know that the inside is 335 so i'm just going to set it to a fixed width right now so now that we have that we are going to call that our header and then we are going to frame it one more time and then we are going to call this our accordion and this frame we are also going to give an auto layout but we are going to make sure it is going vertical and we can stick with the top left is totally fine for this so one thing we want to add in here is if you're to drag it in right now you can see that it it's in there it's nice but i want to add some just to give it some bounding boxes i'm going to add a line except that needs to be outside of the header and i'm just going to make sure that that fills the container and i'm going to duplicate that and use my arrow key to move it up so now we have a line on the top a line on the bottom and that is our basic accordion so you can drag it in that's going to work just fine so now the next thing we're going to do is we want to add all of these guys in there so just in case you want to change the spacing between your lines and your content we will take these i'm going to frame them i'm going to add auto layout and i don't think we need 20 between them so we'll bring it down to maybe 12. okay we will call that items and we're basically going to drag this right into our auto layout here so this is our you can see this is kind of what our expanded state is going to look like so now i will go and i'll create a component out of this the first thing i'm going to do is i'm going to select my amenities um if you want them to be indented a little bit since they're framed we can add maybe 20 pixels just to give them a little bit of an indent i don't think it's necessary well maybe let's give them a slight indent so i'm going to select these and i'm actually going to hide them and then i'm going to create a variant called open and in that variant over here i'm going to make them visible and you just have to drag your box open a little bit and then we're going to take our chevron and we are going to flip it and now we have a closed state and an open state now all we have to do is click on our first variant drag your prototype to the open one on tap change two we'll leave it as instant sometimes you can use smart animate but sometimes it doesn't work so um for the simplicity of this tutorial we'll leave it off and then on this one i'm just gonna click into my actual header and i'm going to drag that prototyping back up so now you can see when we go to our assets we can drag this in one important thing to note is for this to work really well is use auto layout on your page or at least in the section so that when it expands it pushes all the elements down so you can see now that when we run our prototype i click on it it expands pushes all the content down everything is kept in place and you can collapse and expand it as many times as you want without having to create a new screen and the nice thing is now that its component is you can reuse this in any screen and you don't have to basically recreate a bunch of different canvases to show one simple interaction um this allows you to do animations as well but i might do that in a simple tutorial so there you have it simple and easy creating an interactive expandable accordion component that you can reuse on any screen

Channel: Darren Northcott - Figma, UX & UI

Views: 34,304

Keywords:

Id: 5_l5KKnG7Uw

Length: 5min 50sec (350 seconds)

Published: Fri Jan 28 2022