A complete beginner’s guide to design systems in UI UX design

Reading Time: 8 minutes

Design systems are essential for businesses looking to document their design assets and continue building consistent, usable designs. It is beneficial for the designers and developers at a company.

Design Systems help in organizing every design asset in one place. This allows others at the company to see and better understand how and why design decisions are made.

Design systems: An introduction

Nathan Curtis, author and co-founder of Eightshapes defines design systems as:

“A design system is a scalable framework for decision and team behaviours across a product portfolio to converge on a cohesive experience.”

In simple terms, a Design System consists of UI components and a clearly defined visual style, released as both code implementations and design artefacts.

It allows for sharing of assets, fonts, etc. across multiple designers and creates an organized, central repository for common usage throughout your team.

To get the best idea of what design systems are quick, we have created this infographic.

Design Systems enable UI/UX designers to efficiently work on large scale projects. They remove any room for errors and create a central library that both designers and developers can work on together. This leads to smoother development, better quality, and more consistent branding.

Now that you have a fair idea of what Design Systems are, let’s be clear about what they are not.

Design Systems are not:

• A static design bible
• A pattern library that only documents designs
• A magic glue that fixes everything
• A dictator that forces teams to comply with the norms
• Easy to create, to maintain, or to get buy-in

Elements of design system

The system is composed of both tangible as well as non-tangible elements.

Tangibles comprise tools for designers & developers, patterns, components, guidelines etc.

On the other hand, non-tangibles constitute brand values, shared ways of working, mindset, shared beliefs etc.

Components

A component is a standalone UI element, which can be reused across many projects. Its goal is to do one thing well while remaining abstract enough to allow for a variety of use cases.

Developers can use them as building blocks to build new user experiences. A key benefit is that designers need not worry about the core design and functionality of each component. They are pretty much self-understood. Examples include buttons, links, forms, input fields, and modals.

Patterns

A pattern is the best practice solution for how a user achieves a goal. Often, multiple components are combined in order to create a standardized user experience (UX). It solves two problems at one go: UX as well as developer experience (DX).

After implementing patterns, users will understand the application better and accomplish their tasks faster. When the development team understands the proper way to use components together, software applications become easier to use. Examples include saving data to the system, capturing data from forms, and filtering & analyzing data.

Visual language

A cohesive company brand strengthens its value in the minds of the customer. In the context of Design Systems, this means defining various aspects of the visual style, including colours, typography, and icons. Defining primary, secondary, and tertiary colours helps an application stand out and is more user-friendly.

The right typography ensures users are not distracted while using an app. Finally, icons increase engagement in a product and make it “pop” visually.

Design artefacts and code implementations

By leveraging the components, patterns, and visual language of the Design System, designers can create design artefacts representing UI workflows. Developers refer to the artefacts as guidance for implementing the design with code.

Why design systems are important to designers?

Once a design system is in place, you can quickly understand its true value. The entire product development team is freed up to focus on what matters most: solving customer problems and delivering value.

Additionally, the avoidance of having teams working in parallel, recreating the same UI elements over and over, has a real-world project impact in terms of a reduced time to market and increased cost savings.

Design Systems allow project teams to work better together. Designers define a centralized “source of truth” for software application best practices, referencable by anyone in a product organization.

Developers no longer need to spend time rethinking how to build common app scenarios, such as application search or data table grids.

When the business inevitably makes changes to the Design System, they can easily be applied to all projects. The result is a better product for your users.

To explore more about the importance, benefits and process of design systems read our article on why design systems are important and how to create one?

Kinds of design systems

Strict vs. loose

A strict system has comprehensive and detailed documentation. It is fully synchronized between design and development. There will be a strict process for introducing a new pattern in the system. A strict system should be very broad to cover the majority of cases the teams may encounter.

A loose system will leave more space for experimentation. The System provides a framework for the teams while preserving some liberty. Designers and developers are free to use it or not, regarding their particular needs for their product.

We need to find the right balance between strictness and flexibility: a very strict system might repel designers and developers who will not want to use it. On the other side, if it is kept loose can it be still called a Design System?

Modular vs. integrated

A modular system is made of interchangeable and reusable parts. It suits well for projects that have to scale quickly and that have to adapt to multiple user needs. The negative part is that it’s often more expensive to realize. This is because it can be difficult to make modules that can be independent while working well together. This kind of system will particularly fit large scale product as e-commerce, finance and governments websites. For a modular system, it will be very interesting to work with atomic design in mind.

An integrated system focuses on one unique context. It’s also composed of parts, but these parts will not be interchangeable. This kind of system suits products that have very few repeating parts and that need a strong and often changing Art Direction (portfolios, showcases, marketing campaigns…).

Centralized vs. distributed

In a centralized model, one team is in charge of the System and makes it evolve. This team is here to facilitate the work of the other teams and has to be very close to them, to be sure that the System covers most of their needs.

In a distributed model, several people of several teams are in charge of the system. The adoption of the system is quicker because everyone feels involved but it also needs team leaders that will keep an overall vision of it.

In each case, we advise allowing everyone to participate and make suggestions to improve the system, to create a sense of membership.

Popular examples of design systems

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

Bootstrap

Bootstrap Design is a comprehensive and easy to use Figma UI Library, organized via components and atoms. It includes Local Styles for Bootstrap’s colours, grids, and typography so that you can easily customize it to fit your brand or product.

Design systems vs. UI kits

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

Conclusion

A design system is an operating system but for user experiences. It provides the structure and the underlying experiential through-line that unites our products.

In a business, a design system plays the role of a facilitator and curator — it gives you that historical consciousness of what’s been done in the past while allowing you to be deliberate about how you design for the future.

At Octet Design Studio, we follow a rigorous process of maintaining a design system for our projects, which enables teams to focus on more important aspects of UI and UX design like UX Strategy, UX Research, Design Thinking and User Testing.