How To Create a Responsive & Interactive ACCORDION Component in Figma (Tutorial)
Vložit
- čas přidán 27. 08. 2024
- Today we're going to take a look at creating an interactive and responsive accordion component in Figma that expands and collapses when you click it. I'll also show you how to create a set of accordions (using Auto Layout).
Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Get FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
Auto Layout: • AUTO LAYOUT IN FIGMA -...
Figma Basics: • Figma Basics
--------
© 2022 Mavi Design
Upvote this comment if you'd like me to add this component to my store 👀 (bit.ly/mavi-design-store)
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?
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.
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.
Still doesn't work 😞
I was breaking my head here and found your video. Thanks for helping us friend. Hail from Brazil!
Top class as always and that gradient looks so great! Thank you :)
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
Thank you so much!!!!
Thanks a lot for this tutorial, just what I needed and very well explained!
I was stucking with this you helped me a lot. Thanks a lot.
This is it!! This is what I've been looking for, thank you so much!
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?
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.
Thank you so much. Learned some new techniques
the most detailed accordion video
Wow i followed along and so happy to have found your channel, next level . You got a new Sub FAM
Thank you so much. I loved your design!
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..
Absolutely amazing video, thanks man this helped me a lot!
You just saved my life, dude, thnx!!
Thanks lot Bro. for your valuable and well understanding tutorial 😍👌❤
Great tutorial!!
really thanks, very useful and details
I really love your videos keep them coming. What don't you create a mega figma course? I would buy it. Thanks
amazing amazing amazing! Thank you!
thanks for this video!!!!!! helps me a lot
Hi, how do I change the content of the text while still keeping the same accordion to select in the assets? Thank you!
oh this tis great . easy to understand. Thank you
What if you need to fit more than just a text box into the open state. How do I add other components as well?
Thank you!!
Thanks I tried to create it. When I hid the text the height of box did not decrease. what did i miss?
Great video. thanks
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...
How can I change the text of the open accordion every time I need to use this?
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
I came here to ask the same question only to find out it was already asked but not answered. ;(
Amazing bro. Thanksss. ❤❤❤
thank you so much
really helpful, thanks!
i love this chanel bro.
Actual functionality begins at 7:30
Thank you Thank you
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?
thanks
fantastic!
What exactly made the other elements move down on expanding the accordion above it?
Thanks a ton! Worked like charm
thank youuu
Love it.
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.
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
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! :))
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 :/
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
@@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.
@@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
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 :')
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.
Hi Mavi , why doesnt my accordion show up when im trying to present?
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.
Fill Container is not showing up on mine.
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.
I followed the instructions detail for detail and still can't get it right
will this work if i put it into figjam?
Hello! Please help me!
Could you let me know how you made those three Boxes not overlap in the open state?
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
Hello, can I please get some help? At the final part, the accordion stack didn't work for me even doing auto layout
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
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
10:34 get your answer from this
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
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!
@@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
how i edit individual text in the drop down?
Ciao! Hai trovato il modo poi?
pleasee part 2. :(
What would you like to see in part 2?
@@mavidesign Yupppppp... :))
I think it's how to click the one and others are close
But you can't put it over a design, it will not fly over it but push the design
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.
@@user-cm3zw9oj9z thank you
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.
:)
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
Ciao! Hai trovato il modo poi?