<aside> 🔗 Medium Link: https://chinguyenthuy.medium.com/sketch-how-to-make-scalable-symbol-3-tooltip-ab45bb839d24

</aside>

Building table components for your design system? 🤔 Hmmm… Yes, totally absolutely can!!!

There are many ways to build the table component in Sketch. However, this is the most versatile way that I've found and I am happy to share it with you guys now.

Here we go 💫

Let’s start analyzing the table component

• The table is a collection of cells that are put together. In order to have a complete table, we need to build the cell first.
• Therefore, the design approach here is having the cell as the fundamental property to plant the table.
• What are the elements that fabricate the cell?
  1. Background
  2. Content
  3. Borders

Now, let’s turn all of them into symbols, then nest them inside a cell.

1. Background

• Step 1: Define the background colour of the cell and turn all colours into Style.
• Step2: Make a rectangle with the size you want
• Step 3: Fill the cell's background by applying the default style from Style that is ****configured in Step 1
• Step 4: Turn that rectangle into a symbol

✅ You just need to create 1 symbol for the background that is filled by the colour from the Style. It does not necessary to create every single state since we can switch colours easily in the instance.

2. Content

Content can refer to many variations:

• Text only