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.
First, let's find out what elements the design system consists of.
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.
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.
This is everything that is responsible for the stylistic design of the user interface: colors, typography, fonts, etc.
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.
Now is the time to learn how to create a design system. Here's my own step-by-step guide for your attention.
Before you start creating a design system, you need to decide on multitasking elements that can be reused.
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.
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.
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.
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.
Icons are a graphical language of communication between software developers and users, which makes interfaces understandable regardless of what language a particular user speaks.
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).
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.
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.
Here are some world-famous examples of design systems:
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.
For the nerds, I also offer additional materials: