How To Create a Responsive & Interactive ACCORDION Component in Figma (Tutorial)
HTML-код
- Опубликовано: 24 июл 2022
- 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-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
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.
Thanks a lot for this tutorial, just what I needed and very well explained!
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..
Thank you so much. Learned some new techniques
This is it!! This is what I've been looking for, thank you so much!
Hi, how do I change the content of the text while still keeping the same accordion to select in the assets? Thank you!
Great tutorial!!
the most detailed accordion video
I was stucking with this you helped me a lot. Thanks a lot.
Wow i followed along and so happy to have found your channel, next level . You got a new Sub FAM
Absolutely amazing video, thanks man this helped me a lot!
Top class as always and that gradient looks so great! Thank you :)
You just saved my life, dude, thnx!!
really thanks, very useful and details
oh this tis great . easy to understand. Thank you
Thank you!!
thanks for this video!!!!!! helps me a lot
Thanks lot Bro. for your valuable and well understanding tutorial 😍👌❤
thank you so much
Amazing bro. Thanksss. ❤❤❤
Great video. thanks
I was breaking my head here and found your video. Thanks for helping us friend. Hail from Brazil!
amazing amazing amazing! Thank you!
thank youuu
Thank you Thank you
thanks
fantastic!
Love it.
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.
i love this chanel bro.
I really love your videos keep them coming. What don't you create a mega figma course? I would buy it. Thanks
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 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.
What if you need to fit more than just a text box into the open state. How do I add other components as well?
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 :')
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! :))
What exactly made the other elements move down on expanding the accordion above it?
Thanks a ton! Worked like charm
will this work if i put it into figjam?
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.
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...
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
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.
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
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. ;(
Hi Mavi , why doesnt my accordion show up when im trying to present?
Fill Container is not showing up on mine.
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 followed the instructions detail for detail and still can't get it right
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
Actual functionality begins at 7:30
how i edit individual text in the drop down?
Ciao! Hai trovato il modo poi?
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
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
:)
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?