Creating An Interactive Accordion in Figma

This Figma tutorial shows how to easily create an interactive accordion component that can be opened and closed within your prototype without the need to create separate state pages.
Subscribe : / @darrennorthcott
Patreon: / darrennorthcott
Sign Up for Updates, Tips & Tricks : northcott.subs...
Download Figma: bit.ly/41F6yaS
#figma #figmatutorial #autolayout #animation #smartanimate

[@jenniferchristensen4925]

This is honestly the only tutorial I've found so far that explains how to do this appropriately where I can follow along. I've watched like 5 tutorials about this and couldn't do it. Great job and awesome job at making it genuinely understandable for beginners!

[@jennifertan1062]

To echo everyone else's sentiments, this is one of the most clear tutorials. Much needed for a beginner like me. Thank you!

[@SavantStudio]

Thank you!!! Only video out there that clearly explains this to the beginner. Really appreciate it!

[@melissasamaniego5801]

Stopped using figma for a while and now need it in my job so bingewatching lots of tutorials! Thanks so much for this tutorial -- super clear and informative! Hope you post more tutorials down the line!!!

[@TheMarchus]

This video its more helpful than a lot of the courses on internet (nice design)

[@kitkat-cz1su]

Wow! Simple and easy indeed. Could you do a tutorial on how you do the auto layout for the screens? Thank you for this!

[@zeinabibrahim]

Thank you a lot,but once i make the page auto layout the whole page gets runined ?

[@rosamundvincent7195]

Thank you! I have been struggling with this all morning, much clearer than some I’ve seen! 🙌

[@keithdonner1942]

What is the secret to getting the text blocks to slide down? I can get the open and close but it just overlays the existing text? I have auto-layout vertical on all of them

[@Swiftredmoon]

I know it's a year late, but have you ever figured out the answer to this?

[@heykinan]

thank you for a very easy, short and clear tutorial..

[@mania-mono9563]

Thank you so much! I've been struggling with it for so long.

[@amosostos8375]

This is Gold! thank you for making so easy to follow and short

[@Ipetblitz]

This was really explanatory. I could follow along and achieve just want I intended Thanks

[@roter13]

I keep getting stuck at the very last part. How do I make the elements below move down when the accordion opens?

[@DarrenNorthcott]

Make sure your outer most auto layouts are set to 'hug' that should do it

[@epicfiles1647]

Hello can you tell me how to set page to auto layout as I have selected the page and auto layout and my accordion is still cover my other page content

[@lukedharrison326]

This was a great tutorial, thank you!

[@aydemironur35]

Making dropdowns as a variant very good idea. Thank you so much! I were trying to do with seperated frames. It looks so stupid now :)

[@aminahayat1529]

The ONLY tutorial I fpund which is explained so well and quickly. thankyou!!!

[@DarrenNorthcott]

Thank you, that means a lot

[@jh070360]

great explanation, thank you!

[@crkumarasingha7167]

That explanation ❤👌👏

[@paulharvey11]

It seems I'm not alone when I say that this was so easy to follow and understand. Thank you for this! subscribed too.

[@DarrenNorthcott]

Awesome! Thank you!

[@namratakadam2257]

thank you

[@ouajbir]

Absolutely smart

[@dreamersplaylist1049]

great video! made it very easy to understand.🙌

[@water1990]

Very useful, thanks!

[@smzxi]

i learnt so much from this tutorial!!! thanks a ton!!

[@DarrenNorthcott]

Glad it helped!

[@BrialMusic]

You don't actually need to create frames in the first place as autolayout basically creates them for you. Fastest way to do this is with Shift+A

[@yuliabilonoh2402]

Wow, cool! I did it. Thank you so much

[@DarrenNorthcott]

You're welcome!

[@mitalinaik282]

Can you share a Figma file with this example? That will be very helpful

[@opekatakata1424]

Thank you. I did it!!

[@mneypit]

Wait, Don Draper is doing Figma tutorials now?

[@clotildadaniels6453]

Just subscribed… great 😊 video

[@lakshminarayananks1521]

for me the object below is not expanding even though after applying auto layout , idk in which i am missing out

[@CnisterScreams]

can you create an updated version of this in figma? the figma updated its features and i cant find anything (i just start learning ui/ux this month). thank you so much in advance.

[@rotanask5067]

sir thank you so much finally I was able to do it

[@mahmoudabdullah6647]

Thanks😀

[@adustan]

yeah, this works, but what i am trying to figure out is how to do this using the boolean property, which is way more efficient for designing components than creating separate variants for open/closed

[@DarrenNorthcott]

Except the boolean property won't let you prototype between the states, thus removing the interactivity of the component.

[@adustan]

@@DarrenNorthcott yep, that's why I was saying this works of you build components in the older, more cumbersome way of variants, and not the newer boolean way. we literally just figured it out tho. we built a base component of just an open & closed accordion item. added "change to" interaction between the 2. then we built our actual accordion stack component with multiple instances of that base component (each being having different instance content).

[@FCSouillon]

Hello, how do you integrate blocks (frames and groups) inside others ? Is it a plugin ? At 3:00 Thks !

[@tara730]

nice

[@jasmines6768]

I was wondering forever how to use this component so that the other elements on the page moved with the accordion . thank you!!! edit: can you show how you set up autolayout for the screen

[@DarrenNorthcott]

I'm going to do a video on autolayout soon

[@leelareddyvooravakila1537]

Hi Darren , this video is really helpful. Thank you so much. I need help . When a screen has too much content vertical scroll is not functioning

[@DarrenNorthcott]

Try either using an auto layout for your entire page (see the sticky header tutorial I have for how this works) OR try enabling vertical scrolling on your parent frame under the prototype settings

[@vanessanwosu8012]

hello, thank you for your help! I tried to make my whole page responsive/ in auto layout. kinda like how yours moved when u opened and closed the accordion. But when I put my page in a frame everything kind of bunched up to the middle or to the left. Can you tell me what I'm doing wrong?

[@DarrenNorthcott]

Make sure your outer frame is fixed width, and check your padding, and your inner elements to see if they are set to fixed or fill, fill might fix it.

[@alfredosmith6107]

youve made this simple and easy, thank you! Can you change the contents of the menu once you pull it from the asset menu? or does it revert back to the original component? whats the best practice to edit the menu? mine reverted back.

[@DarrenNorthcott]

you should be able to change the contents once its in your design, just switch to the open state and change it there, alternatively you can add a content variable to the open state and change that in your designs.

[@ricardocastillosandoval9383]

do you know where i can find a tutorial that shows an accordeon similar to this but with 2 or more items, where the open item closes as you open another one?

[@facesofwestham]

Real good video thank. Do you have plans to more videos on figma ?

[@DarrenNorthcott]

I do, I've been offline for a bit, but more are coming soon!

[@saistachhipa3053]

what if i have more catagories and more items to it , how can I manage it

[@DarrenNorthcott]

You'll have to build those into your component, you can add as much content as you like since it uses autolayout it should be pretty flexible.

[@elisabethsuter]

thank you for the tutorial, anybody know if it is possible to create a dropdown menu with variable content? so that you can change the items in the dropdown each time you use it? thanks

[@DarrenNorthcott]

If it's just text, you can edit the text in the instance of the component each time (just set it to open to edit, then you can set it back to closed) - if the items are more complex, try making each one an instance, then you could use instance swap to change them out.

[@benjaminbellersen7184]

This is more of a dropdown than it is an accordion.

[@nicofernandez6034]

thank you

[@heylaurilee]

THANK YOU for creating this. By far the most easy to follow tutorial on this that I've found!

[@ghostporcupine]

This was very helpful and easy to follow. Thank you!

[@teamwork6929]

can this desing be in pdf file ?