Smart Accordions in Figma - New Auto Layout Update!! ✨ MAGIC ✨

[@philou1516]

Hi, thx for this! Is there a way to close opened items when opening a new one, please?

[@AdrianoReisDesign]

Hey just got around to send you a how-to achieve this. It's definitely not as clean as what you see in the video but still doable. Here's a loom video walkthrough: www.loom.com/share/9f77f124a49d4c0e9b3aa1583e95ffda I also updated the file in the Figma community to have what i showed in the loom above. Grab it here: www.figma.com/community/file/1088505283210920914

[@philou1516]

@@AdrianoReisDesign Thank you very much for this upgrade, so one new variant for each additional item, that's it! Also thank you to make me discover Loom, great!

[@AdrianoReisDesign]

@@philou1516 great, loom is awesome! I'd recommend downloading their desktop app to make it easier also :) cheers!

[@tobiasstrollo]

OH. MY. GOD! Seriously - I'm totally blown away! It was a bit fast and a bit hard to follow, but somehow I got it to work - and it just looks great! I do a lot of accordions, and I had no idea they could become this pretty and well functional, so happy for this video - a huge THANK you!

[@AdrianoReisDesign]

Thanks man, I’m glad you found it helpful! 🙏

[@GaryCox-e6u]

Fantastic, thank you - off to watch the longer video too!

[@AdrianoReisDesign]

glad you liked it!

[@Vethorzinho]

direto ao ponto, obrigado!!

[@AdrianoReisDesign]

Obrigado! Que bom que foi útil!

[@designerdavid1]

Great video. How would you add a hover effect on top of this that is triggered when mouse is over a list item?

[@AdrianoReisDesign]

Hey, for sure. You just need to change the interaction from “on click” to “while hovering”

[@tinawei9489]

Thank you so much! After watching this I realized that the accordion prototype I create was so inefficient 😂

[@AdrianoReisDesign]

Great, I’m glad it was helpful! 😊

[@ramadhanaditiaa]

Hey, thank u, so much!!!! such a great tutorial, a bit fast to catch up, but somehow i made it work!

[@AdrianoReisDesign]

Glad it was helpful! I have an in depth video where it’s a little slower and answer some of the questions people were asking. It’s in the description 🤘

[@FahimMD]

I was looknig for this - thanks!

[@AdrianoReisDesign]

Glad it was helpful!

[@amamairani]

hey, great tutorial! just wondering if there's a way to change the content of the expanded answer or if I have to create different components to do that?

[@AdrianoReisDesign]

hey, thanks! once you edit the text from the instance it should remember the override when you toggle it on/off so no need to create multiple components. Hit me up if you have some trouble with it :)

[@meganjakubs5072]

@@AdrianoReisDesign hi! my instances are not remembering the override text in the prototype. It displays properly in the design file, but once I switch to prototype mode, it shows the placeholder content from the component. any tips?

[@AdrianoReisDesign]

@@meganjakubs5072 hi Megan, do you mind sharing the link to the file with me? Feel free to duplicate and remove any sensitive info if any.

[@ToFoniko0bifteki]

@@AdrianoReisDesign where can I share the link to the file? I have the exact same problem as the above

[@AdrianoReisDesign]

@@ToFoniko0bifteki hi, on the top left of the Figma window you should see a blue "Share" button, right next to your avatar and also the ▶️"present" button. 1 - Click on "Share" 2 - On the pop up window, click "Copy link" on the bottom left

[@sangio_davese]

So very clean and a great walk-through tutorial. What about if my client wanted to place images within the FAQ answer content to reveal a small thumbnail to the right side of the text?

[@AdrianoReisDesign]

Thanks!! it would basically be the same thing but the "answer" auto-layout would be in a horizontal direction with two items inside (image and the text). you just need to make sure of two things: 1- the text is set to 2 - the height of its parent auto-layout(the one that's wrapping the text and the image) is set to and that should work just fine, if you have any trouble let me know and/or share a link and I can try to see where the problem is.

[@Neuber76]

I tried to do the exactly same thing you did but in 3:00 the "interaction details" onclick interactions don't show the "Change to" option for me.

[@AdrianoReisDesign]

Hi Neuber, are you on the interactive components beta? i assume that's the reason why. I have a link in hte description to sign up for it if you haven't yet. if that's not the case im happy to try to investigate that with you. lmk thanks!

[@zhannavoskanyan8589]

Hi. Thank you for video tutorial. I have a question. How can I create accordion so that one is open and you click to the second to open, the first one closes automatically? thank you in advance

[@AdrianoReisDesign]

great question, there's no easy way of doing that right now. It's possible but you wouldn't utilize this "smart" accordion method. It's almost not worth it(unless you really want the mockup to be the most realistic possible) bc you would have to do each "screen" separately, similarly to how you'd have to create accordions in the past bc the auto-layout one isn't smart enough to only open one at a time. so let's say if you have 3 questions, you'd have to have 4 versions: #1 all accordions are closed #2 only the 1st accordion is expanded #3 only the 2nd accordion is expanded #4 only the 3rd accordion is expanded and then link each one of them in the prototype panel. Let me know if you need help to know on how to create that

[@zhannavoskanyan8589]

@@AdrianoReisDesign 😍🤩thank you for quick and such detailed answer. will keep to follow your videos

[@theesem5299]

Great tutorial! Is there a way to make the first option close when the second is clicked?

[@AdrianoReisDesign]

Glad it was helpful. See the pinned comment and i shared a way there

[@AlyonaShangina]

hi! it's a very neat tutorial, but i'm still having trouble with my accordion - when i click on one of the lines, the expanding tests hides under the other lines - do you know what could cause this problem?

[@AdrianoReisDesign]

Hi, for the accordions to work(push content as they expand) the parent container has to be an auto layout with vertical direction (AL content growing vertically) and set to “hug contents”. check if you have that set up correctly or feel free to Dm me on twitter @deereis with the file link and I can take a look for you :) hope that helps

[@paperfacesingold2]

true magic! thank you!

[@AdrianoReisDesign]

Glad it was helpful!

[@carolinerichardson1743]

Thank you! This was helpful

[@AdrianoReisDesign]

glad you found it helpful!

[@tgoorany]

Hello, thank you for the content. How do you make the "line" go up when you hide the text layer? i did auto layout- vertical for all the layers before doing content. But my line stays at the same place.

[@AdrianoReisDesign]

Heyy, you're welcome! Hm make sure the Auto layout is set to the vertical direction and also set to "hug content" additionally check if the line is not marked as "absolute positioning" You can find the absolute positioning if you select the line and then go all the way on the top right of Figma next to the Y dimensions/positioning. The icon should look like a plus sign inside a box. Let me know if you were able to figure that out. :)

[@kimberlypapillon1608]

Thanks so much for this! I couldn't get it to work though, i have interactive components, I can see the 'on click - change to' and the prototype connections are there, but nothing happens? I ran through the video many times but cant figure out where I went wrong.

[@AdrianoReisDesign]

Hi Kimberly that’s strange, are you able to share the working file as a view only so I can duplicate it and inspect to try to see where the issue is? Just make sure that on the share settings, (at the bottom right of the share pop up) that “viewers” can duplicate it

[@onyeukwundubuisi5319]

it was too fast. i didn't understand how you did it

[@AdrianoReisDesign]

Hey, what part of it are you're struggling with? Is it the auto layouts i'm using or too many shortcuts? Would love to know so i can improve in my next videos. Also, make sure you have "Interactive Components Beta" first, if you don't know what that means, Figma's sign up form is in the description. Thanks!

[@maramasarotti8540]

Hi! thank you this is really clear and well explained. Any chance you know if there is a way to open the menu while scrolling down/close on scrolling up. I've tried to change it from the interaction panel but it doesn't really work. Thanks :)

[@AdrianoReisDesign]

Hi, glad it was helpful! Unfortunately, to trigger each accordion on scroll would be very hacky and probably not very usable

[@fithomanuel1167]

Anyone can help me? so i want to make some sidebar with nested submenu, and i use this accordion technique to wrap and reveal the submenu, but my problem is, i cant keep the submenu opened when move on to the next frame after the submenu was clicked. Are there any cleaner solution for my problem rather than making all the submenu frame possibilities one by one. thanks

[@AdrianoReisDesign]

Hey, hm that sounds like a tricky one. Maybe by creating a component set with 2 variants, a closed and an open one, then when you go to the next frame you'd have to have the open variant as a starting point. Just make sure you're using auto layout on everything. Not sure if that helps but I'd be happy to take a look at the file to try to help better too. Let me know :)

[@bhuwnanaik3425]

Can you suggest a video for the same thing, but I need is that, if click on one it opens and the other closes at the same time. Rather than creating open=close on same. If you got my point let me know.

[@AdrianoReisDesign]

Hi great question, there's no easy way of doing that right now. It's possible but you wouldn't utilize this "smart" accordion method. It's almost not worth it (unless you really want the mockup to be the most realistic possible) bc you would have to do each "screen"separately, similarly to how you'd have to create accordions in the past bc the auto-layout one isn't smart enough to only open one at a time. so let's say if you have 3 questions, you'd have to have 4 versions(or variants): #1 all accordions are closed #2 only the 1st accordion is expanded #3 only the 2nd accordion is expanded #4 only the 3rd accordion is expanded and then connect each one of them in the prototype panel. Let me know that makes sense or if you need help to know on how to create that

[@MotivatingMarketingTech]

At about 1:57 when you make the layer disappear and somehow make it an auto layout doesn't make sense. I tried and tried and eventually had to give up as I could not get it working.

[@AdrianoReisDesign]

Hi, i use a lot of shortcuts if you slow the video down or pause at that specific moment you'll see that i just hid the description/answer from the "closed" variant by using the shortcut. In the description you can get the Figma link so you can duplicate the file and see how everything is set up. Hope that helps

[@Ace_of_Black]

unfortunately, when using such components, the prototype screen wobbles too much. unless it is tied to the top border, and you didn't used scroll on page :(

[@AdrianoReisDesign]

Interesting! I didn't try to use it on a full on prototype yet but I'm curious to try to find a fix for that now. Thanks for your comment! 🙏

[@RohanAtree]

Hi adriano, I have been working on a self project which utilises accordions a lot, although I haven't been able to get the animation right, is there a way I can reach you with my prototype for feedback?

[@AdrianoReisDesign]

Hi Rohan, yeah I’d be happy to share feedback and/or take a look at your file setup. You can reach me on twitter.com/deereis and share the link(s) thru DM

[@siouxiejay7369]

Same issue as a few below - spent a couple hours following every step but the prototype doesn't work. I started again from scratch 3x to make sure I didn't miss anything.

[@AdrianoReisDesign]

Hi Siouxie! I’m sorry you’re having trouble with it.. I would love to help further and investigate what’s going on. Can you share a link to the file with me?

[@vitoriamarinhodesouza9582]

when I click on the question for it to open, it opens but covers the question below, it doesnt push the content like in the video. what am i doing wrong?

[@AdrianoReisDesign]

Hi, the layer wrapping Al the accordions has to be an auto layout, it’s best if all of them are auto layout frames, otherwise that can happen. Lmk if got it to work. If you’re still having trouble I’m happy to try to take a look at the file

[@sabrinastarcat3499]

at 3:33 which part did you copy and paste exactly? I’m having trouble figuring out how to place that onto the frame with the autolayout

[@AdrianoReisDesign]

At first I had copied only the text from inside the component by mistake so when I pasted into the auto layout frame it came just as raw text. So I hit CMD Z to undo and selected the actual component, if you look at the layers panel I select the “open=false” and then paste that into the auto layout frame. Let me know if that helps :)

[@vadikaladik69]

Hey, im breaking my head over this. Is there anyway you can help??

[@AdrianoReisDesign]

Hey, feel free to send me the file link to take a look, you can dm me on Twitter @deereis also

[@vadikaladik69]

@@AdrianoReisDesign hey i dont have a twitter could i share it with you through instagram?

[@jainishah6107]

Hi there! Great tutorial however when I try to implement this, and play the prototype it doesn't seem to open the accordions or it looks like it freezes but my mouse can detect there is content there? I followed each step to my knowledge. Sometimes it let's me open and close the lowest accordion but when I try to open ones further at the top they then all freeze and I cannot open any. If you have any ways to help that would be greatly appreciated :D Thanks!

[@AdrianoReisDesign]

Hey Jaini 👋 It’s a bit hard to tell what’s going on but if you can share the file I’d be happy to duplicate it and investigate for you to try to see what’s going on. For that you need to make sure viewers are allowed to duplicate the file. Go to the “Share” button on the top right and make sure “anyone with the link can view” and then go to the bottom right and click the little menu to see more options and click “allow viewers to duplicate..” Alternatively, you can go to the link in the description and duplicate my file to inspect it and try to see if anything was missed. Hope that helps, thanks!

[@deepikasharma67]

Hey, Did you find solution for this. The same thing is happening with me.

[@AdrianoReisDesign]

@@deepikasharma67 hi! Are you able to share the file with me so I can take a look? Feel free to make a duplicate if that’d work better for you. Thanks!

[@bea6096]

Okay so how do I make this interact with the website page?

[@AdrianoReisDesign]

You can just copy and paste that in a site and it'll behave the same. Just make sure whatever the accordion's parent container is, that it is an auto-layout layer and its height is set to "hug contents"

[@marzbitenhaussen]

is nice but can the open ones close when u open other options or all remain open?

[@AdrianoReisDesign]

Hi! This is the same question as Zhanna posted in the comments below so I’ll just paste my answer here: great question, there's no easy way of doing that right now. It's possible but you wouldn't utilize this "smart" accordion method. It's almost not worth it(unless you really want the mockup to be the most realistic possible) bc you would have to do each "screen" separately, similarly to how you'd have to create accordions in the past bc the auto-layout one isn't smart enough to only open one at a time. so let's say if you have 3 questions, you'd have to have 4 versions: #1 all accordions are closed #2 only the 1st accordion is expanded #3 only the 2nd accordion is expanded #4 only the 3rd accordion is expanded and then link each one of them in the prototype panel. Let me know if you need help to know on how to create that

[@Eaonix13]

I cant change the icons in it, i cant seem to edit it

[@AdrianoReisDesign]

I'm not sure why you're not able to edit the file, if you are able to edit the file you should be able to edit anything in it. When you open this link: www.figma.com/community/file/1088505283210920914 you just need to click on "Open in Figma" and you should be able to edit anything in it. If you're completely new to Figma i'd suggest watching their beginner tutorials on their youtube channel to get up to speed

[@ambalikaguha6589]

I want to learn from you. how let me know

[@AdrianoReisDesign]

Hi, thank you! I'm pretty busy with my full-time job but currently i'm only posting tutorials here on youtube every other week and sometimes on twitter. Feel free to reach out there @deereis if you have any questions and i'll try to answer as soon as i can!

[@justafrenchkidtryingtospea9462]

The tutorial is unfortunately too fast

[@AdrianoReisDesign]

Hi, maybe if you download the file it’ll help you understand what’s happening in the video more easily? Let me know if there’s anything I can help with

[@justafrenchkidtryingtospea9462]

@@AdrianoReisDesign Thanks in the end I found a slower video and did my menu with it👌🏿