Design System

What is it?

Design System is a living product consisting of sets of reusable and codified libraries of a company’s design and content, usually created and maintained by Design and Technology teams.

When to apply?

Before starting a Design System project, it is important to be clear about the importance of a Design System, what the objective of the project will be, and if there is structure to manage and maintain it in the future.

Project goal

The goal can be from reducing the rework of developers and designers, to improving the standardization of products.

Defining the objective is important because an initial Design System project can last between 4 to 6 months and involve several professionals.

The elements of a Design System

Each company can build the structure of its Design System according to its needs. Generally speaking, a Design System is made up of 4 main parts:

Design Principles:
Known in Portuguese as Design Principles, they are a set of definitions of a project that should reflect the company’s design philosophy and guide how products should be designed. They serve as a basis for product improvement, helping the team in decision making and increasing the effectiveness and evolution of the product ecosystem.
Design Tokens:
These are variables that store visual attributes, such as colors, sizing units, grids, among others. They serve to create and maintain a consistent visual system, regardless of the platform, such as websites and applications.
Components:
Components include a variety of common user interface elements to create experiences in a responsive manner ensuring consistent interaction and style, and accessibility optimizations. Typically, these components are available in the code languages applied to the company’s websites or applications.
Branded Content:
In addition to design components, a Design System can include branded content, such as a Voice Tone Manual, Branding, and downloadable resources, such as Design System component files.

What are the steps?

A Design System project comprises 5 stages:

Interview with stakeholders:
The objective of this stage is to understand the pains and needs of the stakeholders involved in the project, listing their difficulties and objectives in the project.
Definitions:
The purpose of this step is to define the Design System’s update and maintenance flows, as well as the tools to be used for both design and development, and the format and maintenance team.
Design Principles:
The objective of this step is to align the knowledge and expectations of all stakeholders involved in the project and create the company’s Design Principles.
Component Inventory:
The objective of this stage is a mapping of all components and styleguides already produced by the company’s teams for a deep understanding of the context and identification of patterns.
Design System:
The objective of this step is to create the Design System itself. Generally, companies start with an initial version of the project, called an MVP or v1, focused on the main needs.

Maintenance and Adoption

As important as the creation of a Design System project is its maintenance and adoption by the different teams in the company.

For the project to have this continuity, it is important to have the participation of all stakeholders from the beginning of the project and a wide dissemination to the whole company.

Benefits

More speed in creation, from prototype to final result;
Agility to make modifications to existing features;
Consistency of identity in product interfaces;
Better team alignment and collaboration between product and development areas.

Clients

Check the opinion of our partners

I would define (the project) as a very efficient partnership, because Tuia had this process of understanding the context, and because of that they served us very well as a client. Tuia has a good reference of good practices in Design System and other subjects as well, and this is very important. This, added to the company’s context and needs, was the winning formula that left us very satisfied and generated a great deal of trust.