Creating tables in the design of Figma and implementation in a Storybook (React)

In the previous article on the design of tables in Figum, we found out that the basic element of creating any data grid is a cell component, inside which everything necessary is hidden in order to remain in one copy and build cell-by-cell tables. Now let's talk about its structure: which elements are nested, use cases, we will look at the tables specification through color tokens. And finally, I’ll talk about the transfer of specifications to developers and the integration of tables into React / Angular frameworks straight from Figma design system . While hands, for the future is still somewhere near.

Go! I will begin by demonstrating the useless, but cool effects of customizing the entire table through the master cell master:


')
Select the desired layers in the master component of the cell and propagate all changes to the table

The composition of the cell component

Building tables with the help of components is an algorithm that every project hardly requires unless it is a serious design system that is used by designers and developers within the organization. But since Figma gives components, then they need to be used to the maximum. The composition of the cell is formed from nested layers, some of which are hidden. To create a universal cell for all occasions, you need to know about data grids everything and much more. The composition is determined on the basis of how diverse we want to receive cell instances.



Layer structure is on the left in a pivot.

Component cell structure:

• Icon-L / R - two hidden icons, placed on the edges of the cell to the left and right, respectively. By default, they can be made visible to show the sort status. Icon-R can be activated and replaced with an icon, for example, to enhance the action, or to display additional functionality
• Borders - four independent lines pressed inside to all sides of the cell
• Caption - directly text element with contents
• BG - background component to receive new states in the future.

Let's take a closer look at each of the points.

Icons (Icon-L / R)

To get the cell in the sort state, it is recommended to activate the Icon-L layer. Thus, it is not necessary to disconnect an instance; it is enough to switch the contents of the icon itself to show the sorting order in descending or ascending order. It is believed that any icon library is already integrated in your design system and then the direction of the arrow quickly switches through the Instance menu. You can move the text out of the icon by a simple technique by pressing the space bar several times and this is not a crime:



Whether to create a new component due to the inability to move the label, with the icon turned off, or to indent a space - decide for yourself

Activating Icon-R is useful in the case when the cell needs to show the possibility of additional action. For example, dots for the menu, or the pencil icon, if the cell can be edited:



You remember that instances in Figm can be replaced by holding Ctrl / Cmd at the time of drop

Separators (Borders)

The insertion of independent separators on the four sides of the cell, alas, forced life hacking from hopelessness. We all understand that the design component should strive to the component in the code according to its capabilities, which means that the independence of the border should be set at the level of properties, not crutches. Unfortunately in Figme, this is still unfulfilled, and Axure, for example, has long been able to. Borders are especially needed to manage the sharing of content in general throughout the entire table. Color, thickness, but at least dotted.

Create tables as you like:



Borders are organized in order from left to right clockwise. By changing the color for them in the wizard, we can quickly change the delimiters in all the tables.

Cell Text (Caption)

With this element, everything is simple: the text element is stretched across almost the entire area of ​​the cell, but with small internal indents so that the alignment of numbers along the right edge looks proportional. By stabbing the Left & Right / Top & Bottom constraints, we get unlimited scaling in height and width with the ability to send text as you like without loss of visual quality.



Indentation from the text field to the borders of the cell - 8dp. For high density tables you can use 4dp.

Background (BG)

For each cell, I prefer to additionally have a background layer, with which you can round corners. Unfortunately, in the copy, it is still impossible to indicate a rounding of the corners independently in the Fig. As above with boarders. You can change the state of a cell or a whole series, for example, by painting in blue. It turns out the Selected style:



If the current task requires frequent switching of the states of the rows, then it is recommended to move the cell with a new style to a separate component.

Tables in the design system. Tokens

Styling and implementation

This article would not be complete without examples of real tables that were compiled according to the above specifications (it is now fashionable to say design token). Now we are preparing an all-in-one framework in Figma / React / Angular for a quick start of web applications of any complexity. In this system, many components will be assembled to solve any problems of prototyping and development; and the tables are one of the necessary sections, to which we have treated with increased attention. So, data grid tables are available in four variations:



All these tables are completely in the code, taking into account the state, sorting, the presence of badges and their falling into the general style. Pagination will be improved over time.

4 styles available:

• Flat is a simple data-first material table, but with a little customization.
• Raised - the table turns into a card
• Smooth - gets a soft color saturation
• Filled - fully colored (specific case, for example, for an accent)

As you can see from the GIFs above, attention is paid to the states: onHover, onClick, and also sorting. Such detailing was made possible through the use of figma design tokens, which were transferred to the developers in an understandable form. It only remained to intercept the necessary shades from the color system to the Setproduct Design System and fasten it into the ready React framework to get such data-grid that would suit us completely. Thus, many options will be available to future users of our system, which are based on the same component of the table, but are stylized in a variety of ways through SCSS.

Specifications and colors

Gray, 4 primary colors and 4 alternative colors. There are gradients.

Frankly, the description of our approach to the color system requires a separate article. But not before it becomes possible to capture and store tokens for a dark theme in a single product. In this fig file as a demonstration it can be seen that the whole color palette besides the announcement in global styles has also been converted into components. Thus, developers get a binding of the color system to the tables for a minimum of clicks in the FIG:



Specimens with specifications specially shaped-shaped so that the eye can distinguish them more quickly from the components for which the description follows.



By simply switching the option below in the Storybook, we quickly change the color of the table.

Storybook allows you to quickly organize a preview of all table styles in any color. Very suitable service, in addition to the functional helps to catch bugs in styles. We project the similar concept of “four styles” in general onto all components in our system. Somehow I will tell about it ...

That's all I wanted to say about the design of tables through the component. Thanks for reading. In the near future I am planning a series of posts on the mentioned product - Setproduct Design System . Subscribe to my channel if you are interested in the topic of universal tools for design and web development. There will be all the announcements!

This article uses materials and ideas from my design systems for Figma . If you are looking for a quick start for your projects - this is what you need.