7DS - Criando um Design System escalável
Duração
Início: Março 2023
Fim: Janeiro 2024
Habilidades
Atomic Design
Design System
Escalabilidade
Meu papel
Liderei a reconstrução do DS.
Background
O que tomava bastante tempo dos Designers e time de engenharia para qualquer tipo de manutenção ou consulta de componentes da lib.
Considerações
✦ Não havia estrutura Atomic Design
Dificuldades na manutenção de componentes;
✦ Reutilização em diversos projetos
O objetivo do 7DS era ter uma fonte aberta de moléculas que fossem usados em todos os projetos da empresa.
✦ Acessibilidade
Procuramos ao máximo seguir os padrôes de acessibilidade estabelecidos na construção dos componentes e estilos.
Alguns dos elementos do novo Design System, o 7DS. Já contemplando a estrutura Atomic Design.
O processo de Design
Construindo o Design System:
O primeiro passo era fazer um mapeamento de todos os componentes que estavam sendo utilizados nos primeiros dois projetos da Seteloc e reconstruí-los do zero quebrando-os em moléculas e reavaliando os estilos aplicados.
Style Guide
Buscamos por referências do mercado como Adobe Spectrum, Apple HIG (Human Interface Guidelines), Google Material Design, dentre outros. Um dos principais objetivos foi a padronização do DS seguindo princípios de acessibilidade, de acordo com boas práticas da WCAG (Web Content Accessibility Guidelines).
Também criamos um tokens com padrôes de utilização de cores em propriedades de componentes, padding, border-radius e espaçamento.
O guia de estilos do 7DS.
Átomos
A estrutura de átomos no Design System colabora na manutenção e reutilização de componentes pois dá mais liberdade ao designer durante a criação.
Exemplo de "Slot Component" que possibilita o fácil switch de componentes e reutilização.
Moléculas
Exemplo de molécula aplicada a componentização.
Organismos
O tipo mais complexo de componente, como tabelas, o componente mais utilizado em todos os projetos.
O guia de estilos do 7DS.
Iconografia
Biblioteca de ícones.
Adicionei descrição a todos os ícones de forma que facilitasse o time na hora de realizar uma busca no Figma (levando em consideração o contexto).
Biblioteca de ícones.
Para o controle de tamanho dos ícones, criei o componente iconWrapper, que leva em consideração o valor inserido no autolayout para dimensionar o ícone no tamanho desejado.
Conclusão
Durante todo o processo, pude perceber meu amadurecimento, reconhecido tanto pelo time quanto por mim mesmo. Superei desafios em áreas do Design que inicialmente não eram de minha zona de conforto, e agradeço por ter participado ativamente em cada etapa desse projeto. Essa experiência foi fundamental para meu crescimento profissional.
Insights:
Aumento na produtividade e consistência do time de design;
Ao mapearmos todos os cenários e estados dos componentes criados, aumentamos também a produtividade do time de desenvolvimento.