O que é um Design System?

"É o conjunto completo de padrões de design, documentação e princípios, juntamente com o kit de ferramentas de design e código para atingir esses padrões."

O que é um Design System?

"São essencialmente coleções de regras, limitações e princípios, implementados no design e código. Esses 3 atributos servem para funções distintas, provém coerência e ordem em sistemas, desde botões até aplicações de única página (SPAs)."

O que é um Design System?

"Tudo que faz seu produto - Desde tipografia, layout e grids, cores, ícones, componentes e convenções de código, até voz e tom, style-guide e documentação, um design system agrupa tudo isso de uma forma que permite seu time inteiro aprender, construir e crescer."

Benefícios

• Velocidade ao criar interfaces
• Facilita comunicação
• Consistência

Material

https://material.io/

Polaris

https://polaris.shopify.com/

Observações

• Os design systems são construídos de formas diferentes
• Construa de acordo com as necessidades do seu projeto
• Comece aos poucos

O que entra?

Cores

Tipografia

Iconografia

Temas

Componentes

Alertas

Anchor

Botões

Inputs de texto

Controles de seleção

React

• Usa Typescript (parecido com microbundle)
• Usa Rollup para exportar em CJS & ESM (UMD opcional)
• Vem com "treeshaking" e "minification/compression"
• Live reload / watch-mode
• Funciona com componentes React
• Jest
• ESLint

• Permite criar componentes isoladamente
• Documentar como usar o componente
• Gerar styleguide dos componentes

Docz

CI/CD

• Testes (Travis, Github Actions, etc)
• Fazer o build e publicar styleguide (Netlify, Zeit, etc)
• Publicar no NPM novos releases (Travis, Github Actions, etc)
• Dependabot manter dependências atualizadas
• Sourcelevel para fazer análise de código

REPO