Creating An Interactive Accordion in Figma
Вставка
- Опубліковано 27 січ 2022
- This Figma tutorial shows how to easily create an interactive accordion component that can be opened and closed within your prototype without the need to create separate state pages.
Subscribe : / @darrennorthcott
Patreon: / darrennorthcott
Sign Up for Updates, Tips & Tricks : northcott.substack.com/
Download Figma: bit.ly/41F6yaS
#figma #figmatutorial #autolayout #animation #smartanimate
This is honestly the only tutorial I've found so far that explains how to do this appropriately where I can follow along. I've watched like 5 tutorials about this and couldn't do it. Great job and awesome job at making it genuinely understandable for beginners!
To echo everyone else's sentiments, this is one of the most clear tutorials. Much needed for a beginner like me. Thank you!
Stopped using figma for a while and now need it in my job so bingewatching lots of tutorials! Thanks so much for this tutorial -- super clear and informative! Hope you post more tutorials down the line!!!
Thank you!!! Only video out there that clearly explains this to the beginner. Really appreciate it!
THANK YOU for creating this. By far the most easy to follow tutorial on this that I've found!
Thank you! I have been struggling with this all morning, much clearer than some I’ve seen! 🙌
This video its more helpful than a lot of the courses on internet (nice design)
This is Gold! thank you for making so easy to follow and short
This was very helpful and easy to follow. Thank you!
thank you for a very easy, short and clear tutorial..
Thank you so much! I've been struggling with it for so long.
This was really explanatory. I could follow along and achieve just want I intended
Thanks
This was a great tutorial, thank you!
Wow! Simple and easy indeed. Could you do a tutorial on how you do the auto layout for the screens? Thank you for this!
great video! made it very easy to understand.🙌
great explanation, thank you!
Making dropdowns as a variant very good idea. Thank you so much! I were trying to do with seperated frames. It looks so stupid now :)
Very useful, thanks!
You don't actually need to create frames in the first place as autolayout basically creates them for you. Fastest way to do this is with Shift+A
That explanation ❤👌👏
Thank you a lot,but once i make the page auto layout the whole page gets runined ?
Thank you. I did it!!
Absolutely smart
The ONLY tutorial I fpund which is explained so well and quickly. thankyou!!!
Thank you, that means a lot
thank you
Just subscribed… great 😊 video
What is the secret to getting the text blocks to slide down? I can get the open and close but it just overlays the existing text? I have auto-layout vertical on all of them
I know it's a year late, but have you ever figured out the answer to this?
Thanks😀
i learnt so much from this tutorial!!! thanks a ton!!
Glad it helped!
It seems I'm not alone when I say that this was so easy to follow and understand. Thank you for this! subscribed too.
Awesome! Thank you!
sir thank you so much finally I was able to do it
Wow, cool! I did it. Thank you so much
You're welcome!
do you know where i can find a tutorial that shows an accordeon similar to this but with 2 or more items, where the open item closes as you open another one?
Wait, Don Draper is doing Figma tutorials now?
I keep getting stuck at the very last part. How do I make the elements below move down when the accordion opens?
Make sure your outer most auto layouts are set to 'hug' that should do it
Can you share a Figma file with this example? That will be very helpful
Hello can you tell me how to set page to auto layout as I have selected the page and auto layout and my accordion is still cover my other page content
nice
yeah, this works, but what i am trying to figure out is how to do this using the boolean property, which is way more efficient for designing components than creating separate variants for open/closed
Except the boolean property won't let you prototype between the states, thus removing the interactivity of the component.
@@DarrenNorthcott yep, that's why I was saying this works of you build components in the older, more cumbersome way of variants, and not the newer boolean way.
we literally just figured it out tho. we built a base component of just an open & closed accordion item. added "change to" interaction between the 2. then we built our actual accordion stack component with multiple instances of that base component (each being having different instance content).
can you create an updated version of this in figma? the figma updated its features and i cant find anything (i just start learning ui/ux this month). thank you so much in advance.
for me the object below is not expanding even though after applying auto layout , idk in which i am missing out
I was wondering forever how to use this component so that the other elements on the page moved with the accordion . thank you!!!
edit: can you show how you set up autolayout for the screen
I'm going to do a video on autolayout soon
youve made this simple and easy, thank you! Can you change the contents of the menu once you pull it from the asset menu? or does it revert back to the original component? whats the best practice to edit the menu? mine reverted back.
you should be able to change the contents once its in your design, just switch to the open state and change it there, alternatively you can add a content variable to the open state and change that in your designs.
Real good video thank. Do you have plans to more videos on figma ?
I do, I've been offline for a bit, but more are coming soon!
can this desing be in pdf file ?
Hello, how do you integrate blocks (frames and groups) inside others ? Is it a plugin ? At 3:00
Thks !
Hi Darren , this video is really helpful. Thank you so much. I need help . When a screen has too much content vertical scroll is not functioning
Try either using an auto layout for your entire page (see the sticky header tutorial I have for how this works) OR try enabling vertical scrolling on your parent frame under the prototype settings
thank you for the tutorial, anybody know if it is possible to create a dropdown menu with variable content? so that you can change the items in the dropdown each time you use it? thanks
If it's just text, you can edit the text in the instance of the component each time (just set it to open to edit, then you can set it back to closed) - if the items are more complex, try making each one an instance, then you could use instance swap to change them out.
hello, thank you for your help! I tried to make my whole page responsive/ in auto layout. kinda like how yours moved when u opened and closed the accordion. But when I put my page in a frame everything kind of bunched up to the middle or to the left. Can you tell me what I'm doing wrong?
Make sure your outer frame is fixed width, and check your padding, and your inner elements to see if they are set to fixed or fill, fill might fix it.
what if i have more catagories and more items to it , how can I manage it
You'll have to build those into your component, you can add as much content as you like since it uses autolayout it should be pretty flexible.
This is more of a dropdown than it is an accordion.
thank you