Are you tired of disorganized and inefficient design processes? Look no further than implementing a design system. Don't let chaos reign any longer - take control of your workflow and create top-notch products. It's a game-changer.
Design systems have become a vital part of a lot of product teams’ everyday lives. The concept became super trendy and has been adopted by most successful tech companies.
This article will tell you everything you should know on the topic.
What is a design system?
If you tried to look into what a design system is, you might have struggled to find a universal definition. That’s because the definition of a design system varies from person to person, and there are a lot of different concepts. Let’s dive into the topic and see what definitions of a design system are out there on the internet.
The definition you can find on css-tricks.com says that the design system is “everything that makes up your product. From typography, layouts and grids, colours, icons, components and coding conventions, to voice and tone, style guide and documentation, a design system is bringing all of these together to allow your entire team to learn, build, and grow.”
InVision app defines it as “a collection of repeatable components and a set of standards guiding the use of those components”.
For Nathan Curtis, the “design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”
Definition of a design system - Overview
Now that we have checked out different definitions of a design system, let’s define it by our terms.
The term represents itself very well. It’s a system of design. A design system is a set of information that usually includes design components, a style guide, and other elements. It's a set of things that work together, and their purpose is to be able to unify an experience and simplify development.
It’s the collection of all of these documents that help reinforce a consistent brand: all the way from how the business website looks, to its commercials, to its language and personality.
Design systems aren’t just UI kits. A design system has to have end-to-end communication between developers. You might think… oh so a design system is just about aesthetics? No, it’s about other stuff as well.
As we previously said, the definitions vary depending on whom you ask.
You’ll be familiar with many of its elements if you’re used to this sort of thing. Layout sections, spacing, navigation, colour, typography, etc. but a design system is more than that.
There are differences and commonalities in each design system. Not all design systems are built the same. Some design systems have some sections that other design systems choose not to include. However, common things exist in all design systems, such as style & design guidelines, pattern libraries (component libraries), motion guidelines and content style guides.
A design system is a set of components, in our case, built upon the atomic design methodology. All these atoms and molecules are unified, and they’re only defined once.
It’s a single source of truth for your product (here, a digital product). It’s a mix of a couple of things. Whenever you want to design something within your product, you start with the components from your design system. The design system is the building block that you need to build an excellent user flow, consistent, and user-friendly experience.
A design system is a source of truth for your digital products. It’s not just a component library; it’s so much more. It also includes guidelines and documentation.
It’s important to point out that the design system is a living thing; it’s never finished. The components might need updates or be irrelevant at one point because the industry standards are changing. So it’s something that’s constantly evolving.
You can check many examples of design systems such as Material Design, Polaris, IBM Design Language, Spectrum, just to name a few.
Elements of a design system
A design system is composed of two essential parts: the design repository and the people who manage it.
Let’s see what they are.
Design repository
As previously mentioned, design systems change according to the business it's used in or the team’s need. It takes many forms. But however, most of the time, all contain a style guide, a component library and a pattern library.
A style guide focuses on branding most of the time. It includes elements such as colours, texts, logos, etc. However, style guides also offer content guides, such as what tone of voice to use and recommended appropriate language.
A component library is the main element associated with design systems and is often referred to as the design library. It contains all the predetermined elements (atoms) that are reusable to design the UI.
These elements are individual. The main focus of creating a design system is made on the component library. It takes time and effort. This is also where the common language is created.
All design systems also contain pattern libraries. On the contrary of component libraries, pattern libraries contain “collections of UI-element groups or layouts”. You’ll find the content structures, layouts, and/or templates in the pattern libraries. The use of pattern libraries is similar to component libraries. These can be reused and readapted.
The design system team
A design system is a living thing. It constantly evolves and needs change and maintenance to ensure it stays relevant in the business and doesn’t become outdated.
The design system team should include 1 interaction designer, 1 visual designer, and 1 developer, each meant to help write interaction-design guidelines, create visual examples, and provide code snippets and implementation specifications for each element, respectively.
In some cases, the team may also include a part-time researcher, part-time architect, and content writer if these roles are explicitly determined in your organisation.
Example of what you can find in a design system
The example of a button is the best one to illustrate what a design system is.
If, in an app or software, there’s no button that looks the same or has the same characteristics, and changes from one page to another, it creates a problem for the user and the developer.
The absence of structure makes the user experience a living hell. If the same logic hasn’t been used during the development of the buttons, it makes the product very complicated to use.
You’ll need a particular set type of buttons. The way it moves, its mode, the dropdown, its borders, and its frames will be defined through the design system.
Once it is integrated, the style of the button is defined through the style guide. The style guide is about how to use these things, it is also where the basic code is defined. If a developer needs a button, all he’ll need is to select the component and the code will already be there because it has been defined beforehand.
It is a component with the same features used everywhere. If one day, the component needs to be edited, the changes will impact the components in the entire system (app, website, etc.). For example, if you want to change the blue to green, it will be changed everywhere instantly.
You might be thinking… well, I pay attention to details; I’m very good at copy-pasting every element carefully and can easily duplicate my design with care… However, at the end of the day, it still remains very inefficient. The best way to simplify and make everything easier for everyone is to create what is called a design system.
What does it add to a team?
A design system makes every step of the development of a product easier. A design system transforms a team's design and development workflow into something much more accessible and easier to use. The design system is mostly about making the user experience as efficient as possible by simplifying a design team’s job. It brings many positives to the team:
Consistency: It brings consistency. Let’s go back to our button example. You define the button component only once and decide how it will look just once. You don’t have to challenge the button all the time. It’s defined one time and remains consistent for everyone to use. It creates a common language for organisations, and it’s highly contextual for organisations. It creates a language in general.
Speed: All the components are already there. So you can just focus on complex user flows that need to be made and complex problems that need to be solved. A design system will speed up the work form.
Communication: It creates a shared and common language among designers, developers, and different teams. Let’s take a “pop-up” for example. One person calls it a pop-up, another dialogue; another person calls it a modal - you can define this language within your design system. That also eases communication.
Focus: a design system allows you to focus on what’s important. You don’t have to think anymore; you have a toolbox and everything ready.
Example of a change it brings to a workflow
We have talked to Sebastiaan Schillebeeckx, co-founder and CEO of PandaPanda, about how his work involving the design systems has been so far. Sebastiaan has implemented several design systems for several companies. Together we've worked on implementing a design system at Nodalview, and it has changed the company’s workflow.
“Before I joined, they were using different design tools and had different people working on it and there was a lack of consistency.”
“Everyone was working on their own tiny part of the product. So in one part, they were doing it this way, and in the other part, they were doing it another way. We the support of Timoté Geimer, we removed all the different design tools and files and moved them into one centralised place: the design system,” he says.
“Cleaning up all the mess and bringing structure in the chaos for the product itself and within the company because nobody was responsible for the design. I first set up the design system and then said everything needs to go through the design system; I was the person responsible for it. With the design system, I brought clarity about who was responsible, the ownership of the design, and who was making decisions regarding it. And it’s necessary. It does so much more than just building a bunch of components,” he adds.
Here, at dualoop we connect the dots between your visual identity and design language, typography, imagery and a UI/pattern library.
From finding opportunities and validating solutions with discovery sprints to creating a design system, we’ll show you the way.
If you need support, leave us a message through our online form, and let's talk!
What you need to be careful about
Working on a design system isn’t always the easiest. There are many things that need to be done with meticulous care.
If you design a component that will end up in the design system, that component has to look good, fit within brand guidelines, and also has to be accessible. If you design a component that is wrong, doesn’t have the right design standards or if you’re using a dark design pattern, and it ends up in the design system, then you have a problem.
The good thing about having a design system is that the changes are done pretty quickly. It should be pretty easy to fix if you do something wrong. If you need to change it, you only have to change it at one point in your design system and only one time. The change is made in a central place, and after pushing it, it will be changed everywhere.
The benefits for product managers
The design system also makes the life of product managers way easier. Once the design system is set up, a product manager can quickly solve problems by talking to a developer and telling them about the needed feature. The developer can then use a specific component or design pattern from the design system.
If the design system put in place is sound and everybody has trust in it, then the process will be speeded up by just communication.
Using a component or pattern to make a change or create something is effortless. A design system makes it possible to not always go through the whole loop, or follow a waterfall process where you have to make briefing and analysis.
On the other hand, designers and developers can focus on solving a problem. They don’t have to worry anymore about how a button needs to look or what kind of button to use; it’s all in the design system. For product managers, it will give them more room to think about other problems and give the people working with the product manager more room to focus on the more important stuff.
And finally, if you have a really big worked-out design system, a product manager can use these components to make some prototypes or concepts themselves.
Why Figma?
Figma is the reference for improving the collaborative design process. It's outperforming all other design tools out there, such as Sketch for example. Figma simplifies the design process by miles and allows designers and teams to work in an efficient way.
One of the benefits of Figma is that it works on every single platform, such as Windows, Mac, Linux and even Chromebook. Everyone from your team can open, edit, use and share Figma files, no matter what platform they use.
In terms of collaboration, Figma is the best platform out there. It’s also very similar to how Google Docs works. You can track anyone’s activity and check the file’s history. Figma also uses Slack as a communication channel. Every single activity is sent to the Slack channel so that everyone can track changes very quickly.
These are only a few of the benefits of using Figma. We won’t go too deep into the details but you definitely get the picture.
Why do we use atomic design and what is it?
To create your design system, we use an atomic design because it’s the most efficient way to work within a design system. In some way, everyone has been using atomic design. However, this methodology gives a clear and precise way to do it.
Atomic design is a method developed by Brat Frost, who’s the leading man when it comes to design systems. Let me briefly introduce you to the concept of atomic design. However, if you’d like to dive deeper into what it is and how it works, read Frost’s “Atomic Design” book.
An atomic system is a method used to create design systems. There are five levels in atomic design:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Everything you need to know about Design systems dualoop panda panda nodalview
Let’s dive a bit deeper into each of the levels of atomic design. All credits for the illustrations of this section go to bradfrost.com.
Atom
In atomic design, everything starts from the atom, which is the smallest thing. Frost defines the atom as “the basic building blocks of matter”. An atom can be a label, input or button. An atom could be a colour, a text style, a font, the border-radius, or animations. You can then use these atoms to create a molecule.
Molecule
When atoms are combined together, the molecule is born. Frost defines the molecule as “the smallest fundamental units of a compound”. The molecule can consist of colour, a text style and a border-radius that created the button. The atoms aren’t helpful by themselves. However, put together, they create the molecule. Molecules are basically a combination of atoms.
Organism
Out of the molecules, you can then create an organism. An organism can be a form, for example. The form will be composed of the input fields and the button. Frost says that molecules “give us some building blocks to work with”. He defines molecules as “groups of molecules joined together to form a relatively complex, distinct section of an interface”.
Do you want to change the colour of your forms? All you need is to go back to that atom and just change it. Then it will be published everywhere. A design system makes everything so much easier.
Template
We’ve defined our atoms, built our molecules and made our organisms. Now things start making more sense when they’re all put in a template. Templates “consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action,” Frost says.
Here is an example of a template:
Pages
And now time for the final result. The template gave the potential and the basis of a page. Forst defines pages as specific instances of templates. Here, placeholder content is replaced with real representative content to accurately depict what a user will ultimately see.
Final thoughts
A design system makes every step of the development of a product easier. A design system transforms a team's design and development workflow into something much more accessible and easier to use.
Don't know where to start? Need a hand?
We start by mapping the problem space, picking the problem to solve, and defining our target customer. As we narrow down and explore potential solutions, we create a prototype and put this to the test with real users.
Leave us a message through our online form, and we will find a solution.
