Animalia Copilot
De 30 minutos para cerca de 5 segundos por auditoria de Design System
Projetei e desenvolvi um plugin interno para Figma que automatizou a validação de tokens no Animalia Design System, transformando uma revisão manual e difícil de escalar em um fluxo automatizado e educativo.
- Product Design
- Design Systems
- Figma API
- TypeScript
- IA aplicada
- Meu papel
- Conceito · Product Design · Desenvolvimento
- Contexto
- TOTVS · Governança de UX
- Produto
- Plugin interno para Figma
Impacto em números
O plugin também identificou inconsistências dentro do próprio Animalia Design System, levando o time a corrigir problemas na fonte.
O problema
Manter consistência em um Design System multi-marca exigia muito mais do que verificar se uma cor ou tipografia "parecia correta".
Um valor podia estar visualmente certo e ainda assim ter sido aplicado de forma incorreta: sem vínculo com a variável, usando o tema de outra marca, ou substituindo um token semântico por um valor hardcoded.
A revisão era manual e levava cerca de 30 minutos por tela — e mesmo assim, alguns problemas continuavam passando despercebidos. Validar token por token, variável por variável e tema por tema era lento demais para ser feito com consistência em escala.
O desafio não era revisar mais rápido. Era criar uma forma de governança que não dependesse da memória de cada designer.
A oportunidade
A lentidão e a inconsistência da auditoria manual já eram um problema conhecido pelo time de Governança — não era segredo que o processo não escalava.
Ao acompanhar essas revisões de perto, percebi um padrão: boa parte do que verificávamos manualmente dependia de checagens objetivas e repetitivas — vínculo de variável, tema correto, token semântico certo. Informação que o próprio Figma já continha.
Se essas regras já estavam nos dados do arquivo, não precisavam continuar sendo conferidas uma a uma. A oportunidade era transformar conhecimento de governança em uma ferramenta capaz de:
- detectar automaticamente inconsistências
- apontar exatamente onde estava o problema
- explicar por que aquela aplicação estava incorreta
- indicar como corrigir
A intenção não era substituir a análise do designer, mas tirar do processo aquilo que uma máquina resolvia melhor e mais rápido.
Como desenhei a solução
Eu não queria criar apenas um detector de erros.
Uma mensagem dizendo que algo está errado resolve a auditoria daquele momento, mas não evita que o mesmo erro volte a acontecer.
Por isso desenhei o Animalia Copilot também como ferramenta de educação contínua do Design System. Para cada inconsistência encontrada, o plugin identificava o elemento, explicava o problema, adicionava um comentário no contexto da tela e direcionava o designer para a documentação correspondente.
A correção acontecia dentro do fluxo de trabalho, no momento em que o conhecimento era necessário.
Como a solução funciona
Tela no Figma
Animalia Copilot analisa os elementos
Validação
- O token está vinculado à variável?
- Pertence ao tema/marca correta?
- É a variável semântica correta (não só visualmente igual)?
Problema encontrado
Comentário no elemento + explicação + link para documentação
Da ideia ao produto interno
Desenvolvi o plugin em TypeScript, usando a Figma Plugin API, cuidando do conceito, da experiência e da implementação.
O projeto levou cerca de três meses, construído em paralelo às demandas regulares do time. Ao ser concluído, publiquei a ferramenta na comunidade interna do Figma da TOTVS.
O primeiro desafio depois do lançamento: confiança
Nos primeiros dias, chegaram vários retornos com a mesma percepção: "o plugin deve estar com algum problema — está apontando muita coisa errada."
Não estava. Quando os designers verificaram os comentários com calma, token por token, viram que o plugin estava correto em todos os casos. O que parecia "muita coisa errada" era, de fato, muita coisa errada — só que invisível até então.
Quando o problema estava no próprio sistema
Durante as auditorias, o Animalia Copilot encontrou erros na própria biblioteca de ícones interna do Animalia — uma falha que estava no Design System há algum tempo, sem que nenhuma revisão humana tivesse capturado. Precisamos pausar para corrigir o DS com base no que a ferramenta encontrou.
Governança deixou de ser apenas encontrar erros nos produtos e passou a gerar feedback para corrigir o próprio sistema.
Uma ferramenta que aponta erros no sistema que você construiu é desconfortável. Também é o maior sinal de que ela está funcionando.
Impacto
Eficiência
De ~30 minutos (humano) para ~5 segundos por tela.
Adoção
~50 designers usando o plugin até minha saída da TOTVS.
Qualidade
Encontrou erros que revisões manuais consistentemente deixavam passar.
Governança
Identificou falhas na própria biblioteca do Animalia e gerou uma rodada de correções no Design System.
Por design, o plugin também funcionava como ferramenta de educação contínua: cada apontamento vinha com explicação e link para documentação, ensinando no fluxo de trabalho — um efeito da forma como foi desenhado, não uma métrica medida separadamente.
O que esse projeto me ensinou
Construir uma ferramenta para designers — sendo designer — foi um dos projetos mais tecnicamente e humanamente complexos que já enfrentei.
Automação não substitui julgamento — cria espaço para ele
Ao automatizar verificações determinísticas, o designer pode dedicar mais atenção às decisões que realmente exigem interpretação e contexto.
Uma ferramenta correta ainda precisa conquistar confiança
O lançamento mostrou que precisão técnica não basta. Adoção também depende de transparência e de as pessoas entenderem por que a ferramenta está certa.
O Design System também precisa ser tratado como produto
Quando a ferramenta revelou problemas na própria fonte, ficou claro que governança é um ciclo: os produtos revelam fragilidades do sistema, e essas evidências precisam voltar para sua evolução.
Trabalhando com problemas que precisam escalar?
Gosto de atuar em desafios onde design, produto e tecnologia se encontram — especialmente quando existe complexidade suficiente para exigir mais do que uma boa interface.