Design system: what it is, why, and how to create it

The topic of design systems, it would seem, has already been considered from all sides: you can find many articles, posts, reports, and other materials about creating a design system. Despite this, everyone who comes across this term has many questions. We will try to answer in detail the main ones:

• What is a design system?
• What is it for?

What is a design system?

A design system is a structure that includes visual components, a code library, and usage guidelines.

Often, beginning designers make the mistake of simplifying the concept by thinking of a design system as only a UI kit – a document that contains graphical interface elements, typography, and colors.

The design system consists of three levels:

A UI kit is the visual language of a product for which a design system is created. These are colors, fonts, icons, buttons, bullets, toggle switches, sliders, images, animation. The elements vary and depend on the specifics of the digital product. All of them help create the visible part of the interface with which the user interacts.

The framework is a code library that is written for each of these elements, as well as plugins for animation, tags, and labels for navigation.

Guidelines are a set of templates and rules for using elements that organize the work process. Thanks to guidelines, a designer is not involved in simple tasks, but a developer is immediately involved.

For example, the guidelines specify the parameters of a pop-up window on a website: indents from the text, the location and size of the title and body text, a place for a button, and what the window will look like with less or more text.

Types of design systems

There is no single classification, but experts distinguish two types of design systems – open and closed source.

In open-source systems, any company can use materials and adapt them for their projects – change button colors, fonts, and icons. For example, in Ant Design, Human Interface Guidelines, and Material Design systems.

Closed-source design systems are typically created for a specific company or product. These are either completely closed materials, accessible only to employees, or partially open.

How to create a design system

The development of design systems is based on the principles of atomic design. Atomic design is a technique that includes five levels of design elements: atoms, molecules, organisms, patterns, and pages.

Design system structure:

• Atoms are the smallest components: buttons, icons, input fields, and fonts.
• Molecules are a combination of several simple elements: two buttons, a title and an input line, a notification bar, a checkbox, and text.
• Organisms are complete components: site header, authorization form, product cards, and notification banner.
• Templates – page layouts without content: menu, site appearance.
• Pages are pages filled with content.

The general algorithm looks like this:

• Select colors, and fonts, set modular grids, and select animation, images, and sounds.
• Create basic interface elements.
• Design element combinations and layouts.
• Create a list of elements along with the rules. In the guideline, specify what the element is, where it is used, and what tasks it solves.

Typically, design systems are not created from scratch, but are built based on already developed material: UI kits, guidelines, or brand books.

Why do you need a design system?

As with every IT product, it is critical to answer the question, “What is a design system for?” Or, as some colleagues at the shop remark, “so what”?

The answer to this question will help you understand the value of the product. Part of it can already be seen from what we described above. But let’s break it down and take a deeper look.

Automation

Automation provides the most obvious benefit. A design system will help you to automate operations, freeing you time for other duties.

Iterativeness

Being able to inherit and automatically apply modifications to design system elements is a valuable tool for a product team. You may quickly make cosmetic or even big changes in one location. In this manner, you can always enhance the product.

Consistency

Consistency states that the objects and entities in a product that perform the same function should aim for unity and similarity.

When we utilize comparable features in a product, they become familiar and convenient: we instinctively understand how the button works and appears, as well as where it is positioned.

We hope that everyone learned something valuable from the article. And we were once again convinced that working on an article structures knowledge and motivates additional study.