O Design System nasceu para resolver o problema da falta de padrões dos times autonomos, é um produto capaz de padronizar a forma de como deselvolvemos e evoluimos os produtos digitais.
Um DS é composto por
Tokens de cores
Tokens de tipografia
Definições de Espaçamentos e bordas
Animações
Grids
Breakpoints
Botões de ações, inputs e etc.
Componentes
Um Ds não é um UI kit entao é possivel ter varios produtos dentro de um DS, alem de uma biblioteca de componentes podemos ter um deadline de ux, de desenvolvimento de acessibilidade
O Ds é um ecosistema que precisa de varias pessoas de varias areas
Boas Praticas
Cada time ter sua propria biblioteca, mesmo que o DS tenham uma biblioteca core. Todo time de produtor ter uma biblioteca propria para que possa ser construir componentes diferentes para o time o que permite cada time usar stacks diferentes (angular,react,vue e etc...) estao consumindo uma biblioteca agnostica como dependencia
Não ter tanta regra de negocio envolvida nos componentes para que sejam facilmente reutilizados
Acessibilidade e testes dos componentes com leitores de tela
Não pode existir sem uma documentação
A nomeação dos tokens sejam mantidas o que foi proposto pelo designer tanto no design quanto no codigo
NVDA: Leitor de tela gratuito para Windows
Exemplos de Design System
Libs que nos auxiliam no desenvolvimento de um DS
https://stitches.dev/ - Stitches é uma biblioteca de estilos de alto desempenho com foco na arquitetura de componentes e na experiência do desenvolvedor. Uma das vantagens de utiliza-la é que a mesma é agnostica a framework isso facilita muito nas migrações se necessárias.
https://www.radix-ui.com/ - Radix é uma biblioteca de componentes de interface do usuário de código aberto para criar sistemas de design acessíveis e de alta qualidade e aplicativos da Web. Uma das vantagens de utiliza-la é o foco em acessibilidade podendo usar esses componentes como a camada base do seu sistema de design ou adotá-los de forma incremental.
Governaça do DS
Onboarding dos times (não liberar para todos usarem de uma vez)
Capacitação
Suporte
Manutenção