Um design system que voltou a pôr o design e o código em sincronia
O que parecia um styleguide era, na verdade, entropia: cada developer a acrescentar o seu próprio hex. Construí um sistema tokenizado em paralelo com a entrega, sem parar o produto, e transformei-o na fonte única de verdade entre o que se desenha e o que vai para produção.
O problema: cada developer tinha a sua própria cor
O que encontrei parecia um styleguide (uma página de cores, fontes e botões), mas era um guia visual, não um sistema: etiquetas vagas, sem nomes de componentes, sem regras de utilização, nada pronto para ser consumido pelo desenvolvimento.
A decisão: construir o sistema sem parar o comboio
A entrega não podia parar para "arrumar a casa", por isso construí o design system em paralelo, um projeto dentro do projeto. Uma premissa: seria construído para o desenvolvimento consumir, não para organizar o Figma.
Cada token foi documentado a dobrar: primeiro a sua gramática, depois a sua especificação completa, com a referência de código ao lado do visual:
type · name · variation → font-heading-h1. Uma convenção de nomes, não uma alcunha.
color-primary-green, #1ABC9C, o dimensionamento do H1) ao lado do visual.A migração de ferramenta fazia parte do sistema
O projeto vivia no Adobe XD, capaz, mas mau colaborador para bibliotecas partilhadas e handoff. Passei-o para o Figma: um sistema só funciona onde toda a equipa o pode consumir. Um segundo designer juntou-se para acelerar a construção.
A prova: quando a biblioteca de dev mudou de versão
O verdadeiro teste chegou quando o PrimeNG migrou para uma nova versão: a equipa atualizou os seus componentes contra o design system, não contra o caos.
Hoje, o que está no design system é o que está no código.
Resultado
1 fonte de verdade
Entre design e desenvolvimento, em uso até hoje
XD → Figma
Migração de ferramenta feita como parte do sistema
PrimeNG sincronizado
O sistema sobreviveu a uma migração de versão completa da biblioteca de dev
Durou mais que a equipa
O conhecimento vive no sistema, não na cabeça de uma só pessoa
Handoff mais curto, menos retrabalho de front-end e decisões de UI que já não recomeçam do zero a cada feature, porque o sistema torna impossível a cor inventada e o componente duplicado.
O que este projeto me ensinou
Que um design system não é um entregável de design: é infraestrutura de equipa. O seu valor não está nas páginas bonitas de documentação, mas no que torna impossível: a cor inventada, o componente duplicado, o estilo que existe num só ecrã.
O momento certo para construir um raramente existe. Construí o nosso em paralelo com a entrega, sob pressão, sem um mandato formal, porque a alternativa era ver a dívida crescer.
Olhando para trás, foi uma das decisões de maior retorno de todo o projeto.
