What is a Design System.

What is a Design System?

A design system is essentially a collection of elements that can be combined and reused to build products. It can be a library of components with clear standards and a guideline. This definition might give you the impression that it's a single design deliverable, such as a Sketch library with components or a styleguide. In fact a design system is more than that, it’s a process.

The design system will grow and shape itself by time. We build the components as we discover the features of products. Continuously add them to the design system library. Everything in here is reusable. So when similar components are required in the future at different levels. Think of atomic design, atoms, molecules, organisms, templates. These small atoms and molecules we build and defined can be reused to build pages or components quickly and consistently. A design system is always ready to use, yet it's never complete, it's a living document.

You may be thinking, great idea but isn't this just a style guide?

No, a design system is a bunch of different sized components (or molecules) that can be put together in endless ways to create a series of larger components. Atomic Design is the inspiration for component design and it is my preferred way for building a design system.

What problem does a design system solve?

The most crucial thing that this system brings is a different approach. Team members start approaching a design with a system in mind. This is a big change for designers when starting or continuously working on a project. The design system requires maintenance and updates in the life cycle of the product. Here are some examples of problems which will be solved.

Consistency - Thanks to this system designers, developers and the whole team will be able to implement consistent UI very easily. Developers will be able to quickly find and use the right component, pattern or style option such as color, typography, icon etc.

Quality - Consistency of a product will bring higher quality of the overall product. Owners of the design system will be able to easily monitor the design principles and documentation.

Streamlined design process - After you have build the UI based on the Atomic Design principle you document them. Now you can use them when a new feature request comes. You can also modify them or create something new. Yo will have a great overview of impacts of those changes throughout the design system.

Focus - When using the design system you can focus on different things(like usability/ a-b testing etc) because you don’t invent the wheel again. You don’t have to figure out what the appearance of this button or form should be on a page, because it is already defined.

With this Design System you can make new pages more easily. Know how to use a component or pattern. And as the creators within this system we will add notes, do's and dont's to keep consistency and guidance over products. Overall this system will add ease of scalability, accessibility, consistency across the team and the product and increase the workflow between designers and developers.

How do I implement this design system?

First step on building a design system is to evaluate your current UI and noting inconsistencies. Which elements are good, and which elements need to be replaced. Where are the inconsistencies in products, pages or in smaller components like atoms. In this phase you want to review all elements in the existing system.

After making the inventory of all the components and UI elements, you will probably discover that there are a lot identical or almost identical components. Group and categorize your elements, after this you can decide which one will be kept and which deleted.

After this you have a collection of existing elements, structure them and group them with their purpose. Add tweaks and reverse engineer them if needed with the Atomic Design Philosophy in mind.
For example take a good look at the following aspects.

• Color schemes and the way each color is used.
• Typography and the way they are used.
• Icon libraries.
• Graphics such as photo libraries, svg's etc.
• UI patterns, try to split elements to make the base for atomic design.

Now you know every aspect of your current system. A common complain of design systems is that it takes time to setup. Company's mostly don’t have time to set aside on a side project. But the truth is that a design system makes up that time and much more in the long run. If you find it hard to get the naysayers on board then you should highlight to them the efficiency bonus of using a centralized design system. Mention all the aspects and inconsistencies you collected, and explain the amount of time and work this system saves by streamlining the whole process.

If you want to implement this system in a new project, then think critically on these points to know what fits best. You can also use a Design System Kit to speed up the process.

Design System examples.

Here I collected some Design Systems by major brands. Imagine how many hours it has cost to create them. But also think about how much time they will save, it is totally worth it! Thanks to these public design systems you can learn a lot, I recommend to analyze them.