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!
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!!!
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
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?
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.
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.
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
@@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).
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
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
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?
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.
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!
Thank you!!! Only video out there that clearly explains this to the beginner. Really appreciate it!
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!!!
This video its more helpful than a lot of the courses on internet (nice design)
THANK YOU for creating this. By far the most easy to follow tutorial on this that I've found!
thank you for a very easy, short and clear tutorial..
This is Gold! thank you for making so easy to follow and short
Thank you so much! I've been struggling with it for so long.
The ONLY tutorial I fpund which is explained so well and quickly. thankyou!!!
Thank you, that means a lot
Thank you! I have been struggling with this all morning, much clearer than some I’ve seen! 🙌
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!
This was really explanatory. I could follow along and achieve just want I intended
Thanks
great explanation, thank you!
This was very helpful and easy to follow. Thank you!
Absolutely smart
That explanation ❤👌👏
Very useful, thanks!
Thank you. I did it!!
Thanks😀
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!
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 :)
i learnt so much from this tutorial!!! thanks a ton!!
Glad it helped!
Thank you a lot,but once i make the page auto layout the whole page gets runined ?
thank you
Wow, cool! I did it. Thank you so much
You're welcome!
sir thank you so much finally I was able to do it
great video! made it very easy to understand.🙌
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?
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?
Hello, how do you integrate blocks (frames and groups) inside others ? Is it a plugin ? At 3:00
Thks !
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
Omggggggg thank you!!!!
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
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!
Just subscribed… great 😊 video
Can you share a Figma file with this example? That will be very helpful
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
nice
Wait, Don Draper is doing Figma tutorials now?
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
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.
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).
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
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
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.
can this desing be in pdf file ?
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.
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