How To Create a Responsive & Interactive ACCORDION Component in Figma (Tutorial)

Подписаться 48 тыс.

Просмотров 91 тыс.

50% 1

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

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 90

@mavidesign 2 года назад

Upvote this comment if you'd like me to add this component to my store 👀 (bit.ly/mavi-design-store)

@steveglew301 Год назад

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?

@pritikamat5257 Год назад

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.

@EmiPubmarket 4 месяца назад

Still doesn't work 😞

@gabypino407 Год назад

Thanks a lot for this tutorial, just what I needed and very well explained!

@sayekatchakraborty2552 2 года назад

Thank you so much. Learned some new techniques

@slipstream01 Год назад

Wow i followed along and so happy to have found your channel, next level . You got a new Sub FAM

@ampliar.online Месяц назад

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

@mehdicharife2335 Месяц назад

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.

@rafacrisil 11 месяцев назад

fantastic!

@diegovictor6772 Год назад

Amazing bro. Thanksss. ❤❤❤

@kashishramrakhiani2416 3 месяца назад

How can I change the text of the open accordion every time I need to use this?

@Corbinfinity Год назад

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

@sunandsnoww Год назад

I came here to ask the same question only to find out it was already asked but not answered. ;(

@steviesmith5161 Месяц назад

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?

@DavidAtMidknight 4 месяца назад

What if you need to fit more than just a text box into the open state. How do I add other components as well?

@PurooRoy 9 месяцев назад

What exactly made the other elements move down on expanding the accordion above it?

@shogher 6 месяцев назад

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 :')

@KanikaSachdeva-jt3sd 2 месяца назад

Thanks I tried to create it. When I hid the text the height of box did not decrease. what did i miss?

@alessiosurace6052 Год назад

Hi, how do I change the content of the text while still keeping the same accordion to select in the assets? Thank you!

@prajwalsharma2794 Год назад

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.

@robbiesmith79 Год назад

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.

@KSRajuMBRInformatics 2 дня назад

Thank you for your good training

@TonyBullard 11 месяцев назад

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.

@EmiPubmarket 4 месяца назад

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...

@badermuteb4552 6 месяцев назад

I really love your videos keep them coming. What don't you create a mega figma course? I would buy it. Thanks

@Geremedia132 2 месяца назад

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?

@JDMedia 10 месяцев назад

Thanks lot Bro. for your valuable and well understanding tutorial 😍👌❤

@hirohamada1605 Год назад

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.

@Constance8651 Год назад

Hello, can I please get some help? At the final part, the accordion stack didn't work for me even doing auto layout

@mavidesign Год назад

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

@anarodea4141 Год назад

Thank you so much. I loved your design!

@The_Beyond0 Год назад

I followed the instructions detail for detail and still can't get it right

@amirataha4952 Год назад

really thanks, very useful and details

@aaftabkhan1051 19 дней назад

This is super awesome, Kudos Man

@soundboy89 5 месяцев назад

Actual functionality begins at 7:30

@noob4head 7 месяцев назад

Absolutely amazing video, thanks man this helped me a lot!

@maggsvamp Год назад

Fill Container is not showing up on mine.

@irvincheong3461 9 месяцев назад

Hi Mavi , why doesnt my accordion show up when im trying to present?

@ritanapolitano6383 День назад

hello! i have the same problem, did you find out the solution?

@maicon4820 Год назад

I was breaking my head here and found your video. Thanks for helping us friend. Hail from Brazil!

@AgosArg 5 месяцев назад

Top class as always and that gradient looks so great! Thank you :)

@krp8398 Год назад

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.

@mavidesign Год назад

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

@krp8398 Год назад

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! :))

@TheEXmasterwrecker 8 месяцев назад

will this work if i put it into figjam?

@666verified Месяц назад

Thank you so much!!!!

@Asi226 Год назад

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.

@mayararodrigues1066 Год назад

Great tutorial!!

@alanchang3577 11 месяцев назад

This is it!! This is what I've been looking for, thank you so much!

@sovitkharel9165 8 месяцев назад

I was stucking with this you helped me a lot. Thanks a lot.

@kikzurass Год назад

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

@mavidesign Год назад

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!

@kikzurass Год назад

@@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

@immwennyy 9 месяцев назад

thanks for this video!!!!!! helps me a lot

@jsopiak1 6 месяцев назад

amazing amazing amazing! Thank you!

@kikzurass Год назад

You just saved my life, dude, thnx!!

@josephlawrence927 2 года назад

the most detailed accordion video

@Corbinfinity Год назад

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

@alessiosurace6052 Год назад

Ciao! Hai trovato il modo poi?

@Ansx-uq1tz 11 месяцев назад

i love this chanel bro.

@pranavsharma8230 Год назад

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

@mohamedrizwanbasa 11 месяцев назад

10:34 get your answer from this

@sumanprajapati6040 Год назад

oh this tis great . easy to understand. Thank you

@9nchen Год назад

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 :/

@mavidesign Год назад

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

@9nchen Год назад

@@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.

@mavidesign Год назад

@@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

@vamboo8918 6 месяцев назад

thanks

@teesdelish Год назад

Great video. thanks

@RelaxRhythms91 Год назад

thank you so much

@FaysalKhalid Год назад

Love it.

@nesty3000 Год назад

Thank you!!

@NurHidayat-hs9kn 2 года назад

Thank you Thank you

@marti8267 Год назад

thank youuu

@mohammadanasmemon9594 Год назад

Hello! Please help me! Could you let me know how you made those three Boxes not overlap in the open state?

@mavidesign Год назад

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

@SrikanthSSanamo Год назад

@augustinesolomon6286 Год назад

how i edit individual text in the drop down?

@alessiosurace6052 Год назад

Ciao! Hai trovato il modo poi?

@mugcarnivore2493 2 месяца назад

But you can't put it over a design, it will not fly over it but push the design

@user-cm3zw9oj9z 2 месяца назад

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.

@mugcarnivore2493 2 месяца назад

@@user-cm3zw9oj9z thank you