2.1 Accordion

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

Introduction

In this chapter, we will create a simple accordion component. An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.

Step 1. Accordion Item - Collapsed

Let's build a header part of our Accordion. It's the part on which the user will click to reveal the content of the Accordion.

Part 1. Base

  1. Press T on your keyboard to open the text tool.
  2. Click somewhere on the canvas and type in Accordion title.
  3. Press CTRL + A to select the text.
  4. In the Styles panel, select Text M/Medium style.
  5. Change the Text color to Neutral/100 style.
  6. Click somewhere on the canvas to deselect the text.
  7. Select the text layer you just created and press CTRL + G to group it.
  8. Rename CTRL + R the group to Accordion Item / Collapsed.

Part 2. Auto layout

  1. Press SHIFT + A to apply an auto-layout to the group.
  2. In the Auto layout panel, set the following values:
  3. Spacing between items: 8 px.
  4. Padding Left and Right: 16 px.
  5. Padding Top and Bottom: 10 px.
  6. Alignment (blue lines in the Alignment and Padding menu): Left - Center.
  7. In the Fill panel, set the color of the item's background to Neutral / 10.
  8. Press ALT + 2 to open the Assets panel.
  9. Search for Icon / CaretDown.
  10. Grab the icon from the Assets panel and drop it inside the Accordion Item on the right.
  11. Resize the icon to 16x16 px.
  12. Select the Accordion title text.
  13. In the Resizing panel on the right, set its width property from Hug contents (the one at the top) to Fill container.
  14. Select the Accordion Item / Collapsed frame and resize it to be 464 px wide.

Step 2. Accordion Item - Uncollapsed

Great work! Now we need to create the second Accordion Item that will display our Uncollapsed state. In this step, we will use the Item we created in the previous step to save our time. When working on the components in Figma, make sure you don't repeat yourself. Try to use previously created items to create their variations quickly.

Part 1. Trigger

  1. Select the Accordion Item / Collapsed.
  2. Move it 64 px to the bottom while holding SHIFT + ALT (to duplicate it).
  3. Rename CTRL + R the new copy to Trigger.
  4. Select the icon inside.
  5. Change the icon to Icon / CaretUp. Use the swap instance panel, just like we did in the 1.7 Icons chapter. Alternatively, you can rotate the Icon / CaretDown 180 degrees.

Part 2. Content

Let's create the bottom part of this component.

  1. Open the text tool (T).
  2. Click somewhere on the canvas and paste the placeholder text. You can use this one if you want: Assertively build functional intellectual capital via distinctive niche markets. Professionally provide access to leveraged e-commerce after professional users. Collaboratively network high.
  3. Having the text layer selected, make sure to set its Text style to Text M/Regular.
  4. Set the text color to Neutral/90 style.
  5. Press CTRL + G to group it.
  6. Rename it CTRL + R to Content.
  7. Apply the Auto Layout (SHIFT + A).
  8. In the Auto layout panel, set the following values:
  9. Padding Bottom, Left, and Right: 16 px.
  10. Padding Top: 2 px.
  11. In the Fill panel, set the color of the item's background to Neutral / 10.
  12. Select the text inside.
  13. In the Resizing panel on the right, set its width property from Hug contents (the one on the top) to Fill container. Just like we did in Step 1.
  14. Resize the whole Content item to be 464 px wide.

Great work! By the way, do you know that there was a different and quicker method to build the Content item? Don't repeat yourself. Remember? We could've used the Accordion Item / Collapsed to transform it into a Content item by simply changing its properties, removing the icon, and adding the placeholder text. Try it yourself and see how much time we would have saved doing by doing so :) You can practice it now before we move on to the next part.

Part 3. Grouping Trigger and Content

  1. Select Trigger and Content items.
  2. Press SHIFT + A to apply the auto layout to both items. Selecting both items and adding auto layout works like grouping but also adds the auto layout.
  3. Rename the new group to Accordion Item / Uncollapsed.
  4. In the Auto layout panel, set the Spacing between items value to 0.
  5. Having the Accordion Item / Uncollapsed selected, press Enter to select both Trigger and Content elements inside.
  6. In the Resizing panel on the right, switch the width selector from Fixed width to Fill container.

Step 3. Accordion Item Component

OK! Time to create the Accordion Item component with the stuff we've just built.

  1. Select both Accordion Item / Collapsed and Accordion Item / Uncollapsed items.
  2. Press ALT + H to align them horizontally (if they are not perfectly aligned).
  3. Move the bottom item, so it's 32 px below the top item. Pro tip: You can use the 'Spacing between' input in the top right corner of the Figma UI.
  4. Open the component menu dropdown at the top center of the Figma UI (four squares icon).
  5. Select the 'Create multiple components' option.
  6. On the right, in the Variants panel, press the 'Combine as Variants' button.
  7. In the Variants panel, rename 'Property 1' to 'State'.

Step 4. Boolean values

Did you know that Variants can also have on/off values? Let's try that now!

Part 1. Copy

  1. Select the Collapsed component inside the Accordion Item variants group (the element with a purple dashed stroke - click on Accordion Item label).
  2. While holding SHIFT + ALT, drag it somewhere on the canvas and outside the variants group.
  3. Having the copy selected, take a look at the Variants panel. You will have State: Collapsed, where you can change it to Uncollapsed.

Part 2. Let's make it easier to use

  1. Select the Accordion Item variants group.
  2. In the Variants panel, rename the State label to Uncollapsed.
  3. Rename the Collapsed property to Off.
  4. Rename the Uncollapsed property to On.
  5. Select the copy we've created in Part 1.
  6. Take a look in the Variants panel - now we can switch between states easily! Click on the Uncollapsed switch a couple of times to see how the component behaves.

Step 5. Accordion Group

You're doing great! Time to use the components we've just created to create the entire accordion component.

  1. Select the copy.
  2. Duplicate it by moving it to the bottom with SHIFT + ALT. The spacing between items should be 0 px.
  3. Press CTRL + D to duplicate it, so there are five items in total.
  4. Select all five items.
  5. Apply Auto Layout by pressing SHIFT + A.
  6. Rename this group to Accordion Group.
  7. Press Enter to select all items inside.
  8. In the Resizing panel on the right, set their width property from Fixed width (the one on the top) to Fill container. Just like we did in Step 1.
  9. Select the Accordion Group again and set its Corner radius to 4 px.
  10. Check the Clip content checkbox.
  11. In the Auto layout panel, set Spacing between items: 1 px. It's the hack I use to create the border between Accordion items ;)
  12. Set the Fill color (background color) of the group to Neutral/40.
  13. Set the Stroke color to Neutral/40 - 1 px - Outside.
  14. Having the Accordion Group selected, press CTRL + ALT + K to create a component.
  15. Now, select the second Accordion Item component inside the Accordion Group component you've just created.
  16. In the Instance menu on the right, switch it, so it becomes Uncollapsed.

Great work! Our Accordion is ready! You can now access both components from the assets panel. Let's move on to the next chapter.

PreviousNext