Figma tables: Data grid design by a single cell-component

Why put everything in one box? Does a medium-sized project really need this flexibility? Do I need a component architecture for a regular table? Within a large team project, it's the only true way to create new data grids — through a component. This helps to generate more options and validate new ideas faster.

My observations show that not all Figma designers train themselves to work with components from the earliest stages of a new project. According to a recent survey in Figma chat, just under half of designers use components.

Most part just uses frames and copy-paste. But those who managed to switch their workflow to component one will most likely never take a step back, because this approach gives more flexibility and is in demand among organisations with their own design staff. If you want to maintain interest in your vacancy, if you're thinking of joining a cool organisation where they are already working in the Figma — work with components.

When I created my design-systems in Figma which were not the first, I reviewed hundreds of tables and I managed to categorise the most commonly used styles:

All 5 styles I've shown above are collected from one cell-component, the difference is only in content and all they will refer on one and the only chief component. I consider this method to be the most flexible and I will tell you about it in detail soon, but first I will list two other approaches:

Cons: low degree of flexibility, the cells are always proportionally scaled. You will have to keep many components in the system with a different set of cells, and then create new states for each set, which can complicate the organisation.

Pros: Row height is convenient to adjust. Ideal for dashboard projects where the horizontal states in the project often change: onhover, selected, focused and so on, and the development specifics require frequent switching between them:

Cons: inside a component, you cannot adjust the height of each cell (horizontal step), because otherwise you can't hide the excess outside the instance.

Pros: inside a component, you cannot adjust the height of each cell (horizontal step), because otherwise you can't hide the excess outside the instance.

Tip: you can keep three of these components in different increments: S-32px / M-48px / XL-64px, for example, and solve the cell density problem to some extent. This is especially useful when creating both mobile and desktop templates within the same project/team library.

The use of a cell-component gives maximum flexibility in styling the table. Of course, such a project rarely requires the use of both Material-style and classic one. But if you're a freelancer who regularly creates new dashboards for your customers from your own or commercial component base, then you'd better start with the cell from which you'll create tables brick-by-brick. Then it will be enough to enclose 4 lines, press them on the sides of the cell, place constraints and generate new styles.

Cons: there are almost none, except that this approach requires more time and system design skills.

Pros: maximum flexibility, ability to control the grid with a single component, adjust separators, background, nested icons and more.

I'll consider the detailed composition of such a super-cell in the next issue. Follow me on Twitter, there will be all announcements!

Sample Figma file with the cell-components for your experiments.