Design System

Imagem ilustrativa sobre o serviço de 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:

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

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

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

  4. 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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Laís Wada
DesignOps at FTD Educação

Webinar

Learn more about this topic in the Design System webinar: what is it, and how can it help your company

More cases

We generate innovation and digital transformation for our customers

Forest Design System: Decreased prototyping time for new products and increased productivity for the development team

Accelerating the automaker's digital presence, in all of its launches

Experimento: User journey mapping for application improvement

DS Envolve: Spreading the Design System culture

Regional Glossary: More than 3,000 expressions spoken in the four corners of Brazil for greater effectiveness and engagement in media pieces

Digital transformation for one of the largest newspapers in Brazil

Martins Wholesale: Applying research for continuous improvement of digital products

Delivery: Understanding the channel and improving the conversion rate

Other Services

Get to know other services we offer

Contact

Want to improve your product or service? Write to us!