When researching this topic, I was very much expecting a lot of articles talking about how important a design system is and how much easier it has made the work of designers and developers.

That was not quite what I found.

It appears that design systems, particularly in the design community, does seem to cause some divide. The arguments are also ones that made me think, an avid supporter of design systems, there is some truth to what is being said here.

So for anyone feeling a bit overwhelmed by all of the information out there on design systems, here is an article that will hopefully shed some light on the topic.

What is a Design System?

You may well have heard the term design system, but never as to what these actually are.

A design system is essentially a collection of components that can be reused and combined to build any number of products. Furthermore, a design system not only gives us a box full of individual UI-pieces to play with, but also communicates to us and our team why we are designing our elements that way.

It communicates the purpose of our designs.

A design system gives us a clear standard and an implementation guide alongside our components. That way we know when and where to use which components and why we are using them.

A design system is not some document we create once and that is it. It is constantly changing and adapting to new requirements. It is a collaborative effort between designers and developers.

Benefits of a Design System

Now that we have established what a design system is, we can now have a look at why investing in one is important for your company.

Brand Recognition

Imagine you are new in product team and have been asked to design a new feature for one of the company’s products. You will naturally orientate yourself around what has already been done, but some of the elements you will have to create yourself.

Once your design finishes, it is given to the developers to implement.

To save time developers may reach for off-the-shelf parts. The UI starts to take shape, but the design does not reflect the brand’s values. The brand of the company is not recognisable.

By Having a collection of parts that reflect the company values and clearly state why each element is crafted this way, designers and developers can build products and pages that are instantly recognisable as belonging to a company.

I know, I know.

Before we can reap the benefits of this, we are going to have to create one. That is no small feat, but by starting off small, standardising values for colour, spacing, typography and more, you are creating your first building blocks.

It allows Design to Scale

Imagine having to design a datepicker from scratch every time you need one.

Or a sign-up form when stakeholders call for it.

You may become quicker over time due to practice, but it is still a time-consuming task and can have a different result each time.

The components that form part of a design system can be a huge time-saver when it comes to designing and developing. As a designer, you can design that datepicker once and use everywhere. Developers can then also reuse the components that were built to match the design.

That way designers and developers are spending less time styling everything from the ground up, but can take what already exists and combine that to great products efficiently.

It is not only the components that allows design to scale more easily with a design system. Components are a reflection of the principles and guidelines outlined as part of your design system.

These principles and guidelines serve as a guiding light when it comes to designing and giving feedback. Design lives on feedback, but the feedback given can get out-of-hand very quickly and can cause a lot of frustration and delay when there is an endless back-and-forth.

Aligning your team around principles streamlines the feedback process and gives sound argumentation for design decisions.

Frees Design Resources

Design teams can now use these components to structure their products and create their pages. They no longer need to spend so much time on creating the entire user interface from scratch.

This allows design teams to focus on more complex and important problems to solve. Teams can now have a closer look at how users flow through the app or how the information on the page is structured.

This will result in a superior user experience.

Designers and Developers can speak the same language

It gives design and development a common visual language to operate around and makes design hand-offs a lot easier. Everyone understands what is meant by the sidebar submenu because it is defined as a component within the design system.

Communication is an essential part of working in a team and a design system will definitely improve the collaboration within and between teams.

Onboarding new Designers and Developers

When you are new on a team, be it as a designer or as a developer, you are going to be learning a lot about the project first.

There is a lot of information out there and it may be in different places, some written down, others are more implicit rules that everyone seems to learn as the project evolves.

Not a very easy task and it can be very frustrating.

With a design system in place, we can improve the onboarding experience by having clearly documented guidelines that designers and developers can start to become familiar with.

You can get them onboarded quicker and they can hit the ground running much sooner.

Drawbacks of a Design System

Like I said in the introduction, this post is not all about why a design system is awesome.

There are also a couple of drawbacks that I would like to highlight.

Resource Intensive

The first drawback has to be that creating a design system that can reach its full potential takes a lot of resources.

Not only design resources, but development resources as well.

You are constantly looking to get feedback on each component and improve the design system as you go along. With every piece of feedback your design system evolves and matures.

But all of that uses up resources.

Don’ t get me wrong, dedicating resources into building a design system that truly lives up to what it promises is definitely worth it. Particularly in the beginning, it eats quite a bit of your time.

For smaller teams I would definitely recommend that you start off very small and first have a look at things such as colours, spacing and typography. By standardising these building blocks, you and your team can start building upon this foundation.

A design system is essentially a product onto itself.

Educating Designers and Developers

Once you have your design system with your pixel-perfect components all finished, it is time that people start using it.

Designers and developers need to learn how to use the design system your created for them. It is therefore important to involve them as early as possible in the creation of each component and get their feedback.

But still, there will be those that perceive your efforts as unnecessary. After all, we have been building products just fine without all of these tools.

It can and probably will be tough to get buy-in form everyone, especially in the beginning. Educating everyone on your team and getting everyone to learn how to use a design system takes time.

There is a cultural shift that goes with that.

These things take time and require a lot of patience.

Conclusion

I believe that design systems are a great thing to have, given the right context.

In a fast-paced, ever-changing environment, where the branding guidelines are constantly changing, a design system will do more harm than good.

In a more stable environment, with multiple products under a brand, it will make life easier for everyone involved by providing a single-source-of-truth for designers and developers.

As with everything in design, the user needs to be our focus. A good design system will place the user at its center and adapt the system to ensure that the final product is tailored to the user’s needs.

The easiest way to do this is to setup a feedback loop that includes your target users.

Your target users will not care too much that you have used a different shade of blue, but they will care if your product does not solve their problem.