3.8 Accordion

In the Figmaster - Lessons Figma file, open the 3.8 Accordion page.

Introduction

In the next three chapters, I will show you how to document components and their states in our design system. Let's start by preparing the page.

Step 1. Page

Prepare a documentation page for the Accordion. Remember to change the title in the Header, name of the Frame, and Menu Item states. Don't forget to link to the 2.1 Accordion page in the Header. The Group title text should be changed to Component.

Step 2. Component Wrapper

  1. Create a text layer with Label text inside somewhere on the canvas.
  2. Change its style to Text M / Medium.
  3. Set its color to Neutral/90.
  4. Create a Rectangle below that is 100x100 px.
  5. Change its fill color to Neutral/20.
  6. Group the rectangle and apply the auto layout.
  7. Rename it to Wrapper.
  8. In the auto layout panel:
  9. Direction: Horizontal.
  10. Padding (all sides): 24 px.
  11. Alignment: Center - Center.
  12. Move the Wrapper 16 px under the Label text.
  13. Group both the Label and Wrapper and apply the auto layout.
  14. Rename it to Component Wrapper
  15. Having the group selected, press Enter to select both items inside.
  16. Set their Resizing (width) property to Fill container.

Step 3. Accordion

  1. Copy the Component Wrapper.
  2. Paste it inside the Content > Group.
  3. Set the Component Wrapper's Resizing (width) property to Fill container.
  4. Find the Accordion Group in the Assets panel.
  5. Drop it in the Wrapper group inside the Component Wrapper.
  6. Set the Accordion Group's Resizing (width) property to Fill container.
  7. Change the Label text to Group.

Awesome! Now copy the entire Accordion page and proceed to the next chapter.

PreviousNext