Creating a Design System. Part 1 — Artifacts, value, key steps.
Many people still don’t understand what a design system is. For example, they mistakenly believe that UI kit is a design system. In fact, UI kit is an important part of a design system, but this is only the top of an iceberg.
Moreover, there are products whose design system doesn’t include a graphical part (UI kit), for example, a smart speaker.
What does the design system include?
Design
Patterns — a system of user-predictable repetitive interface elements. For example, the product navigation pattern.
Visual style — it contains information about the color palette, illustrations, icons, raunding radius, etc.
UI kit — a set of interface components, such as buttons, inputs, selectors, breadcrumbs, etc.
Templates — UI kit components that together create blocks or even entire pages. For example, imagine some kind of application submission form consisting of several inputs and a “Submit” button. If there are many similar forms in your interface, it would be nice to include them as a template in the design system.
Text guide — it contains information about how you communicate with the user. For example, you use an informal or more formal style.
Code
Сomponents in the code — all interface components must be developmented and carefully transferred to the code. Ideally, the name of the components in the Figma match the name of the components from the developers. Then the probability that some interface components could be developmented in a different way is noticeably reduced.
Widgets — there are components that could be opened and clicked separately, entered something, in general, to see how it really works. A great example from ant.design.
Accessibility guidelines — an important topic about which I will write a separate article. In short, it is necessary to ensure that the tools used by people with disabilities work correctly.
Development area — a separate area for developers where the code of interface elements is stored.
Process
Updates — it is important that the team members are aware of changes and innovations in the design system. You could use email newsletters, messenger chats, calls, etc. Choose any tool that is convenient for your team.
Guides — in addition to the components, an accessible and understandable description is needed in the image and in the code for all team members. Guides could contain descriptions of the principles that the team follows, and much more.
UX review — in order to comply with all the rules described in the design system, it is important to conduct a review among designers. The correct implementation of the review is a separate big topic and the approach depends on the size of the team.
Technical review — It is also important for developers to conduct a review among themselves. I worked in teams where even middle developers checked the code of the most experienced colleague.
What is a good design system?
Spoiler is a design system that works.
If you are missing an artifact in at least one of the areas (design, code, process), then it is highly that your design system isn’t working properly. Here the question arises — is this a design system?
It is very important that in addition to design artifacts, you and developers speak the same language, and you have well-established processes. Only then you get all the benefits of using a design system.
What is the value of a design system?
Design and Development
It’s easier to launch an MVP — a design system has everything to launch MVP. As a result of which you could quickly release something new to real users, collect feedback and adjust your backlog.
The opportunity to deal with the product, not the technique — you don’t spend time discussing some basic rules and principles every time, everything has already been thought out. As a result, you devote more time to the product rather than the routine.
Less bugfix — when all team members are synchronized and rely on a design system, processes are thought out, there are fewer bugs that have to be fixed later.
Users
Consistent design — recognizable interface from product to product and from screen to screen. Imagine you go into a dark room and find a light switch on the left side, go into the second room, and the switch is located behind the door under the ceiling, go into the third, and there the switch is again in a new place. I’m sure you won’t like it. Also, when interacting with the digital interface, it is important that everything works and looks expected and familiar to the user.
Reduced product size — all interface elements are stored in one place and reused. As a result of which product data takes up less space and loads faster. This is important, because the quality of the Internet isn’t perfect everywhere.
Business
Planning accuracy and predictable result — businesses have two favorite questions when developing products: “Well, when?” and “What will it look like?”. The design system provides greater transparency in planning and forecasting your expectations.
Saving money — an hour of each employee costs money. When the team, using a design system, spends less time creating new features or launching a new product, then everything becomes obvious.
Key steps in creating a design system
People
At this stage, it’s necessary to form a general idea with the team: what the design system is for, what artifacts it will contain, who will participate in its creation. Based on this, to form principles, not abstract ones from the series “we are making an innovative design system”, but clear and understandable principles through the prism of which you will skip everything in the future.
Examples of principles
Design=Code — it says that it doesn’t matter if the developer visits Figma or the designer into the code, they should see something in common: architecture, names. I strongly recommend following this principle, because it helps to speak the same language with developers and build positive relationships.
Theming and ecosystem support — working in an ecosystem, for example, Sber, your design system has a challenge to support all types of products. They are for different audiences, and there is already a question about theming, you need to determine the level of this theming yourself.
Everything is a template for everything — any component from one layer is a template for a component from the next layer. There is a cascading assembling, the same atomic design, possibly modified, but in general it is the same.
Process
It is important to care about creation of a design system like the creation of any other individual product. To understand how to integrate new processes, it is important to understand the current ones and answer a number of questions:
- How is the current work processes in the team and the company organized?
- What is the specific limitation?
- What project management tools and documentation do we use?
- Current project management methods?
- What needs to be changed in the current processes?
- What are the strengths and weaknesses of the current processes?
Planning
You could build planning based on the Gantt chart, but even it could be improved…
- Subtract vacations, holidays, and possible sick days, all to understand how many working days you actually have. It’s pretty obvious, but many people forget about it.
- Define no more than 3 main tasks per quarter
- At the end of the quarter, set aside a week for corrections. This has saved many teams more than once.
- Create anything that takes more than 2 hours as tasks. If there is some small thing, we did it and continued, but when there are many such small things, all together they can take days and weeks.
- When planning, try to take into account all dependencies.
Realization
If you go down from large entities to small ones, the component also has a development cycle. Eventually, you will have a release of the component.
When analyzing, be sure to study the entire possible context where this component is used and will be used, make a checklist for the review and do not delay writing guides. Let it be part of the development cycle.
A little more about the design systems
In the end, I would like to share links to publicly available design systems that I like the most. I hope they will be useful to you, and I also would like to add that when creating a design system, it is important to be flexible, act situationally and make adjustments based on the experience. Good luck to you!
