2.14 Table

In the Figmaster - Lessons Figma file, open the 2.14 Table page.

Introduction

Data tables are used to organize and display data efficiently. In this chapter, you will learn how to create a simple table component with an auto layout. This lesson will cover creating more advanced components, that is, creating larger components with other smaller components.

Step 1. Table Header

Part 1. Table Header with Checkbox

  1. Grab the Checkbox component from the Assets panel and drop it on the canvas.
  2. Group it and add the auto layout.
  3. Rename it to Table Header / Checkbox.
  4. In the auto layout panel, set the following properties:
  5. Padding Top and Bottom: 14 px.
  6. Padding Right and Left: 16 px.
  7. Alignment: Center - Center.
  8. Set the groups Fill to Neutral/20.

Part 2. Table Header with Text

  1. Create a text layer with Table header text inside.
  2. Set its style to Text M/Medium.
  3. Color to Neutral/100.
  4. Group it and add the auto layout.
  5. Rename it to Table Header / Text.
  6. Move it, so it's 196 px on the right of the Table Header / Checkbox group.
  7. Set the same padding properties as in the previous step: 14 and 16 px.
  8. Select the text inside and set its Resizing width property to Fill container.
  9. Resize the group to 200 px in width.

Part 3. Component and variants

  1. Create the Table Header component with variants.
  2. Property 1 label should be Type.

Step 2. Table Cell

Part 1. Table Cell Checkbox

  1. Create a Table Cell group with a Checkbox inside just like we did the Table Header / Checkbox with the same padding.
  2. Rename it to Table Cell / Checkbox / Default.
  3. The color Fill should be Neutral/10.
  4. Duplicate it 196 px to the right.
  5. Rename the new copy to Table Cell / Checkbox / Selected.
  6. Select the Checkbox inside and change its Status to Active and State to Default.
  7. Change the color fill of the group to Primary/Surface.
  8. Duplicate Table Cell / Checkbox / Selected 196 px to the right.
  9. Rename the new copy to Table Cell / Checkbox / Disabled.
  10. Select the Checkbox inside and change its Status to Inactive and State to Disabled.
  11. Change the color fill of the group to Neutral/30.

Part 2. Table Cell Text

  1. Create a Table Cell group 48 px below the Table Cell / Checkbox. Place a Text layer "Table cell" inside just like we did the Table Header / Text. Make sure the group is 200 px wide and has the auto layout applied.
  2. Rename it to Table Cell / Text / Default.
  3. The color Fill should be Neutral/10.
  4. The text color should be Neutral/90.
  5. The text style should be Text M/Regular.
  6. Duplicate it 48 px to the right.
  7. Rename the new copy to Table Cell / Text / Selected.
  8. Change the color fill of the group to Primary/Surface.
  9. Duplicate it 48 px to the right.
  10. Rename the new copy to Table Cell / Text / Disabled.
  11. Set the color Fill to Neutral/30.
  12. Set the text color to Neutral/60.

Part 3. Table Cell with a Badge

Time for practice! Create a Table Cell / Badge group with all three states. Follow the principles from the previous parts. Place a Badge / Danger component inside the Table Cell and make sure it is aligned to the left inside the group. Disabled Badge should be set to 50% opacity.

Part 4. Table Cell with an Action

Create a Table Cell / Action group with all three states. Follow the principles from Part 2. Place a text layer "Action" inside. The text should have the following properties:

  1. Style: Text M/Medium.
  2. Aligned to the right.
  3. Resizing (width): Fill container.

Part 5. Component and variants

  1. Create the Table Cell component with variants.
  2. Property 1 label should be Type.
  3. Property 2 label should be State.

You're doing great! Let's combine the components we've just created to construct a simple Table.

Step 3. Table

Part 1. Table Header Row

  1. Grab the Table Header component from the Assets panel and place it on the canvas.
  2. Duplicate it to the right, so there are six copies in total of 0 px from each other.
  3. Select all copies and group them.
  4. Apply the auto layout.
  5. Rename it to Table Header Row.
  6. Select five Table Headers, excluding the first one on the left.
  7. In the Instance panel, change the Type of the selected Table Headers to Text.
  8. Change their Resizing (width) property to Fill container.
  9. Select the Checkbox inside the first Table Header and change its Status to Indeterminate.
  10. In the last Table Header, select the text layer and set its layer opacity to 0%.

Part 2. Table Row

  1. Grab the Table Cell component from the Assets panel and place it on the canvas.
  2. Duplicate it to the right, so there are six copies in total of 0 px from each other.
  3. Select all copies and group them.
  4. Apply the auto layout.
  5. Rename it to Table Row.
  6. In the Instances panel, change the Type of the selected Table Cells accordingly. Starting from the left:
  7. The second one to Text.
  8. The third one to Badge.
  9. Fourth and fifth to Text.
  10. Last one to Action.
  11. Select five Table Cells excluding the first one on the left and change their Resizing (width) property to Fill container. Just like we did in Part 1.
  12. Place the Table Row 24 px below the Table Header Row.
  13. Select both groups and press ALT + H to align them.

Part 3. Divider

  1. Press L on your keyboard and draw a horizontal line on the canvas. Remember to hold SHIFT to make it straight.
  2. Make it ~500 px wide.
  3. Rename the line to Divider.
  4. Set its stroke color to Neutral/40.

Part 4. Grouping everything together

  1. Place the Divider between the Table Header Row and Table Header.
  2. Select all three items and group them.
  3. Apply the auto layout.
  4. Rename it to Table.
  5. Set its Fill color to Neutral/10.
  6. Stroke to 1 px Neutral/40 Inside.
  7. Effect to Shadow 1.
  8. Corner Radius to 4 px.
  9. Check the Clip content Checkbox in the top right corner of the Figma UI.
  10. In the auto layout panel, set the Spacing between items to 0.
  11. Having the group selected, press Enter to select all items inside.
  12. Set their Resizing (width) property to Fill Container.
  13. Select the Table Row inside.
  14. Press CTRL + D to duplicate it, so there are seven Table Rows inside.
  15. Select Divider line inside the Table.
  16. Duplicate it and press Arrow Down to move it between Table Rows below.
  17. Repeat the action, so each Table Row is divided.

Great job! Congratulations! Now you can play with the Table component and see how it works. Try changing text or selecting the elements in the Table Row and changing their State. When you are ready, proceed to the next chapter.

PreviousNext