Hello!
I am glad to return to you, dear readers of the community, and share the experience and knowledge gained through working at the IT company Omega.
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. Despite this, everyone who comes across this term has many questions. I will try to answer in detail the main ones:
What is a design system?
What is it for?
How to create it?
What is a design system?
Let's sort it out in order. The design system is a combination of three entities:
Visual language is what we see.
Framework is a visual language library, its code.
Guidelines - rules of how everything should look and how to apply.
It can be considered that the design system is a separate product within any IT product.
Visual language
The visual component of the design system includes many elements, the main of which are:
Colors
UI-
– . , , . - , , , .
, , -, , , ? ? , .
Framework
– , , . .
. , « ». , « ».
, ? , . , ? , ?
, .
Guidelines
, -, « », .
, , . , - . . .
, . , ? , :
?
?
?
UI- : , .
, - . , - . , , .
-?
IT-, : -? , – « »?
. , . .
– . - .
, Figma . , , .
- . . .
– . .
, , , , .
, : , , .
IT- .
, : , , .
UX
, , . , , .
- user flow (, , ). , user flow .
- . , , .
-
-, , , .
-, - – . . - . : , - .
, - . - , .
, - - , , Figma. , UI-kit. , Figma ,
-?
-. , . , . (Brad Frost) «Atomic Web Design».
, :
After creating a design system, it is important to figure out how to implement it in the company's practice. In the second article, I will talk about how to build step by step the process of implementing a design system in any company.
I hope everyone has learned a lot from the article. And I was once again convinced that the work on the article structures knowledge and motivates for additional study.
Thank you for attention!