Tables for a design system. Cell-component from Figma to React Storybook

How to create multiple data grid styles by a single cell-component and declare specs for a design system.

Tutorials

Published on

May 23, 2019

|

5 mins read

Blog

React Tables UI for a design system in Figma

Navigation

Subscribe to newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

Roman Kamushken

Themification of tables

In the previous article on the tables design in Figma, we found that the basic element of creating any data grid is a cell component, within which everything necessary to remain in one instance and build tables cell-by-cell is hidden. Now let's speculate on its structure: what elements are embedded, use cases, consider the tables themification through color tokens. And finally, we'll tell you about the transfer of specifications to developers and the tables integration into React/Angular frameworks straight from the Figma design system. Still by hand, because the future is still somewhere there.

Let's get it started! I will start with the demonstration of useless, but cool effects of customising the entire table through the main master-cell:

Selecting the desired layers in the cell master component and propagating all the changes into the table

{{spacer-64}}

Cell-component composition

Building tables with the help of components is an algorithm that is hardly required by every project, especially for a serious design system that is used by designers and developers within the organisation. But since Figma gives the components, then they need to be used to the maximum.

The composition of the cell is formed from the embedded layers, some of which are hidden. To create a universal cell for all occasions, you need to know about data grids much more than everything. The composition is determined based on how diverse instances of cells we want to get.

The structure of the layers is on the left in the sidebar

{{spacer-64}}

Cell anatomy

Icon-L/R - two hidden icons placed on the sides of the cell on the left and right respectively. By default, you can make them visible to show the sort status. Icon-R can be activated and replaced with an icon, for example to enhance an action, or to display an additional function

Borders - four independent lines pressed inside to all sides of the cell

Caption - text element directly with it's contents

BG - background component to get new states in the future

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

{{spacer-24}}

Icon-L/R

To get the cell in the sorting state, it is recommended to activate the Icon-L layer. Thus, you don't need to detach the instance, it is enough to switch the content 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 is quickly switched through the Instance menu. The text can be shifted from under the icon with a simple technique by hitting several times on the space bar and it's not a crime:

Whether to create a new component due to the inability to move the label,
when the icon is disabled, or to indent with a space – you can decide for yourself

Icon-R activation is useful when you want to show the possibility of additional action in the cell. For example, an ellipsis for a menu, or a pencil icon if the cell may be edited:

Do you remember that instances in Figma can be replaced by pressing Ctrl/Cmd at the time of a drop?

{{spacer-24}}

{{setproduct-gpt}}

{{spacer-24}}

Borders

The insertion of independent separators on the four sides of the cell is, alas, a forced life hack due to despair We all understand that the design component in its capabilities should strive for the component in the code, which means that the independence of the borders should be set at the level of properties, but not with crutches. Unfortunately, it is still not implemented in Figma yet (2019), and Axure, for example, has long been able to do it. Borders are especially necessary to control the division of content throughout the table. Color, thickness, even with dotted lines. Create tables as you want:

The borders are arranged in left-to-right clockwise order.
By changing the color for them in the master, we can quickly change the separators in all tables

{{spacer-24}}

Caption

With this element, everything is simple: the text element is stretched over almost the entire area of the cell, but with small internal indents, so that the alignment of the numbers on the right side looked proportionally. By putting left & Right / Top & Bottom constraints, we get unlimited scaling in height and width with the ability to direct the text as you like without losing visual quality.

The internal indents from the text field to the cell borders is 8dp. For tables of higher density, 4dp can be used

{{spacer-24}}

Background

For each cell, I prefer to have an additional background layer that can be used to round corners. Unfortunately, in the instance, you still can't specify rounding the corners independently in Figma. As above in the case of borders. You can change the state of a cell or a row, for example, by making it blue. It turns out to be the Selected style:

If the current task requires frequent switching of row states it is recommended to place a cell with a new style into a separate component

{{spacer-64}}

Design system tokens

Styling and implementation

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

All these tables are fully in the code, taking into account the states, sorting, the presence of badges and
their matching the overall style. Pagination will be improved over time

{{spacer-24}}

Themes for tables

Flat - simple data-first material table, but with a little customization
Raised - table turns into a card
Smooth - acquires soft color saturation
Filled - painted completely (specific case, for example for an accent)

As you can see from the GIF above, certain attention is paid to the states: onHover, onClick, and sorting. This type of detailing became possible through the use of design-tokens from Figma that were transferred to developers in a clear manner. They had only to intercept the necessary shades from the color system in the Setproduct Design System and fasten it into the ready-made React framework to get such data-grid, which would suit us completely. Thus, future users of our system will have many options, based on the same component of the table, but stylized variously through SCSS.

{{spacer-24}}

Color specs

To be honest, the description of our approach to the color system requires a separate article. But not before there is an opportunity to capture and store tokens for a grey theme in one design system. In this Figma file, as a demonstration, you can see that the entire color palette, in addition to the declaration in global styles, is also converted to components. Thus, the developers get the binding of the color system to the tables for a minimum of clicks in the Figma:

Grey, 4 primary colors and 4 alternative colors. Gradients are here as well

Who really needs these red tables? Who knows.. But our product is aimed at covering all kinds of cases. If we don't use these styles, that just most likely means we use trivial tasks. We show the tables in 5 colors in Storybook by default.

PREVIEW REACT TABLES

Our React documentation . It allows you to quickly organise a preview of all table styles in any color. It is a very good service, apart from functionality, it helps to catch bugs in styles. We project a similar concept of "four styles" onto all components in our system. I'll tell you about it one day…

That's all I wanted to say about the design of tables through the component. Thanks for reading this. In the near future there is a series of posts on the mentioned product is planned - Setproduct Design System. So, stay tuned!

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
No items found.

Our Dashboard Templates Will Make It A Treat To View Data

Experience the magic of data visualization with our user-friendly dashboard templates. Try out our dashboards now and enjoy efficient reporting processes, greater transparency in, among others monitoring and making educated decisions easily.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tutorials

5 mins read

Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases

Get practical solutions for Checkbox design dilemmas, from styling complexity to inclusive user experience, in this dedicated tutorial.

Tutorials

6 mins read

Input UI Design – Optimize data forms UX with expertly crafted text fields

Learn how to design and optimize Input components for improved forms filling experience and UI. Our in-depth guide will help you create seamless and user-friendly designs.

Tutorials

9 mins read

Creating app settings UI design: Usability tips and best practices

Learn about key design patterns and elements for settings apps to enhance user experience and accessibility in your own app's settings section.

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts crafted for Figma.

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.

Start now

SetGPT is a free service; however, authentication is required

This is some text inside of a div block.
This is some text inside of a div block.