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
Fui a pessoa que mais transitou entre áreas dentro do time. Entrei como desenvolvedora, mas desde o início ficou claro que eles queriam alguém que também atuasse com design — e foi exatamente isso que aconteceu.
Nos primeiros meses, fiquei quase integralmente com o time de research. Foi intencional: era minha primeira experiência prática com design e queria aprender o processo completo antes de entrar como PD. Foram meses de pesquisas, dinâmicas, roteiros, análises, transcrições de entrevistas. Aprendi a mesclar testes com entrevistas — usando ferramentas como Maze junto de conversas qualitativas — porque percebi que era a forma mais honesta de coletar feedback: alguns usuários adoravam a interface mas mal conseguiam completar os fluxos, enquanto outros reclamavam de mudanças mas acertavam tudo de primeira.
Com o tempo, fui assumindo mais tarefas de PD: inventário, discovery, documentações, propostas visuais, testes, iterações e handoff. Fazia design critique com frequência e gostava. Também organizei e apresentei onboardings para novos designers, fui host de vários eventos do hub — onde conheci designers relevantes do Brasil e de fora — e apresentei temas em alguns deles.
Uma das minhas responsabilidades mais específicas foi a acessibilidade. Percebi que os desenvolvedores do PO-UI resistiam às diretrizes de acessibilidade não por má vontade, mas porque ninguém estava explicando os porquês. Fiz um trabalho manual, conversando individualmente com cada dev — mostrando que ajustes simples permitiriam que pessoas cegas acessassem os produtos, que havia impacto real nisso. A resistência foi diminuindo. Depois levei isso para os eventos do hub, e a cultura foi mudando aos poucos. Durante todo o tempo que estive lá, cuidei da inclusão de critérios de acessibilidade — como aria-label — nos documentos de handoff, algo que antes não acontecia sistematicamente.
Também mantive o repositório de Web Components do Animalia DS — sem documentação, com muito código depreciado — e fui atualizando e adicionando componentes ao longo do tempo.
No último ano, participei do Projeto Júpiter: a iniciativa de padronização de interface dos maiores produtos da TOTVS (Protheus, Datasul e RM). Fui a primeira PD do time que foi alocada no projeto sem ter sido contratada especificamente para isso. Trabalhei com stakeholders sênior, participei de testes e ajudei a construir algumas interfaces. Quando alguém da equipe tirava férias, eu cobria.
Circulei por tudo o que pude enquanto estive lá — e era consciente disso. A maioria do time preferia ficar dentro da sua área. Eu preferia o contrário.
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
O Copilot reduziu o tempo de auditoria de tokens de cerca de 30 minutos por tela para menos de 5 segundos — e acabou identificando erros que revisões manuais consistentemente deixavam passar, incluindo problemas na própria biblioteca de ícones do Animalia. 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:
- Plugin Animalia Copilot adotado por 50+ designers, reduzindo auditorias de 30 minutos para menos de 5 segundos por tela
- Maior consistência visual entre os produtos da TOTVS — design system afetando 100% dos produtos da empresa
- Redução de ambiguidade entre design e engenharia, com critérios de acessibilidade (WCAG) integrados ao handoff
- Adoção mais segura de tokens e padrões, com erros identificados automaticamente antes do desenvolvimento
- Evolução contínua de componentes em escala, com repositório de Web Components atualizado e documentado
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 design system ou escala
Se o seu time enfrenta dificuldades com adoção, consistência, documentação ou a distância entre design e engenharia — podemos conversar.
