What is a design system in concrete terms?
Brad Frost, with his 2016 book “Atomic Design”, defined a way of thinking that breaks up user interfaces into building blocks: In the same way that multiple atoms create a molecule and multiple molecules create an organism, we can break down a user interface into small pieces, which together make up the user interface:
1. Foundations
Includes typical guidance within availability, colors, typography, spacing and shadows etc.
2. Design Tokens
A “Design token” is a description of a style value and consists of three elements: A name, a value, and a type.
.png)
In the example of a color, the name of a basic level can often contain only the absolute name of the color, and a number that defines the shatter (as shown in the example above), but it becomes abruptly more powerful when the name defines how the color should be used. We can also build systems with design tokens in multiple layers, which allows us to create “headless” design systems: we can follow some basic rules, but have the ability to visualize different brands and themes within these frameworks.
.png)
One of the main points of using design tokens is that we create a common understanding of how things should be: Designers and developers to a greater extent speak the same language, which reduces misunderstandings and helps create a “single source of truth”.
3. Components
Components are an important part of a design system, and this was largely what Brad Frost was referring to with “Atomic design,” where we can break up user interfaces into hierarchy of components. That doesn't mean it's necessarily right for your team to create a complex jumble of nested components, but in many cases it's useful to organize a library of basic lower-level building blocks (such as buttons, text fields, and icons) and more complex, complex higher-level components (such as navigation menus, forms, and cards).
How to know if you need a design system?
If your product lacks consistency and you are undertaking iterative design and development tasks that are time-consuming, this is a clear indicator that a design system may be needed. Another sign could be if your company is expanding with more products or platforms that need to maintain the same visual identity. If one otherwise sees a general need for increased collaboration and shared understanding of design decisions, a design system can be a useful tool to improve this communication.
How to get started with a design system
In general, I'm a fan of documenting the work I do -- but it varies how extensive the documentation needs to be. In some cases, an “overdesigned” system can make one work less efficiently. If you are in the starting pit of developing a digital product, I would say that it may be a good idea to start simple, and rather facilitate a system that can grow in tandem with the product and the company. A good place to start is to talk to your team. Questions that may be useful to ask;
- Do we have documentation that is understood and used by the people who work everyone who works on the product?
- How can we evaluate and adjust the approach to documentation over time to ensure that it is relevant and useful?
- Do we have something that is under-documented?
- Do we have something that is over-documented?
- How can we facilitate open communication and collaboration when developing our documentation?
Are design systems the path to digital success?
Design systems are not necessarily a recipe for success, but they often lead us to work more effectively together, creating a common understanding of how we build digital products across disciplines. Design systems also help us build user-friendly products that are accessible and scalable, and they can provide unified brands across platforms.
There are many open design systems out there that one can take inspiration from, here are some examples:
