Design System
Construindo um Design System para 46 aplicações
Um sistema compartilhado de componentes e tokens deu às equipes web e mobile uma forma mais segura de manter a consistência e evoluir.
Problema
Múltiplas aplicações web e mobile precisavam de uma base compartilhada que aproximadamente 108 engenheiros pudessem adotar sem transformar a consistência em um gargalo.
Restrições
O sistema precisava oferecer 32 componentes, atender ao contraste de cores WCAG AAA e fornecer testes de regressão visual e versionamento semântico para 46 aplicações.
Decisão e implementação
O Design System usava Style Dictionary para tokens de design, testes de regressão visual para dar confiança à UI e versionamento semântico para definir os limites das releases. Codemods de migração feitos com jscodeshift cuidavam das mudanças repetitivas, enquanto documentação, ferramentas, suporte e skills de IA ajudavam as equipes a adotar o sistema.
Trade-off
A padronização só funciona quando as equipes têm um caminho de migração. Codemods e versões explícitas reduziram o custo da mudança, sem exigir que cada aplicação migrasse manualmente.
Impacto e aprendizado
O sistema com 32 componentes era usado em 46 aplicações web e mobile por aproximadamente 108 engenheiros. Um Design System também é um produto de enablement: a adoção depende das ferramentas e do suporte ao redor dos componentes.