close
Naum
Naum
Junior

Ноw to Create Design Systems? Snake YUI Continues His Speech

This article is a continuation of my guide "What's the Point of Design Systems?" Your humble servant, the Old Snake YUI, will tell you how to create a design system and what tools to use.

 

Crypter Component by Tran Mau Tri Tam

Design System Elementsss 

First, let's find out what elements the design system consists of.

Components

These are abstract UI elements that are not detailed and therefore can be adapted for different products. These are buttons, forms, input fields, message boxes, etc.

 

Semrush library. Core Components Library

Patterns

These are the rules and specifications that unify UX and developer experience (DX). This makes it easier to create new user interface elements. As for particular examples, they are collecting, filtering, and sorting data.

 

UX Patterns in Semrush Design System

Visual language

This is everything that is responsible for the stylistic design of the user interface: colors, typography, fonts, etc.

 

Design System based on E-commerce Mobile App by Arman Chowdhury Nijum

Artifacts

The interactions between the above three elements are defined by artifacts - the workflows that take place within the UI. They help front-end developers to implement the code part of the interface.

How to Create Design System: Tips and Tricksss

Now is the time to learn how to create a design system. Here's my own step-by-step guide for your attention.

#1 – Create the set of "building blocks"

Before you start creating a design system, you need to decide on multitasking elements that can be reused.

#2 – Coordinate your component set and visual language with the development team

In order to understand how correctly you have chosen a specific set of elements of the design system, you must agree on it with the development team so as not to complicate their task and not make the project unreasonably expensive.

 

Config Europe – Communicating design systems

#3– Recruit a team with the skills you need

Your team should interact with developers and other specialists who work on projects at all stages of their development. This means that each of your team members must be competent enough to understand the recommendations of the developers. Therefore, before hiring people for your team, clearly define the list of hard skills for each of them.

#4 – Define a list of technologies

Decide on the basic technologies that will take part in building the design system. You can also specify one of the finished products, which in the future will act as a prototype for the following software solutions.

#5 – Choose a color scheme and typography

It's time to choose a color palette (acceptable shades and rules for their use in certain parts of the UI) and typography - fonts and the principles of their coordination with interface elements (do not forget about their adaptability for different screen parameters). This is easy to do when you have a ready-made set of design system components.

#6 – Design your own icon set

Icons are a graphical language of communication between software developers and users, which makes interfaces understandable regardless of what language a particular user speaks.

 

Semrush. Core icons library

#7 – Formulate the basic principles of working with space

This stage of drawing up a design system includes the development of principles for the layout of the space and the placement of individual UI elements (of course, taking into account adaptability for different screen sizes).

#8 – Build your first template

Finally, build some templates that reflect all the specifications formulated in the previous steps. Focus on the consistency of the system - this will simplify your task. Also remember that templates need to be constantly refined, with the advent of new products and functionality in existing solutions.

 

FlowMapp Templates

Toolssss to Use

Three of the most popular tools for building components and the visual language of design systems are:

 

As for patterns and artifacts, Flowmapp can help you create them - a tool for reproducing the typical behavior of various user groups.

3 World-Famousss Case Studies

Here are some world-famous examples of design systems:

 

Conclusssion

As you can see, the development of a design system is a comprehensive and endless process. In turn, a well-designed design system should optimize the creation of new branded software products and reduce their budget. If you want to create your own design system, just use the above guidelines and tools. Yours sincerely, YUI.

P.Sss.

For the nerds, I also offer additional materials:

 

People also Like