Accordion Menu Figma - How To Create A Accordion Menu

Tremendous, thanks for that contribution, I didn't even know that you could achieve that with figma.

Hi thanks for the tutorial, this is great! I do have a question around the prototyping - after i expand say the 3rd card, it doesn't allow me to do scroll down further despite me having adjusted the scrolling behaviour.

This is great! is there a way to allow more than one section to expand at once?

Got the basics. However, also want to know how to make this look as if text appears (slides down) along with its background box/pocket? Right now the box slides from the top, but text appears from the center same point. Thanks!

Amazing tutorial! Thank you!

Nice simple and clean keep going

it is really amazing video

Hi (: great tutorial! I just have one question. My accordion is working perfectly, but is there a way to make the whole frame responsive to it? I feel like theres a lot of blank space when the accordion is inactive. Thanks!

Somehow this tutorial is better than anyone else who's actually using their real voice.

Not super descriptive, which can be good and/or bad, and not my favorite to listen to the generated voice, but overall very helpful. Thanks.

Thank you for share it! :)

Amazing tutorial! Thank you so much ✨

Thankyou so much! you're the best!!!

Just what I needed. Thanks.

oh my god. this tutorial is soooo simple!!! love it

So nice, thank you man!

very informative, Thank you 👌

Yes. But is there a way to push all elements below this on the page down once initially opened? I'm used to Axure allowing "push all widgets down". I need Figma to do something like this so the whole page is truly interactive. Is that possible? If so how?

thanks

Hola, 👌 creo que contigo aprenderé bastante. Estos tips valen oro. Me ayudara mucho reducir las horas o días que le toma hacer el diseño y prototipo 🥵

I created this asset successfully but I have a question. If I want to change the content in it it replaces with what was in the asset. Do I have to recreate the prototyping asset every-time I want the content in the accordion to be different? If I don't when I open the accordion the content reverts to what was in the original asset?

Excellent tutorial.
Thank you very much.
Greetings from Peru.

Don't k ow
How long will it take me to learn this

Figma really isn't great for prototyping. It's a shame that you need to go through so many steps in order to make something so simple as an expanding list. If you need to connect every single button in every single list to every other list, the amount of connections you need to make could get exponentially high. This tutorial only covered what to do if you want to open only one list. What if you want to have multiple lists open at the same time? You then have to make even more connections. On a 10-item list, this could easily result in hundreds of connections.

Good video, very helpful and informative - not a fan of the robot voice though!

Hello, I followed same tutorial but prototyping is not working , i even signed up the form for interactive media bt didn't get any response on email.. what else can i do?

Hi.. This video is so helpful. And I tried it. But it was not working because it didn't have some features. So I filled the form for beta version. but when will I get the beta version?

There is something we cant quite see in this video. How the Options for the other different components are set. I am stuck on this part. When i trigger the variants, the texts of the first component appear on all components. Any Help??

Bal er video kichui bujlam na

Hey, First of all thank you for the video. make sure highlight your mouse pointer in your videos coz it's hard to see the mouse pointer when it moving fast and what to click. Thanks.

Thanks so much!

So this tutorial was great and I've built my accordion menu (though I only got access to the beta today). Now, however, I need to put it in a frame that expands and contracts with the accordion; is there a way to do that? Or do I need to make a new set of components that include the surrounding frame?

Yeah, we all love tutorials like this one ... that has backing music even though it is totally unnecessary and very annoying, and better still, like this one, when they have no clear step-by-step explanations of each step that needs to be completed - because we all want to see the steps rushed through because its only the end result that matters, and it matters not that such 'tutorials' leave many with little to no more clue as to how to do what we were hoping the tutorial would teach. Thanks for nothing, Essential Web Apps Guy.

Yes, maybe if one watches the video tutorial at a slower playback speed - maybe doing so multiple times - it might be possible to figure out what was rushed through in this video tutorial ... however, call me bonkers, but I'ld rather that the person teaching, does so ... at a pace that one can follow along even if they are new to Figma.

Hi, me again. You may know why the option "change to" don´t appears on my figma version?

Sir can you help me with my personal high fidelity prototype, please sir , I am having trouble with interactive component and dropdown calendar and time.

Great tutorial! Thanks so much 🌸👏
I followed all the steps , but after combining the different states into variant , when I started prototyping , there was no (on click ) option available between em .. idk why , so couldn't work with me

hello. First of all thank you for the video. It was very useful. I am starting to learn figma and would like to know is an accordion should be learnt by a UI/UX designer or a developer.

This is probably the only video that shows accordion menu in Figma that I could find, but too fast and not enough explanation or verbal instruction between major steps.

looking for it for about months. Great video. Thanks

How amazing are you? Thanks a tonne brother!!

Great !!!

please share source file with us

Hello, good video, when I combine the variants it does not allow me to prototype, why does that happen?

Great content, thank you!

its for beta version of figma

Very useful video, do you know how can I implement in React?

thank you dude

exactly what i am looking for, thank you

which text to speech software are you using?