Let's make a bouncy accordion in Figma

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