Azion Design System
Figma, Design Tokens, Zeroheight, arquitetura de componentes, tipografia Roboto, sistema de cores semântico, iconografia, plugins de Figma
O design system por trás do console que os clientes usam para rodar suas aplicações: o primeiro conjunto de componentes, padrões e regras que o produto teve.
Desafio
Não havia documentação para consultar. Um time copiava uma tela existente e adivinhava o resto, então o mesmo fluxo saía diferente em cada produto. As regras viviam com poucas pessoas: os designers passavam o tempo revisando e corrigindo fluxos em vez de desenhar, e um engenheiro de front-end não conseguia colocar uma interface em produção sem um deles ao lado.
Solução
Tokens, componentes, padrões e a documentação que diz como aplicar cada coisa, publicada no azion.design. A maior parte das telas era legada, dentro do monolito, então o sistema entrou junto com o roadmap: sempre que uma área de produto era aberta por causa de um cliente, aquelas telas eram refeitas sobre o sistema e puxadas para uma arquitetura modular. Um time próprio de design e front-end cuidava do sistema e do handoff para todos os times de produto.
40+
Componentes documentados
6+
Times de produto construindo com ele
1
Time cuidando do sistema e do handoff
Nenhum cliente acordou com um produto de cara diferente. O sistema chegou um componente por vez, dentro de um trabalho que já ia acontecer de qualquer jeito.
Global Tokens — Figma
As variáveis que sustentam o sistema, abertas no Figma. Cor, espaçamento e tipografia são definidos uma vez aqui e consumidos por todos os componentes.
RTM Components — handoff
A biblioteca como os engenheiros a recebem: variações, estados e as notas que dizem quando cada um se aplica.
Projeto
Azion Design System
Cliente e papel
Design Director
Ano
2021-22
Tecnologias
Figma, Design Tokens, Zeroheight, arquitetura de componentes, tipografia Roboto, sistema de cores semântico, iconografia, plugins de Figma
Créditos