Design System vs UI Kit

Adrian Przetocki

UI/UX Designer

When it comes to planning visual assets and ensuring design consistency, companies have numerous options, with design systems and UI kits being two of the most common.

 

Of course, you don’t need both, so which is better? Let’s take a look at the benefits of both a design system and a UI kit, as well as which one is better in regards to respective criteria.

 

What is a design system?

 

A design system is a centralized repository for digital assets across all of a companies materials. These products or services then simply call from the library, rather than relying on repetitive coding.

 

Consequently, any changes to an asset in the design system ripples throughout the wider network of services. For this reason, you’ll also hear design systems as a “singular source of truth” or “living library”.

 

In terms of assets then, design systems typically focus on ‘atomic design’ theory, which focuses on three key elements:

 

  • Atoms: the basic elements, be it shapes, colors, or other simple principles.

  • Molecules: groups of elements combined into common assets, such as input fields, forms, header sections, etc.

  • Organism: templates built from molecules, such as web pages and app views.

 

Because of this, changing an atom in the library instantly changes the corresponding molecules, in turn changing the organisms.

Alongside this, design systems can also include additional design rules, such as spacing, design patterns, typography, color palettes, and more.

 

Examples of design systems

 

While design systems are still relatively new, they’ve been readily utilized by some of the largest and most recognized brands out there. Many are also open-source or made public - here are some such examples:

 

 

  • Material Design. This is Google’s design system, although it is backed by open-source code. More than just visual assets, Material Design includes sounds, navigation rules, icons, and various other minor details that combine into a consistent experience.

  • Atlassian. Trello, Jira, Confluence, and numerous other tools all have the same distinctive look and feel, yet have just enough differences to tell them apart. A big part of this success lies in Atlassian’s internal design system, which allows for some independence under a strong umbrella branding.

  • Carbon. This is IBM’s design system, although it is open-source and well supported in the wider community. It allows IBM to manage its increasingly diverse products and services, including any upcoming experiments or test features. It’s a great example of a living design system in action.

 

What is a UI kit?

 

As the name implies, a UI kit focuses only on the user interface. It is a collection of templated pages, as well as predefined components for the interface, such as buttons, progress bars, and other aspects of the navigation.

With a UI kit, designers can quickly put wireframes and pages together, although they are limited to these UI features. It’s also not a ‘living’ kit like a design system - more manual work is needed.

How do they differ?

 

If you want to create internal prototypes or purely visual designs, a UI kit is an ideal option. However, if you want something that works at a larger scale and works for both designers and developers, a design system is a must.

Scale

Working on a short term project? A UI kit is quick to set-up and will likely work out well for you. After all, if developers aren’t creating more than a few pages or a limited app, the extra development work isn't outweighed by the benefits of a design system.

 

That said if you’re looking for long term projects, or even a project you wish to adapt, expand, or otherwise shape over time, a design system is significantly better. The extra investment at the start will come back in the form of rapid changes and a greater assurance of consistency.

 

Multi-Purpose

If you want to build across platforms and software, a design system can do that. Its central components can be implemented across apps, websites, and other materials - because there’s only one copy of everything, there’s no need to replicate code.

 

A UI kit, on the other hand, isn’t focused on recalling UI assets with flawless perfection, so some manual adjustments will always be needed.

 

Rapid changes

As brands change and evolve, a design system can support these changes from the base up, thanks to its use of atomic design and recallable assets. This also gives you room to grow or evolve your organization’s branding without having to restart every frontend project.

 

With a UI kit, updating the core library requires developers to check all existing assets, so it’s not always clear if the update has been fully implemented. The more significant this change is, the more likely it is for such mistakes to appear.

 

Rapid prototyping

Want to put a visual prototype together quickly? A UI kit can do this, as it’s created for taking visual rules and templates, tweaking them slightly to fit new needs.

That being said, design systems are also great for prototyping. Because internal projects don’t want to spend too much time on visuals, a design system recalls this code and cuts down frontend development significantly.

 

Sources of Truth

Both design systems and UI kits represent singular sources of truth - however, only design systems ensure developers aren’t able to make mistakes.

UI kits require developers to manually implement elements over and over again, which leads to minor mistakes and inconsistencies. With a design system, they simply recall existing elements, so there’s no room for such errors.

 

TL;DR

 

Design systems and UI kits both focus on providing central libraries. However, while a UI kit focuses on giving designers the visual templates needed to create new pages or views, a design system is much more advanced. It removes any possibility for errors and creates a central library that both designers and developers can work on together, which leads to smoother development, better quality, and more consistent branding.

 

If you want to design in a scalable and sustainable way, yet still want the support of clearly established visual rules and principles, a design system is the way to go.

 
Easter egg ;)