Construindo um
Design System escalável
ÁREA
Design System
responsabilidades
- Entrega do Design System
- Documentação do projeto
- Trabalho paralelo com desenvolvedores
ano
2023-2024
Ferramentas
Figma, Storybook
Desafios
No complexo cenário do desenvolvimento de produtos digitais, garantir consistência e eficiência na entrega é crucial. Para enfrentar esse desafio e começar o seu produto com o pé direito, a ZeroZ optou por criar um Design System abrangente.
🏁
Começar do absoluto zero
A ZeroZ encontrava-se em seus estágios iniciais de criação, no início do desenvolvimento de seu produto para soluções de monitoramento.
👨🏻💻
Garantir qualidade e usabilidade
Não apenas proporcionar uma experiência visualmente atraente, mas também ter um Design System acessível e fácil de usar.
🎨
Identidade visual para o produto
Estabelecer uma identidade visual para o Design System, com um foco especial na escalabilidade para um modelo white label.
📝
Documentação para consistência
Elaborar uma documentação abrangente com o objetivo de permitir que equipes futuras utilizem a biblioteca de forma consistente e livre de erros.
Resultados
28
estilos de cores criados para dar vida e harmonia ao sistema
+40
componentes desenvolvidos para a biblioteca do Design System
152
tokens primitivos para garantir escalabilidade e consistência
Testes, rascunhos e muita exploração
Trabalhamos por meio de referências, pesquisas e esboços, realizando testes nas cores para garantir funcionalidade e acessibilidade.
Também analisamos os componentes para assegurar a harmonia dentro da biblioteca, tudo isso para aplicar qualidade e consistência no design.
Tokens como base de todo o projeto
A base essencial do design system está nos tokens, que servem como blocos base de construção. Esses tokens começam com os primitivos, que são essencialmente os valores base.
Os tokens primitivos são utilizados para alimentar os tokens semânticos. Dessa forma, os tokens semânticos desempenham o papel de alimentar os componentes do Design System, dando significado e consistência.
Veja ao lado como os tokens funcionam, formando a base do sistema, facilitando a criação e manutenção dos componentes ao longo do tempo.
Biblioteca de componentes no Figma
Cada componente criado no Figma foi cuidadosamente desenvolvido com foco em escalabilidade e fidelidade, incluindo considerações detalhadas para estados, variações e tipos individuais.
A biblioteca foi projetada de maneira simples e prática, refletindo a ideia central de ser facilmente acessível e utilizada por qualquer pessoa.
Acessibilidade nos componentes
Todos os componentes foram projetados para serem acessíveis por meio do teclado, utilizando o modo de foco do próprio CSS.
As cores foram cuidadosamente escolhidas para garantir que atendam aos critérios mínimos de contraste em todos os cenários de uso. O texto, por exemplo, segue a relação de contraste entre primeiro e segundo plano de pelo menos 4.5:1 (AA).
Além disso, o tamanho das áreas interativas, seja por clique ou toque, foram configuradas para ter no mínimo 24x24 pixels de espaçamento (AA), promovendo uma experiência de usuário facilitada.
Construção de componentes flexíveis com “slots”
Ao empregar "slots components" em todos os elementos que podem e devem ser substituídos, como tabelas e colunas, asseguramos que não seja necessário recorrer ao comum "detach" nos componentes.
Essa abordagem preserva a fidelidade em todas as instâncias, proporcionando uma flexibilidade no processo de substituição, sem comprometer a integridade dos elementos.
Visando escalabilidade
O Design System foi construído para integrar e adaptar-se a diversos temas e modos. Inicialmente, foram desenvolvidos os modos light e dark como configurações padrão, mas que podem ser facilmente personalizados.
Quanto ao tema, o projeto foi estruturado para suportar futuras expansões, como a introdução de uma nova marca.
Essa flexibilidade torna-se especialmente valiosa para a ZeroZ, prevendo possíveis cenários de crescimento, inclusive a transição para um modelo whitelabel. Isso garante uma capacidade de adaptação eficiente e prepara o sistema para evoluções na identidade da marca.
Componentes prontos para protótipos
Todos os componentes foram prototipados com animações incorporadas em seus estados.
Com essa configuração inicial, a criação de protótipos de alta fidelidade torna-se mais fácil e ágil, uma vez que a base está pronta, contribuindo para a velocidade e eficiência no desenvolvimento.
Documentação completa para desenvolvedores e designers
É crucial reconhecer que, para estabelecer uma organização eficiente, a documentação desempenha um papel fundamental. Sem ela, todo o esforço investido na criação do Design System pode ser comprometido.
Nesse sentido, todos os componentes e tokens foram adicionados no Figma e também no Storybook, incluindo suas variações, tipos, estados e demais especificações. Essa medida não apenas preserva a integridade do Design System, mas também proporciona uma referência abrangente para a equipe, garantindo consistência e compreensão plena de cada elemento.
Templates
como padrões
Foram criados templates específicos para acelerar a construção de aplicações e servirem como padrões consistentes.
Eles abrangem exemplos de páginas, layouts, estados vazios e mais, proporcionando uma base consistente e eficiente.
Retrospectiva
Construir um Design System, o "produto" do produto, não é nada fácil e exige muita colaboração, entre design e código e entre pessoas.
Com toda certeza, esse foi o projeto que mais me dediquei a aprender e entender sobre a área de desenvolvimento. Isso é de extrema importância para que eu consiga continuar trabalhando em alto nível.
Como próximos passos, continuarei empenhado em garantir a correta implementação dos componentes. Também seguirei atuando em conjunto com o time de desenvolvimento para aprimorarmos ainda mais a documentação do projeto.
Outros projetos
Confira também
Vamos conversar 🙃
Se você quiser falar sobre um projeto em potencial ou apenas dizer oi, me envie um e-mail.
© 2024 · Augusto Metz