Desafios de criar um Design System do zero
Pra que utilizar design system sendo que eu posso criar tudo no meu projeto
Como é maneiro dar vida pra uma ideia né? Nos últimos meses aqui na Cuponomia tivemos grandes desafios técnicos, vou resumir o que rolou e irei dividir em dois posts, neste vou falar sobre Design System .
Contexto
Na minha ultima empresa eu cheguei a trabalhar em um design system, mas ele já estava bem consolidado. Ja tinham diversos guidelines, workflow, tinha a a esteira de desenvolvimento as motivações, tudo bem definido uma documentação pronta.
Criar um do zero é diferente e extremamente desafiador.
- Convencer as pessoas que faz sentido ter um design system.
- Onde se basear para se ter um norte.
- O que irá conter na v0 do DS
- Quem vai tocar essa nova frente.
- Qual vai ser a fonte da verdade, ou seja o local onde a gente vai consultar para saber "quem está certo"
- Comunicação designer x Dev
Essas questões foram algumas que enfrentamos durante o processo. Isso que a gente nem chegou a falar tecnicamente. O necessário é tentar prever os problemas antes de acontecerem, ter um bom planejamento. Mostrar que é importante a gente bater cabeça agora pra ficar mais fácil na frente.
Em etapa de desenvolvimento após o design pronto, fizeram um trabalho bem legal utilizaram figma em conjunto com supernova para documentação ficou bem interessante. Mas aqui é um ponto crucial a comunicação com os devs era um ponto chave, verificar as necessidades técnicas para fazer o componente indo além do figma.
Como iriamos distribuir essa fonte de verdade para os 3 produtos que temos, (site, app, extensão). Para evitar o maior numero de retrabalhos, deixar o mais padronizados possível e escalável.
Nossa prioridade foi deixar o mais simples de mexer e escalar. Então antes de sairmos fazendo componentes feito loucos, deixamos de lado esse pensamento maker para um think first. Esses termos são só meus e não sei se existem de verdade mas de fato planejamos como seria o melhor system design a seguir. Decidimos ter um local onde consumia a documentação dos designers para os nomes dos tokens.
A gente consumia e exportava para os variados tipos de plataformas que temos no caso a lib Style Dictionary salvou esse processo. Onde a gente não mexe em nada dos famosos tokens, ou seja fica tudo mais simples de atualizar por parte do designer.
A nossa equipe trabalha com vue 3, depois de exportados os tokens, apenas definimos o guideline para a pasta dos componentes, que seguiu a seguinte estrutura para nossa v0 componente button teria os seguintes arquivos dentro:
- DSButton.vue
- Button.test.js
- Button.stories.js
E fechamos a conta, conseguimos criar todos os componentes da v0, todos os componentes cobertos por testes e documentados. Para isso usamos, Vue 3, Vitest, Storybook.
Gostaria de escrever mais sobre o processo, falar mais tecnicamente, mas gostaria de saber de você, quais as dificuldades que você enfrenta ou já enfrentou que marcou o seu caminho no DS?