Let's make a bouncy accordion in Figma
HTML-код
- Опубликовано: 22 май 2023
- Let's make an accordion in Figma!
1. Start with three elements: a text layer for label, a chevron icon, and a text layer for the description.
2. Select the label and the chevron, and apply auto layout. Set the vertical padding to 12 and rename the layer to "header".
3. Select the description text layer and apply auto layout. Set the padding-bottom to 12 and the rest of the paddings to 0. Rename it to "panel".
4. Select the header and panel layers, and apply auto layout. Rename it to "accordion" and set gap between items to 0. Then enable the clip content settings.
5. Add a bottom stroke to the accordion, and turn it into a component.
6. Add a second variant, and rename the two variants to "collapsed" and "expanded".
7. In the collapsed variant, click and drag the bottom bounding box so that it resizes to fit the header layer and hide the content in the description layer.
8. Select the chevron icon inside the collapsed variant, and set its rotation to 180 degree.
9. Now, switch to the prototype mode.
10. Connect the collapsed variant to the expanded variant, and set the animation type to “smart animate”. Change the easing setting to “custom spring”, and change stiffness to 300 and damping to 20.
11. Now connect the expanded variant back to the collapsed variant, and apply the same settings.
12. Add instances of the collapsed variant. Select them all and apply auto layout. Then, click the present button to test it out.
#figjam #figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems 
Наука
Use this Figma community file to follow along: bit.ly/3NQj2sf
Programmers be like: Don't teach them such complicated transitions, because we have to implement them 😂
Que se habrá fumado el diseñador 😂
How many lines of code approximately it will take to make this!??? 🥲
complicated transitions?😑
It would be easier to name your variants "expanded" and the two values be true and false, that way it's easier to understand and switch between states, as the resulting control becomes a simple toggle in the properties panel.
Keep designing small elements like this
Thank you sir! It does the job (for an expanding menu, pushing content down the page)
Nice transition
Good, but how can I make this component scroll down lower contents?
Love it!! Just did it!
Muito obrigado! Salvou meu dia!
What if one expand other close automatically..how will that happen in prototype please guide @figma
I need to use a dropdown menu and then a button, but I can't make the button move lower when the dropdown is open. How do I do that?
Super interesting! I'm gonna need a slower version tho 🙈
This is really helpful
this is so COOL!
this is very informative!!!
Satisfying
Thanks to this
Cool, thanks! Could you also explain how to distribute variables across multiple files? I know that for styles it was very easy, just go to Libraries and switch it on. But I still didn’t find a way to do this with variables
Thank you. Would have been nice as a normal video to follow the steps..
Import to tell that it only works within auto layout, I couldnt make it work using only frames
I have the Problem that I want to do it the other way round, so that expanding one label would push the others up, does anyone know what I would have to adjust?
I would love if someone tells me what should I do in order to create the behaviour where one expanded option collapses as soon as some other option is clicked
If one menu is open, other menus should automatically close, how to do that?
Voy a implementar algo que se me ocurrió, volveré a comentar a ver cómo me fue. Se me ocurre crear la tercera variante en estado compacto y hacer la inversa cuando se de click se cambie de estado cada variante a su inversa. Prueba así a ver
Just make three variants with only one drop down in each one and just connect them
Hi, thanks for the video. I have a problem when I want to create a long page for the iPhone with many frames of content. One of these frames is a large frame with multiple accordions, similar to the ones shown in the video. The issue I'm facing is that when I click on one of these accordions, it expands with some lags. Instead of playing the smart animation smoothly, I first see the top of the whole page, and then suddenly it moves back without any animation. (When I use "instant" animation I don't have any problems)
Does anyone have a solution for this issue?
Hey, how can I edit the expanded view content when I only see it in prototype mode? Thanks!
Hello, I would set up text component properties in your main component so that you can edit the text content from the side panel. Learn more about component properties here: help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties#h_01G2Q5G3FV0EQP9RZFZG7GVWEG
What if the label titles have a different amount of characters? If you change the length of "Label" on the varient you drag in from your assets, it throws off the autolayout with the carrot and the length of the stroke. HAALP!
No it won't just set the label " container long enough.
That’s great, but if this is placed on an iPhone frame, how do you make the iPhone frame automatically expand to accommodate for when all of the accordions are expanded? Instead of stretching the iPhone frame manually and having a gap to compensate for when the accordions are open?
Hello, you can achieve that by setting the scroll behavior of the frame to "vertical".
@@Figma Thank you so much!
Just how do you code this?? 🤦♂️
Figma!❤️
I made an accordion but I have to make a long *ss page for it to expand correctly. If not is expand and it wont scroll to the page bottom :( ...
Hi, try setting the scroll behavior of the frame to "Vertical".
@@Figma It worked thank you
TOO FASTSTSTTTS