Visão Geral
A SIA é uma inteligência artificial focada em monitorar senhas vazadas e contas fakes no Instagram de pequenos negócios. Como o produto estava em fase inicial de estruturação, o desafio era criar um design system que fosse simples, escalável e colaborativo — atendendo tanto a experiência do usuário final quanto às demandas do time de front-end.
Contexto do problema
O time da SIA enfrentava desafios com inconsistência visual entre telas, dificuldade de manter padrões na interface e uma dependência alta entre design e desenvolvimento para criar ou atualizar componentes. Com o produto crescendo e novas funcionalidades surgindo, ficou claro que precisávamos de uma base sólida para escalar.
Objetivos
Criar um Design System que atendesse às necessidades reais do produto: simples, claro e colaborativo. A ideia era facilitar a vida do time, garantir consistência visual e permitir que devs pudessem implementar componentes de forma mais rápida e confiável, sem depender do design a cada nova entrega.
Apresentar para a empresa, o valor de estabelecer uma cultura de design system colaborativa entre design e desenvolvimento e a redução de custos que esta frente proporciona.
Alinhamentos
Antes de qualquer definição visual ou técnica, iniciei o processo com uma conversa estratégica com a Head de Produto, os team leads e os desenvolvedores front-end. Como até então não havia nenhuma frente formal de Design System na empresa, esse momento foi essencial para entender o nível de conhecimento do time, levantar expectativas e alinhar diretrizes iniciais
Decisões técnicas
Discutimos boas práticas de nomenclatura de tokens (que será detalhada no próximo tópico), formas de documentação, governança do sistema e o papel de cada área na construção e manutenção do DS. Esse alinhamento inicial criou uma base sólida de colaboração e abriu espaço para encontros semanais com o front do produto e mensais com outros times, onde seguimos evoluindo juntos em decisões técnicas e padrões compartilhados.
Design Tokens
Após os alinhamentos iniciais, propus ao time de desenvolvimento uma estrutura padronizada para a nomenclatura dos tokens, baseada em três níveis: atributo, propriedade e modificador.
Essa lógica facilita a leitura e interpretação dos tokens por qualquer pessoa da equipe, deixando explícito o que aquele valor representa e onde deve ser aplicado. Além disso, essa abordagem torna o sistema mais escalável e sustentável ao longo do tempo, especialmente à medida que novos tokens são adicionados. A escolha desse modelo foi inspirada em boas práticas de design systems consolidados, como o Shopify Polaris e o IBM Carbon, e pensada para garantir compatibilidade com ferramentas como Style Dictionary e Token Studio, utilizadas na integração com o front-end.
Inventário
Com a base de tokens estruturada, avancei para o mapeamento do inventário de telas e componentes utilizados no produto. Esse levantamento foi essencial para entender os padrões visuais já existentes, identificar inconsistências e definir quais elementos deveriam ser documentados e padronizados primeiro. A partir disso, iniciei a organização da documentação no Figma, priorizando os componentes de maior uso e impacto, garantindo uma transição mais eficiente entre o que já existia e o que seria consolidado dentro do Design System.
