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
@@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!
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!
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 🤘
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!
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?
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
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
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
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?
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 :)
@@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?
@@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
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?
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.
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.
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
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.
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. :)
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 :(
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.
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
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?
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
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.
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
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!
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?
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
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.
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?
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!
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 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!
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
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 :)
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 :)
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
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 :)
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"
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
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!
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
