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.
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.
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.
Visual language
This is everything that is responsible for the stylistic design of the user interface: colors, typography, fonts, etc.
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.
#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.
#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.
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:
