A Grid Component System with DX in Mind

Tags: Design SystemComponentsFigma Date published:

As mentioned in a few other posts, my team and I have been working on data-heavy applications for IDS (Investment Data Services) for a few years. Because many applications have one or more tables on their main screens, we needed a grid component system that was not only performant but also flexible, easy to use and fast to work with.

We decided to build our own component system based on AG Grid, which was the framework chosen for the live applications.

Designer Experience (DX)Section titled Designer Experience (DX)

In the development world, a good ‘developer experience’ as explained here by GitHub aims to increase ‘developer productivity, satisfaction, and operational impact’ and an overall enjoyable experience when using certain products or services.

Similarly, ‘designer experience’ – or DX – in the context of component libraries stands for ergonomic components that follow a designer’s mental model. They should not get in the way when designing or need detaching. For good DX, a balance between helpful presets in the form of component properties and flexibility via slot components and nested components is important.

A few applications we designed feature a large and complex grid as their main view. AG Grid provides many menu, editor and filter components that we redesigned to fit the requirements of expert applications.
A few applications we designed feature a large and complex grid as their main view. AG Grid provides many menu, editor and filter components that we redesigned to fit the requirements of expert applications.

Component DesignSection titled Component Design

On a high level, cells are made out of three parts, the cell component, an absolute positioned background and a content component in an auto layout. This gives designers high flexibility to change paddings, should some custom cell content require the full cell area for example, but provides a standard size for the default content types.

Content can be easily swapped via the instance property and thanks to nested properties, things like the state of checkboxes can be set from the main component. Consistent layer names help Figma apply overrides, even when swapping for example from plain text content to a dropdown. This creates a flexible and extensible setup. Which is needed, since AG Grid is also highly customizable and applications display all kinds of data. Designers can use the included content components, but custom spark-lines and other content is very easy to build.

Instance swap properties are used for all the different cell content components and thanks to nested properties their properties are still easy to swap.
Instance swap properties are used for all the different cell content components and thanks to nested properties their properties are still easy to swap.

SlotsSection titled Slots

All components are built with content slots, a term from UI development describing a placeholder where content can be inserted and exchanged. In Figma, components are very rigid and normally can not be changed much. It is possible to change text, or apply overrides. However, adding another item in a sidebar for example would not be possible. Content slots in the form of sub components bring more flexibility, since they are the only elements that can be completely swapped out inside a component.

In the screenshot below, the main content of the ‘Choose Columns’ popup is one big component instance, as well as the different sections in the sidebar to the right. They are each broken down into small components that also have their own properties.

The content components give our grid system flexibility.
The content components give our grid system flexibility.

Tree NavigatorSection titled Tree Navigator

To make my work with tables and other repeating elements easier, I created the Tree Navigator plugin. In the plugin, you select an element and then search for all elements with the same name simply by choosing one of the levels in the layer hierarchy above. As shown below, this also works with multiple columns, giving you the ability to quickly edit many cells at once.
I developed Tree Navigator partly because working with grids like this is pretty painful.

Personal LearningsSection titled Personal Learnings

Developing this component library has been a great learning experience. Starting with no experience developing production grade component libraries, it has allowed me to become fluent in being able to plan, develop and maintain a library that is now being used by many designers. Resources like Into Design Systems have been very helpful, as well as trial and error and experimentation.