Overview
Contexto
O produto contava com diferentes telas, fluxos e padrões visuais criados ao longo do tempo, o que gerava inconsistências na experiência e dificultava a colaboração entre design e desenvolvimento.
Para tornar o processo de criação mais eficiente e garantir maior consistência entre as interfaces, surgiu a necessidade de estruturar um Design System baseado no Ant Design, adaptando seus componentes, padrões e tokens à identidade visual e às necessidades específicas do produto.
Desafio
O principal desafio era criar uma base visual e funcional que pudesse ser reutilizada por designers e desenvolvedores, reduzindo retrabalho e aumentando a velocidade de entrega.
Além disso, era necessário equilibrar dois pontos importantes: aproveitar a robustez do Ant Design como biblioteca base e, ao mesmo tempo, personalizar seus componentes para que eles refletissem a identidade do produto, os critérios de usabilidade e as necessidades reais dos times.
Meu papel
Atuei na estruturação do Design System, contribuindo para a análise dos padrões existentes, organização da biblioteca no Figma, adaptação dos componentes do Ant Design, definição de regras de uso e documentação para apoiar designers, desenvolvedores e stakeholders.
Processo
Diagnóstico e inventário
O primeiro passo foi analisar as telas existentes para identificar padrões visuais, componentes repetidos, inconsistências de espaçamento, cores, tipografia, botões, formulários, tabelas e estados de interface.
Definição da estrutura do Design System
Com base no diagnóstico, organizei a estrutura do Design System em camadas: fundamentos visuais, tokens, componentes, padrões de uso e documentação.
Essa organização permitiu separar o que era base visual do produto, como cores, tipografia e espaçamentos, do que era componente reutilizável, como botões, inputs, selects, modais, tabelas, cards e feedbacks
Construção da biblioteca no Figma
A biblioteca foi organizada no Figma com componentes reutilizáveis, variantes, propriedades e estados de interação. O objetivo era facilitar o uso pelos designers e evitar que cada tela fosse construída de forma manual ou inconsistente.
Documentação e guidelines
A documentação incluiu regras de aplicação, exemplos corretos e incorretos, estados de erro, vazio, carregamento, hover, foco, desabilitado e validações necessárias para apoiar tanto o time de design quanto o time de desenvolvimento.
Validação com designers e desenvolvedores
Durante o processo, as decisões foram discutidas com designers, desenvolvedores e stakeholders para validar a clareza dos componentes, a viabilidade técnica e a aderência às necessidades do produto.
Entregas
Tokens de design
Padronização de cores, tipografia, espaçamentos, bordas, sombras e estilos visuais.
Biblioteca de componentes no Figma
Componentes reutilizáveis, organizados com variantes, propriedades e estados.
Governança do sistema
Definição de critérios para criação, atualização e manutenção de componentes.
Antes x Depois
Light e Dark mode
Resultados
Mais consistência entre telas e fluxos
A criação de uma base única reduziu variações visuais e fortaleceu a identidade do produto.Redução de retrabalho
Com componentes reutilizáveis e documentados, designers e desenvolvedores passaram a evitar soluções duplicadas para os mesmos problemas.Maior velocidade na criação de interfaces
O uso do Ant Design como base, combinado com componentes customizados no Figma, acelerou a construção de novas telas e fluxos. Tempo médio de desenvolvimento de tela: 1 dias máximo.Melhor alinhamento entre design e engenharia
A documentação dos componentes, estados e regras de uso facilitou o handoff e reduziu dúvidas durante a implementação.Base mais escalável para o produto
O Design System passou a funcionar como uma estrutura viva, preparada para evoluir conforme novas necessidades surgissem.