O desafio era encontrar novas oportunidades para otimizar a forma de trabalho da equipe - desenvolvedores, PM's, PO's e BO's. Focamos em eliminar as inconsistências que poderiam ocorrer quando as equipes estivessem trabalhando em projetos diferentes.

Abordagem

Tive a oportunidade de construir e gerenciar um Design System pela primeira vez, enfrentando como principal desafio a sincronização entre design e desenvolvimento.

O sistema foi concebido com uma abordagem modular, baseada em blocos reutilizáveis que podem ser combinados e adaptados para criar rapidamente novas interfaces. Esse modelo não apenas acelerou o processo de design, como também garantiu consistência visual e funcional em toda a experiência do usuário.

Solução

Definimos um conjunto inicial de componentes com comportamentos básicos para a primeira iteração do Design System. Após o lançamento da primeira biblioteca, passamos por um face-lift que exigiu atualizações visuais nos componentes. Esse momento também se revelou uma oportunidade valiosa para revisar a forma como os componentes estavam estruturados, já que enfrentávamos dificuldades em atualizações e na aplicação modular dos elementos.

Apesar de existir outras metodologias famosas (por exemplo Atomic Design), a versão inicial veio como uma estrutura simples e intuitiva: Fundamentos (cor, tipografia, espaçamento, iconografia) e Componentes (blocos funcionais da interface).

Essa abordagem favoreceu a rápida adoção entre diferentes perfis da equipe: designers, researchers, desenvolvedores front-end, UX writers e product managers passaram a falar a mesma linguagem. O resultado foi uma integração mais ágil do sistema de design ao fluxo de trabalho e aos produtos.

Oportunidade

Para a construção do Design System, utilizei como base o Carbon Design System, da IBM — uma biblioteca gratuita e de código aberto. Considerando o prazo apertado e as tecnologias envolvidas no projeto, essa escolha se mostrou estratégica, permitindo maior tração e agilidade nas entregas desde o início.

Evolução e processos

Mais do que construir uma biblioteca de componentes, um dos principais objetivos enquanto liderava o Design System era simplificar a forma como a equipe de design — e os demais times envolvidos — trabalhavam e evoluíam juntos. Para isso, adotei o Vanilla Framework Design como apoio na tomada de decisões relacionadas a atualizações e evolução das bibliotecas, contribuindo para maior consistência e escalabilidade no sistema.

Off

Em um primeiro momento, considerando o déficit técnico e a limitação de tempo, optamos por utilizar a biblioteca de ilustrações 👉 Humaaans — gratuita e integrada ao Figma por meio de plugin. Essa escolha permitiu compor rapidamente uma identidade visual coesa e acessível, sem comprometer a qualidade das entregas.

Dead Cat Bounce

A documentação dos componentes foi um processo contínuo, conduzido em conjunto pelos times de design e desenvolvimento. Inicialmente, o conteúdo era registrado e gerenciado diretamente nos arquivos do Figma. Embora prático, esse formato dificultava a leitura e a localização rápida de informações.

Para resolver esse problema, estruturamos uma documentação no estilo "software wiki" utilizando o Notion, tornando o material mais acessível, organizado e fácil de navegar. Essa mudança facilitou o alinhamento entre as equipes e otimizou a adoção do Design System no dia a dia dos times.