Alexandre Klostermann
Escovando Bits #29··50 min

Lições aprendidas na criação de um design system

Design system não é pintar botão. É trocar 400 botões de verde pra azul sem estragar o clique automático do usuário.

Alexandre Klostermann
Alexandre Klostermannco-host do Escovando Bits · CTO na Alva
Player · episódio no Spotify. Ouça sem sair do site.

Com o Jean Farias (tech lead de front no Asaas), o papo é criar um design system do zero. O Jean conta a saída do antigo Icarus (baseado em Bootstrap 3, com classe em cascata que ninguém documentava) pro novo Atlas, em Web Components com Lit pra funcionar em Angular, React e JavaScript puro. O fio é migrar tela sem quebrar a experiência de quem já usa: teste A/B, liberação parcial, pesquisa de satisfação e mapeamento de fluxo. A lição: a migração só emplacou quando envolveram mais gente desde o começo.

Pontos altos:

  • O caso dos 400 botões: mudar a cor de ação principal de verde pra azul virou um mapeamento do sistema inteiro, contido na marra com um !important enquanto a regra nova não pegava em tudo.