
Bootcamp Design Systems na Meiuca. Conhecimento escalável na prática.
Não é só sobre manter a consistência e escalabilidade, é sobre mudança de mindset.
Ultimamente muito tem se falado sobre Design Systems e da importância desse "produto" dentro das empresas.
Nesse último final de semana (01 de 02 de Setembro) tive a oportunidade de fazer parte da turma 2 do Bootcamp de Design System da Meiuca, um laboratório de design voltado exclusivamente para o desenvolvimento de Design em escala. Mesmo já tendo lido inúmeros artigos sobre o tema, e participado do desenvolvimento de alguns DS, muitas dúvidas ainda pairavam no ar.
Nada melhor que resolver essas dúvidas com quem lida com isso no dia-a-dia, errou bastante, aprendeu e agora quer compartilhar toda essa experiência.

Dia 1
O primeiro dia foi basicamente teórico, mas nem por isso chato. Ficou bem claro a importância de escalar o design e os benefícios que isso traz para a saúde do time e do produto e que administrar inúmeras interfaces depois de um tempo pode se tornar uma tremenda dor de cabeça. Eles deixaram bem claro que Design System não é library no sketch e nem atomic design, é algo complexo, dá um trabalhão enorme que envolve muita gente e muito planejamento.
Faça pela necessidade, não pelo hype.
Antes de sair fazendo eles levantaram alguns pontos principais:
1. Ouça seu usuário (todo o time)
2. Entenda sua stack (e talvez repense)
3. Mapeie as suas dores (em especial os gargalos)
4. Recrute padrinhos para o projeto
5. Crie uma estratégia de implementação
6. Balize as expectativas
7. Mensure o esforço hoje, para calcular o ROI amanhã
8. Se coloque metas
..e talvez a mais importante. Eu realmente preciso de um Design System?

Vale destacar também que tudo isso muitas vezes só será efetivo com a mudança de cultura de toda a cadeia de desenvolvimento do produto. A energia deve ser investida na melhora do seu produto e não no polimento de pixels, isso vale pro desenvolvimento também, menos tempo codando as mesmas coisas, mais soluções fodas para colocar o produto rapidamente para teste ou na rua, com consistência e eficiência.
O legal do Bootcamp foi a participação do sócio e Tech Lead da Meiuca Thiago Capelo, que mostrou que Design System apesar do nome não é coisa só pra designer e que quanto mais próximos designers e desenvolvedores trabalharem, melhor pra todo mundo. Quanto mais pessoas de outras áreas se interessarem e participarem do assunto melhor também. A segunda parte do primeiro dia foi uma explicação um pouco mais técnica mais muito esclarecedora.

Dia 2
No segundo dia, foi para colocar em prática todo o conteúdo teórico. Achei a ideia foda demais. Basicamente eles dividiram a turma em 4 grupos o mais multidisciplinar possível (deram sorte de ter alguns devs no Bootcamp) e distribuíram alguns envelopes contendo prints de sites e app de grandes players.
Foi um exercício que causou um certo receio no começo mas que a medida que fomos aplicando a teoria as coisas foram fazendo sentido. Vale aqui a ressalva de o quanto é enriquecedor um trabalho colaborativo e que diferentes pontos de vistas trazem discussões sadias mesmo se tratando de uma exercício de um Bootcamp.(Tive a sorte de cair num grupo muito foda).
A partir de um guia de etapas (discovery, design, desenvolvimento e documentação) a ideia foi listar o componentes, levantar inconsistências e já categorizar semanticamente de maneira que faziam sentido para o produto e para o grupo.
Discovery
Nessa etapa fizemos uma análise do brandbook da marca, aplicação do logo, cores e tipografia. Criamos pela nossa ótica o que seriam os princípios de design (parte importantíssima) e o inventário (parte importantíssima 2). Criamos nosso modo de divisão e recortando partes dos prints da interface que faziam sentido para nossa categorização e organização dos elementos da interface.
Design
Unidades de valor + semântica. Aqui a brincadeira foi ficando interessante. Nós definimos os tokens (o DNA do componente ou a menor parte possível).
- tokens — são replicados em todo o sistema ou interface. Cor, tipografia, espaçamentos, grids, radius, shadow, por exemplo).
- base componentes (componentes que serão sempre usados ou os instaláveis como modais, campo de textos, botões, grids).
- components — (são criados a partir de base components ex: cards de produto).
- modificadores — modificam os base/component e/ou acionam outros tokens.
Definimos também como ficaria a nomenclatura para alguns itens.




Desenvolvimento
Não fizemos essa etapa.
Documentação
A ideia aqui era documentar algo diferente dos componentes. No nosso ponto de vista seria interessante documentar todo o material fotográfico para o site Tripadvisor.
No final do dia cada grupo apresentou o processo de aprendizado o que foi bem interessante, principalmente por mostrar como a mesma teoria leva a diferentes linhas de raciocínio.

Curti demais o bootcamp e recomendo sem sombras de dúvidas. Depois de muita tentativa e erro e de todo conhecimento adquirido eles criaram um conceito próprio e que esta funcionando muito bem pra eles. Não precisaram replicar nenhuma fórmula mágica pronta o que mostra que leitura e pesquisa é importante para achar a sua maneira de trabalho. No geral o curso é bem completo e aborda tudo de relevante pro assunto. Do principio ao desenvolvimento passando pelo DesignOps, desenvolvimento e workflow. Fiquem ligados no site dos caras ou no Linkedin para as próximas turmas.
Thiago Hassu e Thiago Capelo, valeu demais galera. Parabéns pela coragem de empreender num segmento tão complicado como esse e principalmente por compartilhar o conhecimento e aprendizado da jornada de vocês. Sucesso!
