O que é design system
Design system é o conjunto de escolhas visuais e de componentes que mantém a interface consistente. Ele reúne os tokens de cor, tipografia e espaçamento, os componentes e as orientações de uso.
O sistema não é apenas a biblioteca de componentes. Ele inclui os estados, as exceções e a manutenção que impedem cada tela de criar a própria versão do botão.
A estrutura
Os tokens guardam as medidas e as cores em um lugar único. O componente usa os tokens, e a mudança no token alcança todas as telas que o utilizam.
Os componentes cobrem os estados de repouso, foco, erro e desabilitado. A documentação explica quando usar cada um e o que não deve ser feito.
Governança e adoção
A adoção depende de o componente estar disponível no repositório e de a revisão apontar a cópia. Quando a tela precisa de algo diferente, a mudança entra no sistema.
Um responsável responde pela escolha visual e pelo código. A revisão dos usuários mantém o conjunto próximo do trabalho real.
Exemplo
Como conferir
Liste os componentes e os tokens, além dos estados cobertos. Confira se as telas principais seguem o sistema e se a mudança de um token alcança as páginas que deveriam mudar.
O CSS aplica os tokens, e o Tailwind pode organizar as classes. A documentação mantém o uso e as exceções visíveis.
Dúvidas frequentes
Perguntas frequentes sobre Design system
- Design system é a mesma coisa que biblioteca de componentes?
- A biblioteca é uma parte. O design system inclui os tokens, as orientações de uso, os estados e a manutenção que mantém a interface coerente.
- Preciso de uma ferramenta para começar?
- Não. Um conjunto pequeno de tokens e alguns componentes documentados já resolve. A ferramenta vem depois, quando o uso compartilhado exige.
- Como evitar que cada tela crie o próprio botão?
- O componente precisa cobrir os estados reais e estar disponível no repositório. Quando a tela precisa de algo diferente, a mudança entra no sistema e não em uma cópia.
- Qual responsável mantém o design system?
- Um responsável pela escolha visual e pelo código, com revisão dos usuários. Sem responsável, o conjunto perde consistência na primeira pressa.
Para continuar
Recursos relacionados
Artigo
Nielsen Norman Group: design systems
Apresenta a estrutura e o valor de um design system.
Abrir recursoDocumentação
Atomic Design
Descreve a composição de componentes em níveis.
Abrir recursoAplicação na formação
Vibe Coding: Do Zero ao MVP
Na Formação Vibe Coding, o design system orienta o agente sobre cores, espaçamento e componentes antes de gerar uma tela.
Conhecer a formação
Fontes consultadas
Referências deste verbete
Este verbete ajudou você?
Obrigado pela resposta. Ela fica salva apenas neste navegador.