Everything You Need to Know About Design Systems in 2022

Feim Mehmed
May 31, 2022
8
min read
Design System

Design systems have become a key part of a lot of product teams’ everyday lives. The concept of design system became super trendy. Every day, you’re surrounded by companies that use design systems, such as Airbnb or Uber. You probably have already heard about it. If not, it’s time to learn about it. 

If you want to have a good organisation or efficient products, you will need a design system. Otherwise, it will be a mess. I’m not the only one saying it. It’s the case for a lot of people.

All the companies that are at the forefront of practices either already have a design system or are starting to put one in place. Tomorrow everyone will be talking about the design system. Join the conversation.

In partnership with PandaPanda, we are launching productdesignsystem.com. What best way to get a design system than from the experts in that field? Before we tell you about our offer, let’s dive into what a design system is.

 

What is a design system?

If you tried to look into what a design system is, you may 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 in a way that allows 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”. 

On freecodecamp.org, the design system is defined as “a collection of reusable components to tie whole products together”.

For Muzli, design systems “are essentially collections of rules, constraints, and principles, implemented in design and code. These 3 attributes serve distinct functions and provide coherent, systemic order in systems from buttons to single-page applications.”

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 what a design system is, now let’s try to 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 their commercials, to their 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 the aesthetics? No, it’s about other stuff as well.  

As we previously said, the definitions vary depending on who 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 chose to not include. However, there are common things that 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 blocks that you need to build a nice 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 might not be relevant 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 important 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 contrary of component libraries, pattern libraries contain “collections of UI-element groups or layouts”. In the pattern libraries, you’ll find the content structures, layouts, and/or templates. The use of pattern libraries is similar to component libraries. These can be reused and readapted. 

The design system team 

As I mentioned previously, a design system is a living thing. It constantly evolves and needs change and maintenance to make sure it stays relevant in the business and doesn’t become outdated. 

Nngroup suggests that 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. 

The website also suggests that the team should 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, nor 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 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 a lot of positives to the team:

Consistency: It brings consistency. Let’s go back to our button example. You define the button component only one time and decide how it’s going to 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. By this I mean, 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 you have everything ready.

Example of a change it brings to a workflow 

I 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. He talked to me about his work for Nodalview and how implementing the design system 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,” he says. 

“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. I removed all the different design tools and different files and moved them into one centralised place: which is the design system,” Sebastiaan tells me.

“Cleaning up all the mess and bringing structure in the chaos for the product itself but also within the company because there was nobody responsible for the design. I first set up the design system, and then said everything needs to go through the design system, I am the person responsible for it. With the design system, I brought clarity about who’s 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. 

 

What you need to be careful about

Working on a design system isn’t always the easiest. There are a lot of 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. Meaning that if you design a component that is actually 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. If you do something wrong, it should be pretty easy to fix it. 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 then 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 could easily solve problems by talking to a developer and telling 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 good and everybody has trust in it, then the process will be speeded up by just communication. 

It’s effortless to use a component or pattern to make a change or create something. 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 it will give the people that work for the product manager more room to focus on the more important stuff.

And finally, if you have a really big worked-out design system, maybe a product manager can use these components to make some prototypes or some concepts themselves.

Why Figma?

We will use Figma for your design system since it’s the reference for improving the collaborative design process. Figma, which is a cloud-based design tool, is 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, no matter what platform they use, can open, edit, use and share Figma files. 

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 easily. 

These are only a few of the benefits of using Figma. I won’t go too deep into the details but you definitely get the picture. 

 

Why do we use atomic design and what is it? 

In order 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, I’d suggest you read Frost’s book called “Atomic Design”

An atomic system is a method used to create design systems. There are five levels in atomic design:

  1. Atoms 
  2. Molecules 
  3. Organisms 
  4. Templates 
  5. Pages

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, 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 useful 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, build 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 the specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

We’ll give you a hand… here is our offer

As I previously mentioned, dualoop is launching productdesignsystem.com in partnership with Pandapanda, a new platform to help you shape your design system. We offer to create the best and most consistent experience throughout your products, and a centralised source of truth. Here is how our methodology works:

Step 1: Intake 

We’ll first proceed with an intake, free of charge, to collaborate efficiently and understand your needs. This intake call will result in a deep analysis of your needs, a proposal for collaboration and an offer of a budget and timing. 

Step 2: Discovery 

We’ll then proceed by doing an audit of your current product. Whether it’s an app, website or other product. We’ll focus on interviewing the stakeholders and identifying gaps between product design and development. Our team will then define design tokens and build a roadmap.

Step 3: Delivery 

Next, your design system will be set up in Figma and created based on Atomic Design. We’ll implement the design tokens plugin in Figma, build principal screens and flows, setup documentation in Notion and connect with Storybook

Step 4: Add Ons 

We’ll also give you a personalised illustration style and library, and a personalised icon pack 

That’s it…

Now you have an overview of what a design system is, what its benefits are and why you should join this big movement of the future. If you want to read more about design systems in detail, head over to designsystems.com’s blog where you’ll find plenty of articles revolving around design systems.

The leaders in the Belgian market such as Telenet, Proximus, and SDWorx have adopted a design system. What are you waiting for? 

Interesting in collaborating with us? Get your design system done by the best in the country!