Leandro de Medeiros

Trabalhos

Mandala DS: um design system para 6 produtos

Criei e mantenho o Mandala DS, design system da Sittax, com tokens e componentes reutilizáveis, para que qualquer pessoa do time construa telas no mesmo padrão.

Função
Senior UX Designer
Empresa
Sittax
Período
2024 até hoje
Time
Design, com os times dos 6 produtos
Logotipo do Mandala DS ao lado do painel de variáveis do Figma, com coleções de primitivos, tokens e tema, e variáveis de borda e espaçamento
Variáveis do Mandala DS no Figma, organizadas em primitivos, tokens e tema.
  • 60%menos tempo de desenvolvimento por produto, aproximadamente
  • 6produtos usando o mesmo sistema

Contexto

A Sittax tem 6 produtos para escritórios de contabilidade e profissionais da área fiscal. Para manter a consistência entre eles e acelerar as entregas, o design precisava escalar além de telas desenhadas uma a uma. A solução foi um sistema que o time inteiro pudesse usar.

O que eu fiz

  • Tokens e componentes. Defini tokens de cor, tipografia e espaçamento e uma biblioteca de componentes reutilizáveis, com atenção especial aos padrões que mais aparecem em software fiscal: formulários, navegação e apresentação de dados em tabelas.
  • UI kit. Montei o UI kit no Figma como fonte única de verdade para design e desenvolvimento.
Menu lateral do Sittax Simples nas versões clara e escura, com os mesmos itens e ícones
O mesmo componente de menu nos temas claro e escuro, gerados a partir das mesmas variáveis.

Por que isso importa agora

Com IA, qualquer pessoa do time consegue gerar uma tela em segundos. Sem um sistema documentado, cada tela gerada inventa o próprio visual e o produto vira uma colcha de retalhos. Com tokens, componentes e regras escritas, a IA passa a gerar dentro do padrão, e a revisão de design se concentra no que importa: o fluxo, as exceções e a acessibilidade.

Resultado

O design system é usado pelos 6 produtos da empresa e reduziu em cerca de 60% o tempo de desenvolvimento de um produto.