Animalia Design System
Design system open source em larga escala na TOTVS
O Animalia sustenta dezenas de produtos em escala dentro da TOTVS, conectando múltiplas marcas, times e contextos de uso em um único sistema.
- Papel
- Product Designer / Desenvolvedora
- Contexto
- TOTVS
- Tipo
- Design System corporativo em produção
Contexto
Trabalhei no Animalia como Product Designer e, em alguns momentos, também como desenvolvedora, dentro do time de Governança de Design. Fui a designer que permaneceu mais tempo dedicada ao sistema — o que me permitiu participar profundamente de todas as suas etapas, da concepção à evolução contínua.
A iniciativa era liderada pelo especialista do time — referência nacional em Design Systems e uma das pessoas mais importantes na minha formação profissional.
Construir um design system em uma empresa do porte da TOTVS envolve desafios únicos:
- Múltiplas marcas convivendo no mesmo ecossistema
- Times distribuídos em diferentes produtos
- Níveis variados de maturidade em design
- Forte dependência entre design e engenharia
- Escala real, com impacto direto em milhares de usuários
O Animalia precisava ser mais do que uma biblioteca visual.
Ele precisava funcionar como uma linguagem comum entre design, produto e tecnologia.
Minha atuação no Animalia
Meu papel foi atuar na linha de frente da construção e evolução do sistema, conectando:
- Design
- Engenharia
- Acessibilidade
- Documentação
- Adoção pelos times
Atuei como responsável por:
- Participar do ciclo completo de criação e evolução de componentes
- Manter e evoluir o repositório de componentes em Web Components
- Ser ponte entre o Animalia e a PO-UI
- Expandir a documentação com critérios reais de acessibilidade
- Liderar grande parte do redesign do portal do Animalia
Redesign do Portal do Animalia
O portal do Animalia é o principal ponto de contato entre o design system e seus usuários — designers e desenvolvedores.
Com o crescimento do sistema, ele passou a concentrar uma grande quantidade de conteúdo técnico, o que começou a gerar fricção:
- Designers tinham dificuldade para encontrar os componentes e diretrizes que precisavam
- Desenvolvedores se perdiam entre exemplos, especificações e padrões
- A navegação deixava de orientar — exigia esforço
A proposta do redesign foi simples na intenção e complexa na execução:
ajudar as pessoas a se orientarem melhor.
Queria que designers encontrassem rapidamente “o que usar” e que desenvolvedores entendessem com clareza “como implementar”.
Para isso, utilizei dados reais de uso — com apoio de ferramentas como o Hotjar — para observar:
- Onde as pessoas mais clicavam
- Onde hesitavam
- Onde abandonavam
- Como percorriam o conteúdo
Esses insights guiaram decisões de:
- Arquitetura de informação
- Hierarquia visual
- Organização por contexto de uso
- Forma de apresentar componentes como decisões, não apenas como peças visuais
O objetivo não era apenas “embelezar” o portal, mas transformá-lo em uma experiência que orienta, ensina e reduz fricção entre design e engenharia.
Animalia Copilot
Uma das contribuições mais marcantes foi a criação do Animalia Copilot.
Um plugin para Figma que ajuda designers da TOTVS a utilizarem corretamente:
- Tokens de cor
- Tipografia
- Espaçamento
- Temas por marca
O Copilot nasceu da combinação entre:
- Compreensão profunda de design systems
- Conhecimento técnico da API do Figma
- Empatia pelas dores reais dos designers
Fui responsável por:
- Conceito
- Design
- Desenvolvimento
- Publicação do plugin
Ver designers utilizando essa ferramenta no dia a dia foi um dos marcos mais importantes da minha trajetória.
Resultados e Impacto
O Animalia hoje sustenta produtos reais em produção.
Meu trabalho contribuiu para:
- Maior consistência visual entre produtos
- Redução de ambiguidade entre design e engenharia
- Adoção mais segura de tokens e padrões
- Evolução contínua de componentes em escala
- Melhoria real na experiência de designers dentro da organização
Mais do que um sistema visual, o Animalia se consolidou como uma base estrutural para produtos em escala.
O que esse projeto me ensinou
O Animalia representa meu período de transição mais decisivo.
Entrei como desenvolvedora em um time de design.
Saí como designer sênior.
Aprendi que:
Consistência é estratégia
Documentação é experiência
Adoção é tão importante quanto criação
Design e engenharia não são áreas separadas — são camadas do mesmo sistema
Se você também está lidando com desafios de escala
Se o seu produto também precisa lidar com múltiplos fluxos, regras de negócio e diferentes perfis de usuário, podemos conversar.
