APP e WEB
Trabalhar com Design System é um exercício diário de equilíbrio e governança. Sem um processo bem definido, corremos o risco de criar componentes que já nascem datados ou, pior, que não resolvem as dores reais de quem vai utilizá-los na ponta.
Para mitigar esse risco, desenhei um fluxo de trabalho estruturado para garantir consistência e usabilidade.
Onde
Inter, Nike Brasil e Centauro
Meu papel
Product designer & Design System OPS
Quando
2022
Quando comecei a estruturar esse processo, busquei referências que unissem agilidade com profundidade. E nessa busca encontrei o Lean UX e o modelo dos 6 Ds.
Combinando essas duas metodologias o resultado foi um processo de design cíclico. Nele, encaro os componentes não apenas como elementos visuais estáticos, mas como features vivas de um produto maior: o Design System. O framework final ficou assim:
Tudo começa com uma pergunta essencial: "Nós realmente precisamos criar isso?". Para evitar o inchaço do sistema, utilizo um fluxograma de decisão. Ele me ajuda a definir se a necessidade justifica um novo componente e onde ele deve morar: no Design System Global ou em uma biblioteca local de uma unidade de negócio específica.
Validada a necessidade, mergulho no contexto de uso. Um exemplo prático: no Inter, um único card de produtos era utilizado em 24 contextos diferentes, vendendo itens distintos. Ao redesenhar esse componente, precisei garantir que a nova arquitetura suportasse essa escalabilidade sem quebrar a experiência em nenhum dos cenários.
Em casos de redesign, os dados são meus aliados. Observo as métricas de uso da biblioteca no Figma, focando especialmente na taxa de detachment. Essas métricas são ótimas para medir adoção e também podem anteceder uma entrevista com os PDs para saber o que eles acham não esse componente relevante.
Além de tudo isso, olhar métricas dos componentes que estão no ar e observar os testes de usabilidade onde eles estavam presentes também ajuda muito a identificar possíveis problemas.
Antes de abrir as ferramentas visuais, crio wireframes de baixa fidelidade para validar a estrutura e a hierarquia da informação, sem a distração estética. Com a estrutura definida, escrevo uma especificação detalhada de cada elemento.
Essa documentação prévia é crucial para alinhar expectativas com os desenvolvedores, antecipando limitações técnicas de código antes de investirmos tempo no visual refinado.
Começo essaa etapa buscando inspiração em sites como Dribbble e Behance e em outros design systems como Material, Cosmos, Tangram etc. O objetivo é entender os padrões mentais já estabelecidos para aquele tipo de interação.
Após fazer o benckmark vou para a parte de exploração visual onde permito-me testar várias possibilidades. Como eu ouvi uma vez na série Abstract:
Você tem que passar do limite para saber que passou.
— Ian Spalter
Por isso crio variações visuais sem me prender inicialmente a restrições, buscando a melhor experiência possível.
Para fazer as microinterações utilizo a funcionalidade de Interactive Components do Figma para prototipar e documentar estados e transições. Isso não só enriquece a entrega, mas facilita o trabalho dos PDs na hora de prototipar suas telas.
Por fim, apresento a proposta em rituais de Critique com o time de Design. É o momento de testar a robustez da solução sob diferentes óticas e validar se a construção das variantes é intuitiva para quem vai usar a biblioteca diariamente.
Inicio essa etapa refinando o componente final utilizando Props (propriedades) booleanas e de instância para reduzir a complexidade e o número de variantes. Nomes intuitivos são essenciais aqui para garantir a usabilidade da biblioteca.
Após refinar o componente crio a documentação de anatomia, "traduzindo" o visual para a linguagem dos desenvolvedores através dos Design Tokens (espaçamento, cor, tipografia, etc). Esse tipo de documentação ajuda os desenvolvedores a compreenderem a estrutura do componente final.
Por fim, não basta entregar o componente; é preciso ensinar a usar. Crio uma documentação visual com exemplos de aplicação e boas práticas.
Em parceria com o time de UX Writing, defino também as diretrizes de conteúdo, garantindo que o componente mantenha sua integridade e acessibilidade independente do texto inserido pelos designers.
