Design Systems

Biblioteca de Componentes Reutilizáveis com React

Marcelo Dapper (@mdapper)

Design System

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."

UXPIN.COM

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)."

MEDIUM.MUZ.LI

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."

CSS-TRICKS.COM

Benefícios

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

Exemplos

Material

Polaris

Observações

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

Componentes reutilizáveis

O que entra?

Cores

Tipografia

Iconografia

Temas

Componentes

Alertas

Anchor

Botões

Inputs de texto

Controles de seleção

Ferramentas para criar os Componentes

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

Referências

Perguntas?