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?

Comments