During my career within Teamwork, I've been an assiduous contributor and supporter of Lightspeed (the company's official design system). In this some of these contributions.
To facilitate the design of tables, I developed a method to assemble them together using two components called “Table cell” and “Table Header cell”. This method consisted on stacking cells vertically to be used as columns and then horizontally to assemble the final table.
Here's a blueprint.
Any table could be created from two components, using vertical and horizontal auto-layout elements
The main cell had slots, so designers could inject their own content or components into the cell component without having to detach it. This ensured that all tables had the same style across different teams and features.
Example of different components being injected into "Table cell".
Replacing cell slot with different content.
When assembled, changes could be done effortlessly, taking advantage of Figma’s auto-layout.
Using auto-layout, columns and rows could be re-arranged easily.
Dynamic menu is the column picker used across tables in Teamwork. The component have features like rearrangement via drag and drop and turn on/off items via a switch. Some sections were optional, so they could be turned on or off, depending on the scenario. In Figma, those were added as component properties.
A set of design specifications and rules had to be documented, here I'm sharing just a few examples.
Anatomy of the component as seen in the design system docs. In light blue we can see references to sub-components.
Defining what areas should scroll or stick.
Blueprint with design specifications such as spacing, height and margins.
Chart cell was used as a visual representation of numeric cells within tables, using an internal fill up bar and custom colours it gave easy way to read data heavy tables.
Anatomy of the component as seen in the design system docs. On the right, all the component properties.
Component design specs with design tokens and spacings.
Example of Chat Cell component being injected into a table cell.
Would you like to see more?
If you have any questions or would like to get more in-depth on any of the above, I will be happy to share more details with you. 😊
