What is the most flexible design system for react-native?

Photo by Caspar Camille Rubin on Unsplash

Since software development is a complicated multistage process that requires a lot of time and efforts, companies often face challenges like:

• A lot of time is spent on design and development.
• It’s very difficult to simultaneously support many existing products.
• There are no general principles in the UI development that would provide clear guidelines and help create great user interfaces.

Here comes a concept of the design system — a collection of rules, constraints, and principles, implemented in design and code. With it, you can build truly amazing products much faster and reduce costs as a result.

However, to build own design system several issues should be considered:

• Each time the market changes, a company needs to develop and design new components to fit market needs.
• A company needs to have a function of using different design systems in one application to simplify its internal processes.

Thinking through these issues and trying to find the optimal solution, we understood that a design system with customizable parameters would be the best option. In theory, by changing these parameters, you can replicate any design system including the creation of various complex components. So basically the solution was to create a Design System for Design Systems. That’s how we create Eva Design System at Akveo.

Eva Design System

To make everything work, we initially defined 2 fundamental parts: mapping and theme. They are the basis for understanding the whole concept. So let’s take a closer look at what it is.

Theme

In essence, a theme is a set of variables responsible for the principal colors of system design.

As well as semantic variables, which are essentially references to the main ones.

There are also some rules for constructing a theme object:

• It should have 7 basic color palettes: basic, primary, success, info, warning, danger and control with 9–11 colors in each, built according to some dependence.
• Each of the middle colors (for each color palette — the fifth, for sweeps with 11 — the first and sixth) are built on 6 transparent colors with transparency percentages: 8, 16, 24, 32, 40, 48.

It is also necessary to add color references to describe the colors of the states and their combinations. And do not forget to do it for transparent colors.

That’s it! Your theme object is ready!

Mapping

Mapping is the data structure that we use for describing the component: options for its appearance, behavior depending on these options, connection with the theme. In fact, with the help of mapping structure and themes, we can describe almost any design system with great accuracy.

To understand how it works, we need to explain the following concepts:

• Meta
• State
• Appearance
• Variant Group
• Variant
• Token

Token

A token is a key-value pair, where the key is most often the name of a certain style that the component knows about, and the value is most often either a key from a theme object or a numerical or string value, for instance:

Strict

We decided to make some variables in the Strict mapping object for storing support information, like text parameters for each category of text semantic sizes and borders parameters:

Appearance

Appearance is a description of how the component currently looks. Fundamental structure. It includes default styles (tokens), all states, variant groups, variants. Appearance names are usually chosen according to semantic meaning (for example: filled, outline, etc). Only one appearance can be applied to a component at a time.

State

A state describes how component styles change during user interaction. It can be either interaction states (active, hover, focus, indeterminate) or describing the internal state of the component (visible, checked, disabled, etc.). The states have a predefined priority, depending on which the order of styles’ (tokens) employment and overriding will be determined.

Variant Group

Variant group — a group of variants, united by meaning. For example, variants like small, medium or large can be combined in the group of variants size.

Variant

A variant is a description of the component styles that are responsible for the component appearance that has this option (for example, size = big, status = warning).

Each option can also describe states, whose styles (tokens) will replace the default ones when applying this variant. One variant from each of the described semantic variant groups can be used to a component at one time.

Meta

This is meta-information, which indicates:

• Parameters are the names and their types of all tokens that will be used in the component.
• List of all states with integer priorities.
• List of all appearances with default one.
• List of all Variant Groups and Variants in them with an optional default indication.

How does it work?

Each component always knows how it should look like at the moment: what is its appearance, states combination, variants combination. The Eva processor transforms the mapping structure into a structure of the following form:

As we can see, this is a Map in which the keys are a list of what the component can be, according to the description from the mappings, and the value is a set of tokens that correspond to the semantic key value.

By the way, the project is free and everything is available for personal use. Try Eva now.

The construction of this map is achieved by the process of overriding styles along the following chain:

Default tokens appearance -> variant tokens -> state tokens

Thus, the component “expects” certain tokens and takes on the “shopfront” depending on their description.

Breathe Material

Talk is cheap, so I propose to make an example of the partial Material Design implementation using the Eva token processing system. Let’s look at a small application created with UI Kitten library, which is a part of the Eva Design System.

Just go through the steps below or take a look at the repo on Github.

• git clone https://github.com/artyorsh/ui-kitten-material to clone the repo
• yarn to install dependencies
• cd ios && pod install && cd .. to install iOS dependencies
• yarn start to start Metro Bundler
• npx react-native run-ios to run on iPhone simulator

What was done with the theme

As mentioned above, to create a theme object for different design systems — you need to describe at least the basic semantic palettes with its transparent colors.

In the end, we took the main colors and generated the necessary color palettes for them using Eva Colors tool. We also had to tweak some colors for better fitting to the Material brand. However, these are not very significant changes, just a designer’s look at the final result. Moreover, it showed us how our Design System for Design Systems can be flexible.

Changes in mapping

It’s worth mentioning right away that it’s quite difficult to implement the same 100% components of fundamentally different design systems, but we were able to get as close to this as possible without spending a lot of time.

Thus, to get as close as possible to the appearance of the material design system, we had to do:

• Adjust the size, line-height, and font-weight for semantic types of the text (headings, subtitles, paragraphs, labels)
• Change colors of text in the Toggle, Radio Button, and Checkbox components
• Tweak backgrounds of Top Navigation and Tab Bar components

And a bit more

For maximum identity, all we had to change fonts and switch Eva icons to Material and change app font to Roboto.

And that’s it! We got all the input data for app development with a Material design system. Below you can see some examples of the app screens with the help of Eva and Material (made using Eva) system design:

By the way, recently we’ve updated UI Kitten to version 4.4! 🎉 The full changelog is here. Also, we have updated our Kitten Tricks application. It supports now Material theme as well. The update is already available on the App Store and Google Play.