Sketch Guide | How to make scalable symbols | 5) Table

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
• Icon only
• Number only
• Icon + Text
• Icon + Number
• Number + Text

So, just list all possible variations of the table content and turn all of them into individual symbols.

Pin to the top and left

Layout horizontally from left to right

3. Borders

A cell is surrounded by 4 borders. Each border can have its own style. It can be solid, dashed, transparent, dotted,…

• Step 1: List all possible styles of the stroke and add them to the Style.

For example, my table will have only 3 styles for the stroke. I add them all into the Style, so I can switch them easily when I use them later.

• Step 2: Create 2 symbols for the vertical and horizontal border that applied the default style.

The reason we need 2 symbols is that it allow you have a full control of the stoke. If you just use 1 symbol and rotate it, you may get into difficulty in scaling.

• Step 3: Essential settings for the symbol

You need to make sure that when the stroke grows horizontally, the height will not change, and vice versa, the width remains the same when the stroke is stretched vertically

Fix sized vertically for horizontal border

Fix sized horizontally for vertical border

✈️ All the atomic symbols are made! Now it's time to gather all the components in a cell.

4. Create a cell component

• A cell includes those instances:
  - Content
  - 4 borders: horizontal top, vertical right, horizontal bottom, and vertical left
  - Background

Combine those elements and turn all of them into one symbol.

✋ Wait! It's not done yet! We still need a few more sets for the nested symbols:

• Arrange the border to optimize the scalability:
  - Horizontal border takes up the whole height
  - Vertical border takes up the whole width

Border arrangement for scalability optimization

• Settings for each border

Top Border:
- Pin to left, right and top
- Fix-sized vertically

Right Border:
- Pin to right and top
- Fix-sized horizontally

Bottom Border:
- Pin to left and bottom
- Fix-sized vertically

Left Border:
- Pin to left, bottom and top
- Fix-sized horizontally

• Settings for the content

Text setting:
- Pin to top, right, bottom, and left

• Settings for the whole component:

Whole component setting:
- Adjust content on resize
- Layout vertically from top to bottom

Tada! This is all about the guideline for building a scalability Table symbol. You’re all set 🏄‍♀️

Hope it helps!