Figma Accordion Menu | Fully Animated Working Multiple Dropdown Accordion Menu (2021)

[@juanpablomenchon770]

I spent like 3 hours of my life watching videos and trying to figure out how to make this freaking component. Just when I was about to give up, I found your video and it worked like a charm! Just wanted to let you know how much you helped me. I am very grateful and hope your channel does well. You may not have many followers, but trust me, this video will help a lot of people. Many thanks from Buenos Aires, Argentina.

[@CreateBeautifulThings]

You're welcome. Glad it helped. Thank you for watching

[@chick_bean]

I've been thinking a lot about how to implement this with figma, but thank you very much for letting me know how to do this!

[@EuMesmaSim123]

Sou do Brasil e seu vídeo foi o único que encontrei que ensinava a fazer isso. Foi um pouco difícil de entender porque meu inglês é péssimo, mas seguindo os passos, consegui fazer certinho. Você me salvou em um projeto que tinha pra entregar. Muito obrigada pelos ensinamentos. Já curti o vídeo e me inscrevi no canal. Abraços! :)

[@funkeomoogun]

Such a good teacher. I have spent hours trying to get this but so succint & easy. Subbed!.

[@Sol2223]

Hi, I've seen many videos about this theme and I wasn't able to work it out until now! Thank you very much for your explanations!!!

[@sarahabelle484]

Many thanks to you. I am French and impossible to find one video which has resolved my problem! 🥰 I subscribe.

[@CreateBeautifulThings]

I am glad this video helped. Thanks for watching and welcome to this Figma community

[@sarahabelle484]

@@CreateBeautifulThings you are the best.

[@Amillionyawn]

thx, I tried several videos this one is the right paced and extremely clear to follow!

[@CreateBeautifulThings]

Am glad to hear that

[@hush88613]

Great video!! Thank you so much for making it. I can finally make a working accordian menu!! So excited ☺️

[@ShirelShalom]

Your tutorials are fantastic and so helpful! Thank you so much!

[@pashionuchenna840]

I always enjoy your tutorials, just wondering why it took me so long to subscribe, as a lead product designer, I can tell your videos are helpful. Will recommend to my team. keep doing a great job man.

[@CreateBeautifulThings]

Awesome, thank you!

[@roter13]

How do you make so that content below the accordion is pushed down?

[@sethmegbetor2445]

Great tutorial, this help me achieve what I wanted.

[@mari4ka_f]

this is a lifesaver!! thank you so much for sharing this tutorial ❤

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@maryamrahmanifard8188]

Great Video!! Thanks a lot. Your videos always answer my questions. Thanks

[@CreateBeautifulThings]

You're welcome. Thank you for watching

[@jspedagogy8394]

I have one problem, when I add all the duplicates to a frame and in prototype mode it expand to the bottom but after expanding remaining one the page moves upwards and with a flick it expands further

[@luuds_]

Thank you, amazing

[@roter13]

You are like the Figma whisperer.

[@CreateBeautifulThings]

Oh thank you

[@kattiehart9348]

THANK YOU SO MUCH

[@GauthamKrishnan99]

This needs more views! Thanks

[@CreateBeautifulThings]

You could support by sharing the video. Thank you for watching

[@ToFoniko0bifteki]

Hello and thank you very much for the really informative video. I've followed all the steps to the letter, although the accordion in the end doesn't work as it should. If I use it as a single category it works normally, but when I add more categories(1,2,3,4), then only the 4th(or the last one) works and if you press any other categoryu the th(or the last one) works and if you press any other category it stucks there and nothing works. Do you know what the issue may be ?

[@CreateBeautifulThings]

Alright. Try this. At the end when you place all the categories into the final frame. Make sure each category frame has the same name. Check my final step. All names are similar. Hope this helps. Let me know if it works then

[@mschrimmer631]

I'm pretty sure I can use the main frame without the background color within another frame right?

[@renahuang1837]

this is super helpful, thanks for sharing!

[@CreateBeautifulThings]

You're welcome. Thank you for watching

[@micasamso8883]

How can I change the text of the different categories?

[@Udodesha]

Thank you very very much!

[@DalazG]

This was great, thanks but one issue! After creating it. It seems like i can't bring it to my own screens

[@omikunleomolola934]

Great Video. Thank you for sharing this.

[@CreateBeautifulThings]

Thanks for watching

[@Jayadevan-vn6lc]

finally i learned

[@shardulsawant1991]

Brother, If I wants to change the description text in every components, then how I can do the same?

[@Aree3.141]

Thank you so much.

[@jonathantuahta4322]

so helpful sir i like your video

[@CreateBeautifulThings]

Glad it helped. Thanks for watching

[@santoshsahu-oy5vo]

Hello Dear, There is no Variants option on the right side in Figma, which I am using. Is it only for the paid version?

[@CreateBeautifulThings]

It's for all versions

[@santoshsahu-oy5vo]

@@CreateBeautifulThings Okay but why I am not able to see that option? could you please guide me here on reply?

[@kennycomedy1201]

@@santoshsahu-oy5vo Relax bro. I guess mine looks exactly like. yours. when you press components the variant will show exactly at the top of your page.

[@santoshsahu-oy5vo]

@@kennycomedy1201 Okay Dear I try again. Thanks a lot for reply here me.

[@vickyvijayraj]

Try using Axure RP as duplicating frames in Figma is not the essence of real prototyping

[@floritoons4714]

how to change the content of each category to be different??

[@CreateBeautifulThings]

You can just edit directly with the text tool. It is that easy

[@tifeolasupo]

Thank you for the video. I followed the steps, but my accordion isn't working

[@CreateBeautifulThings]

I have to emphasize you have to follow each step. Missing any step and it may not work. Please watch again. It's something that took me a while to figure out. But thanks for watching

[@praveenkumar7163]

It's working dude..

[@CreateBeautifulThings]

Great. You followed every step. Thank you for watching

[@vitorrodriguesmonte]

Thank you sooo much!

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@freepalestinecongosudanmyanmar]

I was wondering if this works with different description text for each category. Thank you!

[@CreateBeautifulThings]

Yes it does

[@freepalestinecongosudanmyanmar]

@@CreateBeautifulThings How would you edit for them to be different? Thank you!

[@Entertainment-rv3vj]

Great

[@CreateBeautifulThings]

Thanks for watching.

[@shivangisen9870]

Thank You T_T

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@dianabuitrago9152]

Hi. Great video, but how can i edit the content of each of the categories?

[@prabhjotkaur9860]

Same question... if anyone can help

[@mari4ka_f]

you can just copy the existing accordion (by clicking alt and dragging it or by clicking ctrl+d), change the content in the copy, and then copy the header from the copy to the main frame. this worked for me at least ☺️

[@thyongamer]

Excellent. All the other tutorials are basically wrong. You've done it perfectly.

[@CreateBeautifulThings]

You are so welcome! Thanks for watching

[@myfeatheredfriends254]

This is amazing

[@nazzioo5737]

hi, thank you very much. but i have a problem. the one that you show the first of vedio> what should i do?

[@CreateBeautifulThings]

The one I show first has mistakes and won't work. You should do the one I demonstrate as the working accordion

[@nazzioo5737]

@@CreateBeautifulThings yes but unfortounatly i reached that, what's wrong with that that?

[@98lb.oftenderness87]

@@nazzioo5737 it's because the frame he set at 12:36 was auto layout