Design System

O que é?

Design System é um produto vivo que consiste em conjuntos de bibliotecas reutilizáveis e codificadas de design e conteúdo de uma empresa, geralmente criado e mantido pelas equipes de Design e Tecnologia.

Quando aplicar?

Antes do início de um projeto de Design System, é importante ter claro a importância de um Design System, qual será o objetivo do projeto e se há estrutura para gerir e manter futuramente.

O objetivo pode ser desde diminuir o retrabalho dos desenvolvedores e designers, até melhorar a padronização dos produtos.

Definir o objetivo é importante porque um projeto inicial de Design System pode durar entre 4 a 6 meses e envolve vários profissionais.

Objetivos do projeto

Antes do início de um projeto de Design System, é importante ter claro qual será o objetivo do projeto.

O objetivo do projeto pode ser desde diminuir o retrabalho dos desenvolvedores e designers até melhorar a padronização dos produtos.

A definição do objetivo é importante porque um projeto inicial de Design System pode durar entre 4 a 6 meses e envolve muitos profissionais.

Os elementos de um Design System

Cada empresa pode construir a estrutura do seu Design System de acordo com as suas necessidades. De forma geral, um Design System é formado por 4 partes principais:

Design Principles: conhecidos em português como Princípios de Design, são um conjunto de definições de um projeto que deve refletir a filosofia de design da empresa e guiar como os produtos devem ser concebidos. Eles servem como base para melhoria dos produtos, ajudando a equipe na tomada de decisões e aumentando a eficácia e a evolução do ecossistema de produtos.
Design Tokens: são variáveis que armazenam atributos visuais, como cores, unidades de dimensionamento, grids, entre outros. Eles servem para criar e manter um sistema visual consistente, independente da plataforma, como sites e aplicativos.
Componentes: Os componentes incluem uma variedade de elementos comuns da interface do usuário para criar experiências de forma ágil garantindo interação e estilo consistentes, além de otimizações de acessibilidade. Geralmente, estes componentes ficam disponíveis nas linguagens de código aplicadas nos sites ou aplicativos da empresa.
Conteúdo da marca: Além dos componentes de design, um Design System pode contemplar conteúdos da marca, como Manual de Tom de Voz, Branding e recursos para download, como os arquivos de componentes do Design System.

Quais são as etapas?

Um projeto de Design System contempla 5 etapas:

Entrevista com stakeholders: O objetivo desta etapa é entendermos as dores e necessidades dos stakeholders envolvidos no projeto, elencando suas dificuldades e objetivos no projeto.
Definições: O objetivo desta etapa é definirmos os fluxos de atualização e manutenção do Design System, assim como as ferramentas a serem utilizadas tanto para design como para desenvolvimento e o formato e a equipe de manutenção.
Design Principles: O objetivo desta etapa é alinharmos o conhecimento e a expectativa de todos os stakeholders envolvidos no projeto e criarmos os Design Principles da empresa.
Inventário de Componentes: O objetivo desta etapa é um mapeamento de todos os componentes e styleguides já produzidos pelas equipes da empresa para entendimento aprofundado do contexto e identificação de padrões.
Design System: O objetivo desta etapa é a criação do Design System em si. Geralmente, as empresas começam com uma versão inicial do projeto, chamada de MVP ou v1, focada nas principais necessidades.

Manutenção e Adoção

Tão importante quanto a criação de um projeto de Design System, é a sua manutenção e a adoção pelas diferentes equipes da empresa.

Para que o projeto tenha essa continuidade, é importante a participação de todos os stakeholders desde o início do projeto e uma ampla divulgação para toda a empresa.

Benefícios

Mais velocidade de criação, do protótipo até o resultado final;
Agilidade para realizar modificações em features já existentes;
Consistência de identidade em interface dos produtos;
Melhor alinhamento da equipe e colaboração entre as áreas de produto e desenvolvimento.

Clientes

Confira a opinião de nossos parceiros

Eu definiria (o projeto) como uma parceria muito eficiente, porque a Tuia teve esse processo de entender o contexto e por isso ela atendeu muito bem a gente como cliente. A Tuia tem uma boa referência de boas práticas de Design System e de outras matérias também, e isso é muito importante. Isso somado com o contexto da empresa, com as necessidades, foi a fórmula vencedora que deixou a gente muito satisfeito e gerou uma confiança muito grande.