O design system é um conjunto de entregáveis que reúne princípios do produto, biblioteca de componentes e padrões de comportamento.

Essa ferramenta é apresentada em documentos e disponibilizado para toda a equipe envolvida no projeto,  garantindo que durante o desenvolvimento do produto a uniformidade na entrega de experiência do usuário seja mantida.

O trabalho se inicia a partir das definições globais do produto em conjunto com os designers, equipe técnica e gestores do projeto. Esse processo se encerra com a publicação da biblioteca de componentes para o sistema.

Alguns termos que podem ajudar no entendimento do processo

Produto: sistema, site ou aplicativo. Existe uma diferença entre produto e projeto que é a definição de ciclo de vida. Se você possui algo que será continuado, é um produto. Caso contrário, é um projeto. Geralmente não se cria um design system para um projeto pela quantidade de esforço que é necessário, mas quando se cria para um produto, ele é utilizado nos projetos.

Princípios: definição de adjetivos e valores que regem a construção dos padrões para o design system.

Componente: é um item de interface que carrega consigo as definições do design system. Existe uma definição do processo de criação de componentes chamada Design Atômico (Brad Frost).

Biblioteca de componentes: é a reunião desses componentes, tanto na documentação (projeto gráfico) quanto nos entregáveis de front-end.

Como todo projeto de design, é necessário definir o escopo, prazos e entregáveis. Após  estabelecer os limites e necessidades do produto, é preciso definir os princípios de design que serão seguidos para a criação. Ao definir o escopo e os princípios que serão utilizados, é necessário fazer o discovery do produto, ou seja, elaborar um inventário do que existe no produto atual e executar processos de documentação de melhorias necessárias.

A próxima fase é a de proposta de componentes. Há duas formas: sendo original ou baseado em algum já existente. A primeira é muito mais difícil, porém fará seu produto único. Se você possui um manual de identidade criado para o produto ou para a empresa, já ajuda muito pois ali estão as definições que você deverá seguir para manter uma consistência.

Essa etapa de criação de componentes é estritamente alinhada com as expectativas da equipe de front-end que materializa esses componentes, codificando e definindo questões técnicas para seu compartilhamento.

É necessário ter atenção aos detalhes na hora de definir os componentes, já que possuem estados, interações e caber no layout final (tendo como referência o design atômico). Essas definições incluem o grid, hovers, tipografia, espaçamentos e cores – resumidamente, o que chamamos de styleguide.

O tempo estimado para construção de um design system é muito variável,  dependendo do nível de criações necessárias e o quanto de verba há disponível. O importante é ter em mente desde o início quais são os ganhos esperados com um design system para esse produto (ou para a empresa).

Um design system é muito mais que um projeto, é uma produção de mais um produto que possui todas as fases que um design de produto deve ter, incluindo um P.O para guiar o roadmap. Não deve ser tratado como um projeto isolado, apesar de possuir um processo próprio para construção.