Introduction to Design Systems for UX/UI Designers

For junior designers - those who have just started studying UX / UI design systems and those who have been working in this field for up to 1-2 years. The main goal of this article is to introduce you to the basic components of system design, to give you a basic introduction to this concept and to revise the material by demonstrating several examples of design systems that are already used by large companies.

The inspiration for this article is the fact that for the last 2-3 years companies have been actively creating system design for their products. Designers have already noticed that many processes on projects can be systematized, made easier, and automated.

What are Design Systems?

In order to give a clear definition for this term, you need to consider concepts such as a UI kit, a guideline, and a brand book. These terms are often confused with the design system. Let's take a closer look at these concepts: 

UI kit 

This is a set of ready-made interface solutions which may include: buttons, input fields, forms, bread crumbs, as well as all design elements that are possible for user interaction. 

A completely ready-made UI kit consists of all elements and is located in one or several files for working in Photoshop, Adobe XD or Figma / Sketch.

You can find more UI Kit examples here:

• Figma Community (https://www.figma.com/design/ )
• Sketch App Sources (https://www.sketchappsources.com/tag/kit.html)
• Adobe UX official site (https://www.adobe.com/ua/products/xd/resources.html)

Guideline:

These are rules and recommendations for the further development of the user interface. Also, a guideline can be defined as a detailed description of all design elements, their combination and rules for use on a project, it also describes the approved hierarchies, accents, contrasts and fonts. 

An already completely finished guideline can be in a PDF format, on the website page or in a file for Photoshop, Adobe XD or Figma / Sketch.

Brand book: 

This is a document that sets out the visual style standards for a particular company. The brand book contains the main values and features in brand promotion and development; affects marketing campaign, communication and services. It can also be described as a set of strategic guidelines as it covers all aspects of a company's brand. 

The brand book is provided in the form of one or several PDF files or any other format, as well as complemented by the source files of the design elements described in the document (for Photoshop, Adobe XD or Figma / Sketch). 

You can find more brand books examples here:

• Skype (https://download.skype.com/share/blogskin/press/skype_brandbook.pdf) 
• Green People (https://issuu.com/vanzaklbas/docs/brandbook_-_gp_2020_versao_final__19) 
• ASOS (https://issuu.com/libbychamberlin15/docs/brand_book ) 

So, what is a design system? 

It is a set of brand values, tools, and components that increase the quality and speed of product development, as well as effectively supporting existing ones. The design system is often created by large companies such as Google, Apple, and Airbnb. It has several main goals:

1. Centralization of knowledge. This is the place where all the information about a product is collected, information that can be useful to designers, programmers, marketers, managers and product owners; also, the design system effectively helps with the recruiting process. 
   
2. Provides an opportunity to save the money spent on designers in the future, since you won’t need to spend a certain amount of time trying to find the desired style guide or dashboard documentation. 
   
3. System design can help avoid overlooking important details that would be difficult to recognize without collecting everything in the system. Let's talk about ready-made components. Here, I want to focus on atomic design. The main goal of this methodology is to describe each component in the design system. 

System design components:

1. UI kits
2. Guidelines
3. Brand books
4. Ready components
5. Documentation

Let's review the components.

Here I want to focus on atomic design, which consists of:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

The main role of this methodology is to describe each component in the design system.

The atomic design consists of: 

• Atoms - the smallest building blocks of a project;
• Molecules - more complex elements that consist of several atoms;
• Organisms - functional parts on a page that are created from groups of atoms and molecules;
• Templates - pages with no real content. Templates combine organisms into a complete site layout ;
• Pages - this is where you generate and fill in real content based on the template When creating a design system, one should adhere to atomic design and prepare all components by dividing them into atoms, molecules, organisms, templates, and pages. 

An example from Airbnb:

There is an organism that consists of:

• 3 tabs - places for rest, impressions, and online impressions;
• a box that contains: input fields, and a button

The molecule here will be a box (which contains input fields and buttons) and 3 tabs above the box:

The atom is a separate input field, button, tab: 

When creating a design system, one should adhere to atomic design and prepare all components by dividing them into atoms, molecules, organisms, templates, and pages.

Documentation. 

One of the most important components of system design; with the help of documentation, a designer can create User stories, Describe Corner Cases, and provide data and display it in the interface. At this stage, the designer works closely with the developer and they determine the formats and types of documents that the designer must provide. 

What difficulties a designer can face when creating a design system: 

• If you are a junior designer, then you are unlikely to be given a similar task, since you do not have enough practical experience. Be ready to work with guidelines
• This is already a step towards the development of your system design skills. 
• It can take quite a long time to create a system design. You need to psychologically prepare your management for this process and ask them to be mindful and clear about the guidelines (and not to ask for the project to be ready instantly). 
• A design system equals close communication with developers, and here you need to really make an effort to find common ground to get a quality product. 

Design Systems’ examples:

• Human Interface Guidelines (https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ )
• Material Design ( https://material-ui.com/getting-started/installation/)
• IBM Design Language (https://www.ibm.com/design/language/)
• Dia (https://diia.fedoriv.com/3/)

In Addition

It is important to understand when it is the right time to create a design system. You need to be well prepared for this process and create a strategy for achieving this task. It is necessary to determine in advance what the purpose of creating a system is; a design system is a task that goes on for several months and involves a large number of people in the team. It will facilitate the workflow of all the designers and developers and thus can affect the overall productivity of the team.