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

[@mavidesign]

Upvote this comment if you'd like me to add this component to my store 👀 (bit.ly/mavi-design-store)

[@steveglew301]

I think this is really cool but I followed your tutorial a few times to make sure I wasn't missing anything, but could not get the open accordion push the one below down. What am I missing?

[@МаксимСліпенчук]

Very detailed and clear tutorial, thnks bro!

[@dvampofo]

Used this tutorial for a project Im working on. Thanks for producing it!

[@Geremedia132]

Thank you for your good training. In the end, when you made 3 accordions, if we click on all of them, they will all open, but how is it possible that when we open the second accordion, the first accordion is closed?

[@Asi226]

I'm new to Figma and design and your tutorials are the best I've found, very informative and helpful. I especially appreciate seeing your thought process and that you explain each step and the reasoning behind it. Thank you very much, keep them coming.

[@maicon4820]

I was breaking my head here and found your video. Thanks for helping us friend. Hail from Brazil!

[@pritikamat5257]

Hello Mavi, To push the content further below , both pieces should be in a same auto layout, was a very imp tip for me. Thanks again., Very informative video.

[@EmiPubmarket]

Still doesn't work 😞

[@sovitkharel9165]

I was stucking with this you helped me a lot. Thanks a lot.

[@alanchang3577]

This is it!! This is what I've been looking for, thank you so much!

[@josephlawrence927]

the most detailed accordion video

[@ampliar.online]

I just wanted to say a big thank you for the tutorial you recorded. It's 3 AM here, and I'm watching your video. It was exactly what I needed to create an accordion card effect in Figma. Thank you so much for your help! Best regards, João from Brazil

[@aaftabkhan1051]

This is super awesome, Kudos Man

[@kikzurass]

You just saved my life, dude, thnx!!

[@niroshansubash]

helped me a lot bro. I'm a beginner and working on a project. with this tutorial I have added this feature to the project..

[@gabypino407]

Thanks a lot for this tutorial, just what I needed and very well explained!

[@AgosArg]

Top class as always and that gradient looks so great! Thank you :)

[@KSRajuMBRInformatics]

Thank you for your good training

[@robbiesmith79]

I lost count how many times I had to pause your video and go back and watch bits over and over again. It was a bit fast to follow along with and I feel like in your editing you cut out some important tips and tricks that I had to learn the hard way. Overall it's a great tutorial and I was able to mostly recreate the effect. I'm eager to use this new technique in my current project. Liked, sub'd, commended, belled, all that jazz.

[@sayekatchakraborty2552]

Thank you so much. Learned some new techniques

[@slipstream01]

Wow i followed along and so happy to have found your channel, next level . You got a new Sub FAM

[@noob4head]

Absolutely amazing video, thanks man this helped me a lot!

[@anarodea4141]

Thank you so much. I loved your design!

[@mayararodrigues1066]

Great tutorial!!

[@alessiosurace6052]

Hi, how do I change the content of the text while still keeping the same accordion to select in the assets? Thank you!

[@badermuteb4552]

I really love your videos keep them coming. What don't you create a mega figma course? I would buy it. Thanks

[@JDMedia]

Thanks lot Bro. for your valuable and well understanding tutorial 😍👌❤

[@immwennyy]

thanks for this video!!!!!! helps me a lot

[@Ansx-uq1tz]

i love this chanel bro.

[@PurooRoy]

What exactly made the other elements move down on expanding the accordion above it?

[@jsopiak1]

amazing amazing amazing! Thank you!

[@sumanprajapati6040]

oh this tis great . easy to understand. Thank you

[@DavidAtMidknight]

What if you need to fit more than just a text box into the open state. How do I add other components as well?

[@amirataha4952]

really thanks, very useful and details

[@666verified]

Thank you so much!!!!

[@nesty3000]

Thank you!!

[@KanikaSachdeva-jt3sd]

Thanks I tried to create it. When I hid the text the height of box did not decrease. what did i miss?

[@EmiPubmarket]

What's the most important part of getting that accordion animation? I've designed my dropdown menu, but it isn't working by just to put 'autolayout' on it. The menu does not move while one dropdown menu is open...

[@kashishramrakhiani2416]

How can I change the text of the open accordion every time I need to use this?

[@shogher]

Hey! Is there a way to make the whole frame move when things like this expand and collapse? I'm trying to get my page to move when my accordion expands and collapses but can't figure out if there's a way to do it :')

[@teesdelish]

Great video. thanks

[@krp8398]

Hey there, first of all - thank u so much for this tutorial and your other helpful videos! It helps me A LOT to understand Figma in depth! I have a question about the accordion menu - do you know how to change the accordion menu so that - when you interact - it opens upwards instead of downwards? Like, when I place my accordion elements at the bottom of a page, i would like it to push upwards when clicked on. If it opens up downwards, it would push the other menu-buttons outside of the page.

[@mavidesign]

I'm so glad my videos help you understand Figma!! To achieve the outcome you're describing, you need to set the accordion constrains to "right" (or left if on the left side) and "bottom", which determines what sides is this object originating from / constrained to:) See this screenshot for details postimg.cc/gXKLXRNW Mavi

[@krp8398]

Nice! First of all, thank you for replying so fast! You saved me from lots of headache - it worked perfectly. Thank you so much, keep up the great work! :))

[@diegovictor6772]

Amazing bro. Thanksss. ❤❤❤

[@steviesmith5161]

how do i successfully get this into a website deisgn like on wordpress? i am trying to send these designs to someone trying to post this feature using wordpresss but is struggling. i want to try to help but have no idea how to web develop. any tips?

[@rafacrisil]

fantastic!

[@ajinkya-more]

Thanks a ton! Worked like charm

[@RelaxRhythms91]

thank you so much

[@soundboy89]

Actual functionality begins at 7:30

[@leszekj571]

what if headline is a lot longer?

[@prajwalsharma2794]

As I change text inside my instance of accordion, my interaction is no longer working ie., I am not able to do view more and less. Please help.

[@vamboo8918]

thanks

[@najwanaura7171]

really helpful, thanks!

[@hirohamada1605]

why do i have no fill container option in the horizontal resizing 2:26 ? i just have fixed and hug. i design on figma web and the latest software version.

[@NurHidayat-hs9kn]

Thank you Thank you

[@pranavsharma8230]

Hey mavi....luv from india.i hav a question.whats to the diff between this and ur drop-down video? Why do u have to hide the text in closed state? Can't it be like drop-down menu closed state. Please answer. Thanx in advance

[@mohamedrizwanbasa]

10:34 get your answer from this

[@9nchen]

Thank you for the awesome tut. Q: at 8:26 in the video you cut from a state where the component and its variant have a space between and then not. In my case, there is room between them that creates an empty space foldout state on the closed version on top of each other :/

[@mavidesign]

oh that is just me moving the variant upwards and resizing the pink component border. Could you please describe your problem in more detail? I'm not sure I follow

[@9nchen]

@@mavidesign We have a closed and open state. When hiding the elements not in use, it creates an empty space that seem Figma is not autoresizing this space, and thereby creating a weird animation.

[@mavidesign]

@@9nchen 1) did you make sure to hide the layers by using the eye icon and not the opacity % value? 2) make sure to set the vertical adjustment of the whole accordion to “hug contents” and not “fixed” Hope that helps

[@marti8267]

thank youuu

[@TheEXmasterwrecker]

will this work if i put it into figjam?

[@FaysalKhalid]

Love it.

[@mohammadanasmemon9594]

Hello! Please help me! Could you let me know how you made those three Boxes not overlap in the open state?

[@mavidesign]

The whole objects needs to be an “auto layout”. That way, objects are going to stack beneath each other automatically. Could you also share a relevant time stamp so that I know which part of the video you have in mind

[@Corbinfinity]

How would i change the body text in the accordion though if i cant edit the text within the viewport? I can only edit the headers individually

[@alessiosurace6052]

Ciao! Hai trovato il modo poi?

[@maggsvamp]

Fill Container is not showing up on mine.

[@Constance8651]

Hello, can I please get some help? At the final part, the accordion stack didn't work for me even doing auto layout

[@mavidesign]

Hi, if you need help you'll have to share your file / design with me. For priority support and mentoring on your creative journey, consider joining my Patreon! Mavi

[@The_Beyond0]

I followed the instructions detail for detail and still can't get it right

[@irvincheong3461]

Hi Mavi , why doesnt my accordion show up when im trying to present?

[@ritanapolitano6383]

hello! i have the same problem, did you find out the solution?

[@kikzurass]

I have a problem, I get the menu to work, but once I start to copy it in other screens, the boxes overlap... it only works on the first screen I put the menu, once I try to replicate in other screens it doesnt work

[@mavidesign]

make sure that the accordion component sits within an autolayout. This sounds like you set up the accordion correctly but then it opens across other objects. This is prevented by using autolayout with accordion containers If you need more specific advice, please consider joining my Discord. Due to the number of questions I'm getting I'm unable to analyze everyone's request in-depth. Hope this helps!

[@kikzurass]

@@mavidesign Thanks! I'm sure it has a solution and Im sure joining your discord, but for now, due to the emergency of this work, I solved it by dupliating the menu, deataching the instance and making it a component again

[@TonyBullard]

I learned what I was hoping for, but I feel like playing with gradients and other visual design decisions aren't needed in a tutorial about making an accordion component.

[@augustinesolomon6286]

how i edit individual text in the drop down?

[@alessiosurace6052]

Ciao! Hai trovato il modo poi?

[@ghulaminhartarto]

pleasee part 2. :(

[@mavidesign]

What would you like to see in part 2?

[@ghulaminhartarto]

@@mavidesign Yupppppp... :))

[@TâmNgô-b6r]

I think it's how to click the one and others are close

[@mugcarnivore2493]

But you can't put it over a design, it will not fly over it but push the design

[@user-cm3zw9oj9z]

I had the same issue and solved like that: you should shorten the main frame as the size of the device , turn clip content (for example 844 for phone) and mark for the frame " vertical scroll" position. Check in prototype and you see that you can see the content below the accordion , after it opens. First of all be sure that you have all the sections in one auto layout frame.

[@mugcarnivore2493]

@@user-cm3zw9oj9z thank you

[@mehdicharife2335]

Why are you squandering most of the video on pointless stylistic tweaks? The title promised to show how to create a responsive and interactive accordion. Get to the point. A minimalistic style would more than suffice to show the functionality.

[@SrikanthSSanamo]

:)

[@Corbinfinity]

How would i change the body text in the accordion though if i cant edit the text within the viewport? I can only edit the headers individually

[@sunandsnoww]

I came here to ask the same question only to find out it was already asked but not answered. ;(