O que é um design system?

Design system é uma biblioteca que é usada para organizar o tema de uma aplicação, incluindo suas variações. Ele contém os componentes mais comuns, como botões, entrada de texto e barra de navegação. Define as cores a serem usadas, desde cores primarias a terciárias, usadas em destaques, estados do sistema (erro/sucesso por exemplo) etc, também define diferentes usos de texto, como títulos. Além disso, inclui variações de tema (claro/noturno), assim como fontes e espaçamentos.

Exemplo

Aqui temos um exemplo de um design system simplificado, contendo algumas variações de fontes, cores e componentes, como botão e input. Nesse caso, as fontes poderiam ter usos diversos como títulos, corpo de texto, legendas etc, podendo isso ser indicado no design system. Já as cores são de acordo com o uso, como a cor principal, aqui chamada de primária, que é usada nos lugares de destaque como em botão de ação, tela de inicialização (splash) etc, temos cores relacionadas ao estado da aplicação, como aqui demonstrado com a cor para erro, onde poderia ter também sucesso e neutro, variando de acordo com a necessidade.

Pontos ao considerar se irá ou não ter um design system

Ter um design system resulta em uma centralização dos componentes, permitindo reusar em diferentes aplicações, gerando assim uma padronização e facilitando a manutenção, uma vez que ao atualizar em um local irá refletir nos demais.

Mas como nem tudo são flores, ao decidir criar e usar um design system têm-se um maior esforço inicial, tanto para decidir o que irá compor como para criar os componentes e suas variações.

Considerações finais

Ter ou não um design system depende da necessidade de sua aplicação, precisando assim avaliar os prós e contras caso a caso. Em aplicações que trabalhei e que tinham um design system foi bastante útil, como ao criar templates já agiliza por ter alguns componentes pré-definidos e em casos de mudança de marca, facilita a retafotação por não precisar ir em cada componente alterar manualmente.