The Art of Creating Design Systems

From fragmented screen designs to an efficient and interconnected system

Background

Back when I was working at Setoo (a disruptive parametric insurance startup) we've outsourced a design project which mocked an imagined OTA (Online Travel Agency). This was done in order to later be used as a means of demonstrating Setoos capabilities to prospective clients (other OTA's naturally).

The designs were received as a file of some of the finest work we've yet to see, yet it wasn't built using a design system.

The Need

We needed to elaborate, and show various flows and Setoo products on those designs we first needed to create a design system to cater to future design efficiency and consistency.

So basically, we had to take it all apart and build it up again - as a system

The Means

I would like to introduce and explain how Figma facilitates design systems with these two main features:

Styles - These are saved and re-implementable parameters that are saved in the library level and can be reused across various design files, keeping the designs consistent and updated across the board with a single style update.
Components - Components are a popular concept in engineering used in everything from iOS, Android, macOS, Windows, Unity, HTML, and other technologies used for actually building user interfaces and games. React for instance is a way of building large UI systems without the headache of needing to understand everything at once, through the composition of smaller parts into more complex behavior.

The Design System building blocks

When approaching the task of building a design system one needs to attend to the following building blocks:

Grids
Colors
Typography
Shadows
Icons
Components

Grid

Aligned with google's Material Design guidelines. The grid is an important starting point for any design system or even any screen design. We internally agreed together with Front-End team that using google's material design would make sense and will be easily implementable.

Colors & Shadows

Combined for the sake of convenience.

We've had to dilute and extract the minimal re-usable palate of colors - achieving an amount of 20 Color styles and 4 Shadow styles.

Typography

We've managed to reduce the number of font styles used now offering a consistent and clear body of typographic work.

Icons

The various types of icons were segmentalized and rebuilt as components to be reused and connected to one original icon in the Design System file (allowing any icon to be updated across the whole design ecosystem with a single design icon update).

Now we rebuild the designs using the most basic design Atoms and Molecules

Atom Components

We started out by building the Atom elements and all of their states (e.g. - Hover, Disabled..). Here it's important to have the default state as the basic component from which we build the rest of the states. This architecture allows for smart component updates to be made with increasable ease - when implemented correctly. For example, one can change the corner radius of all of the buttons in the ecosystem by simply changing it in the button default component from which all of the rest were constructed.

Molecule Components

Utilizing the syles and atom components now we start building back up the various page components. Making sure to create any missing Atom components along the way.

Combining everything together to the new connected full-page design

What have we learned from this project?

Building design systems is a technical art that, when done right, can future-proof the designs in the realm of consistency, and save considerable amounts of time for the whole product cycle processes - starting with the design team but also very much by increasing the ease of implementation, maintenance, and communication with the dev. teams.

Source: LinkedIn