Figma Accordion Menu | Fully Animated Working Multiple Dropdown Accordion Menu (2021)
HTML-код
- Опубликовано: 12 июн 2024
- In this video i will demonstrate how to properly use autolayout and the concept of components and variants to make a working animated accordion menu in figma. Watch and learn.
You will learn how to make, create and design an accordion or collapsible menu. For this accordion menu design to work, Figma smart animation, auto layout and then components and variants are very useful. I demonstrate the process step by step in a way a beginner figma user can easily understand.
For this figma accordion, you can have two or more sections open at the same time which is very useful in demonstrating how a real accordion menu works. 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.
The figma accordion is a form of a figma dropdown element or menu that opens and closes. It can also be referred to as a collapsible menu or expandable menu in figma
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.
You're welcome. Glad it helped. Thank you for watching
Great video!! Thank you so much for making it. I can finally make a working accordian menu!! So excited ☺️
Your tutorials are fantastic and so helpful! Thank you so much!
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!
Such a good teacher. I have spent hours trying to get this but so succint & easy. Subbed!.
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!!!
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! :)
thx, I tried several videos this one is the right paced and extremely clear to follow!
Am glad to hear that
this is a lifesaver!! thank you so much for sharing this tutorial ❤
You're welcome. Thanks for watching
Great Video!! Thanks a lot. Your videos always answer my questions. Thanks
You're welcome. Thank you for watching
Thank you very very much!
Great tutorial, this help me achieve what I wanted.
Excellent. All the other tutorials are basically wrong. You've done it perfectly.
You are so welcome! Thanks for watching
Thank you, amazing
Thank you so much.
THANK YOU SO MUCH
this is super helpful, thanks for sharing!
You're welcome. Thank you for watching
Great Video. Thank you for sharing this.
Thanks for watching
Many thanks to you. I am French and impossible to find one video which has resolved my problem! 🥰 I subscribe.
I am glad this video helped. Thanks for watching and welcome to this Figma community
@@CreateBeautifulThings you are the best.
This needs more views! Thanks
You could support by sharing the video. Thank you for watching
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.
Awesome, thank you!
Thank you sooo much!
You're welcome. Thanks for watching
This is amazing
finally i learned
You are like the Figma whisperer.
Oh thank you
so helpful sir i like your video
Glad it helped. Thanks for watching
How do you make so that content below the accordion is pushed down?
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 ?
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
I'm pretty sure I can use the main frame without the background color within another frame right?
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
This was great, thanks but one issue! After creating it. It seems like i can't bring it to my own screens
I was wondering if this works with different description text for each category. Thank you!
Yes it does
@@CreateBeautifulThings How would you edit for them to be different? Thank you!
It's working dude..
Great. You followed every step. Thank you for watching
Brother, If I wants to change the description text in every components, then how I can do the same?
How can I change the text of the different categories?
Thank You T_T
You're welcome. Thanks for watching
Hi. Great video, but how can i edit the content of each of the categories?
Same question... if anyone can help
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 ☺️
Great
Thanks for watching.
hi, thank you very much. but i have a problem. the one that you show the first of vedio> what should i do?
The one I show first has mistakes and won't work. You should do the one I demonstrate as the working accordion
@@CreateBeautifulThings yes but unfortounatly i reached that, what's wrong with that that?
@@nazzioo5737 it's because the frame he set at 12:36 was auto layout
Thank you for the video. I followed the steps, but my accordion isn't working
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
Hello Dear,
There is no Variants option on the right side in Figma, which I am using.
Is it only for the paid version?
It's for all versions
@@CreateBeautifulThings Okay but why I am not able to see that option?
could you please guide me here on reply?
@@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.
@@kennycomedy1201 Okay Dear I try again. Thanks a lot for reply here me.
Try using Axure RP as duplicating frames in Figma is not the essence of real prototyping
how to change the content of each category to be different??
You can just edit directly with the text tool. It is that easy