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.

Beto Lima
Beto Lima
Sep 6, 2018 · 5 min read

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.

Designer e Developers trabalhando juntos

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).

Definimos também como ficaria a nomenclatura para alguns itens.

Exemplo de Tokens de Tipografia
Exemplo de Base Component
Exemplo de Components formado por base Components
Exemplo de Modificadores

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!

Beto Lima

Written by

Beto Lima

UX/ UI designer @ifood

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade