# Introduction to Design Systems

A design system is a tool that allows teams to **establish patterns** in order to build digital products. These patterns are derived from a series of elements that are reused to achieve **consistency and time efficiencies**. The system is built to be **modular**, allowing elements to **scale** and support the most basic to complex functionalities (the same way the modular Billy shelf can be combined in very different ways to support different functionalities).

{% hint style="info" %}

#### A Digital System is a set of connected patterns and shared practices, coherently organised to serve the purpose of a digital product.

{% endhint %}

## Principles

A digital system creates a **common language** between the design and development teams, defining **rules** that that are grounded in a clear set of principles:

![](https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8XHqatGwdZo585nW3%2F-MO1ksraSFCD86N1nZyC%2F-MO1py9b3rSJZ3JvMXBS%2Fdestacados2.jpg?alt=media\&token=aa764e79-c8e6-4af1-98f0-7e4da42365ad)

Solutions should work for the smallest to largest projects and teams.

![](https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8XHqatGwdZo585nW3%2F-MO1ksraSFCD86N1nZyC%2F-MO1ofMPQYsDVVpSwVbg%2Fdestacados4%20copia.jpg?alt=media\&token=f18751c4-655e-4a4d-8ced-05156da0e3ec)

Common patterns are what creates the time efficiencies and quality assurance.

![](https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8XHqatGwdZo585nW3%2F-MO1ksraSFCD86N1nZyC%2F-MO1pplzQFLYcFU5B2lE%2Fdestacados5.jpg?alt=media\&token=45f84c2d-b38f-4c6d-9f16-c186fc4884ee)

Clear guide rails that enhance not limit growth and innovation.

![](https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8XHqatGwdZo585nW3%2F-MO1uEK6gMpCkELU1BhV%2F-MO1xWJwz2KkgCPAMZcD%2Fdestacados7.jpg?alt=media\&token=48cf704d-b5ce-4fb9-8db2-6f07985c2445)

Decisions need to be made considering the company culture and digital ecosystem.

![](https://3168528728-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8XHqatGwdZo585nW3%2F-MO1dOGjWNeMt-TSX1Tn%2F-MO1kW-6yk_rw6jLRTNJ%2Fdestacados3.jpg?alt=media\&token=74218ec3-b64d-40a2-8c19-e0966de3c4c5)

The use and performance of the system has to be tracked in detail in order to prove its value with real data.

## A scalable, dynamic tool

A digital system is flexible and continually evolves based on business objectives, user testing, industry trends and innovation. This is the main difference between a style guide and digital system—a digital system is scalable and dynamic. As opposed to handing off a style guide at a certain point in time, in digital systems, the collaboration between designers and developers is ongoing. To that point, we always recommend that a digital system be treated as an **ongoing** **product** instead of a fixed project within a company.&#x20;

**This tool is increasingly adopted by teams who support the agile methodology, allowing companies to build faster and save a lot of time and money.**

{% hint style="info" %}
We always recommend that a digital system be treated as an ongoing product instead of a fixed project within a company.
{% endhint %}

##

## What value does it add?

Using a digital system and its defined patterns ensures the **consistency** of products across all design and development teams, both internal and external.

| Patterns | <p>Internal Design/<br>Development teams</p> | <p>External Design/<br>Develpment Teams</p> |
| -------- | -------------------------------------------- | ------------------------------------------- |
| Brand    | ✔️                                           | ✔️                                          |
| UX       | ✔️                                           | ✔️                                          |
| UI       | ✔️                                           | ✔️                                          |
| Motion   | ✔️                                           | ✔️                                          |
| Front    | ✔️                                           | ✔️                                          |

This improves the user experience and significantly shortens **time to market** and **time to fix bugs.** Digital systems are essential for **scaling product efficiently** across teams and business units. And most importantly, all this means more time innovating and more **money saved.**

## Main benefits of having a Digital System

The most evident business benefit is efficiency—in time and money—but a digital system will help any organisation:

* Create time efficiencies
* Ensure accessibility
* Foster autonomy and speed
* Scale product
* Reduce risk
* Make data-driven decisions
* Onboard new members
* Innovate
* Manage the backlog
* Ensure product consistency
* Develop one common language
