Building responsive tables in Figma using the ‘Single Cell’ approach

A ‘blow-up’ diagram view of how single cells in this approach can create a table.

Tables are often harder to prototype than to code, but taking a single cell design strategy can make them responsive and maintainable. What’s more, all you need are Components, duplication and Auto-Layout techniques. I’ve experimented with a few ways and this method seems to have the best trade-offs. I’ll give you the whirlwind tour of the core visual styles of tables, how to build the single cell design, and the reasons why I opted for this as my preferred method of prototyping tables in Figma.

Visual styles of tables

There are a few different visual styles that are floating around on the internet today. Most tables you see are variations of one of these three.

Classic table

A simple table with a 1px, black border and basic padding keeping the content readable.

This is the table you learn about in high school IT— humble and versatile to get your point across. With some minor tweaks to the vanilla HTML of good table design you can get an easily readable table. If you don’t know about how tables are created in code I recommend you read up on the w3schools documentation.

Striped tables

Alternative shading of rows lets the data stand out, yet still has a clear distinction between each line.

Used in places like Apple’s Pages application, these are an eye catching alternative that let the data stand out. Again, w3schools is a fantastic resource to learn more about them.

‘Lined’ tables

The dark themed version of Material Design’s Simple Table.

Looking at the Simple Table from Material Design as an example, you can see that each row is separated by a single line and each column is separated using generous spacing. Also known as a ‘horizontally divided table’.

Single-cell design

Now that we have an idea of the different major styles of table design, we can move forward to setting up…