Conhecendo um design system e construindo na prática — parte 2/4
O famoso “style guide” ou “component sheet” é um aliado conhecido do time de design para garantir mais consistência visual de produtos digitais. A questão é que esse ferramental não é um design system.
Conteúdo desenvolvido de forma colaborativa por Gabriella Dias, Jean Michel e Wallace Andrade, do time da Dotz Design.
Há alguns anos, os designers entenderam que trabalhar sem um guia de estilos pode ser muito complicado. Por esse motivo, ter um um style guide orientando a construção de botões, inputs e outros componentes básicos já era uma realidade comum para a maioria dos profissionais de design.
Um style guide ajuda até certo ponto, mas quando começamos a lidar com problemas em escala, vemos que um design system de verdade pode ser uma solução bem mais adequada.
Mas o que é um design system?
Na visão da Meiuca, parceiro que nos ajudou nesse processo, um design system é um ecossistema de bibliotecas com componentes codados a partir de semânticas de design e gestão de estilo centralizada.
Diferente de um guia de estilos, um design system é um produto que existe no código e é disponibilizado a todos os outros produtos da empresa.
Com Design System de verdade, escalamos não apenas padrões visuais, como cores e tipografia, mas também interações, comportamentos, acessibilidade, performance, operações e muitos outros atributos que seriam mais complexos.
O Design System passa a ser um produto, quando deixa de ser apenas do time de design e passa a ser um projeto colaborativo, entre tecnologia, design e produto, servindo de base para todos os outros produtos que existem na empresa.
No fim das contas, um design system de verdade não é só um projeto, mas um produto base que é utilizado pelos demais produtos para melhorar a consistência de todos.
E é aí que a virada de chave começa! 🚀
Primeiros passos, requisitos e visão de futuro
Na Dotz, o primeiro passo para começar a criar o design system foi a análise do cenário da empresa. Para isso, observamos nosso ecossistema digital e começamos a responder algumas perguntas:
- Quantos produtos temos?
- Que tecnologias utilizamos?
- Como compartilhamos padrões entre os produtos?
- Qual a maturidade dos nossos times de design e tecnologia?
A partir dessas respostas, elaboramos uma visão de futuro para nossos produtos digitais. Sabendo onde queríamos chegar, começamos a traçar uma rota de execução, tendo o design system como um dos principais catalisadores desse processo.
A construção do nosso Design System
Nossa construção começou com um inventário de componentes. Essa é uma etapa que garante uma visão de todos os nossos produtos, fazendo que nossa primeira versão de DS seja capaz de atender a maioria dos cenários existentes.
Seguindo uma arquitetura preparada para escalar e atender diversos times, iniciamos a construção do Dharma, projetando desde nossos tokens mais básicos até os primeiros componentes que fariam parte da nossa biblioteca principal.
Nessa etapa, o objetivo era ser rápido, enxuto, simples e ágil. E para tirarmos a primeira versão do papel, elegemos um primeiro e pequeno grupo de tokens.
A ideia era já ter algo pronto para ser testado pelo time de design, para que esse uso nos fornecesse insights de melhorias.
Após a primeira entrega, nosso time de design começou a fazer uso da biblioteca, mesmo que ainda não estivesse totalmente disponível em código.
Por conta do calendário corrido, não tivemos um extenso treinamento com a equipe, e o uso da primeira versão do Dharma aconteceu de maneira intuitiva e orgânica.
Esse uso nos proporcionou muito aprendizado, que utilizamos para refinar nossa biblioteca e documentação.
Um dos aprendizados mais relevantes é que precisávamos ter o time de tecnologia mais envolvido para evitar divergências entre o que era entregue pelos designers e o que era promovido em produção para o cliente final.
Aprendemos que um design system é uma ferramenta poderosa, mas que o time precisa estar capacitado para utilizar com eficiência. Só assim podemos colher todos os benefícios que um design system pode proporcionar.
No final dessa etapa, entendemos também que precisávamos investir mais na capacitação dos times e detalhamos esse desafio em do próximo artigo!
Este é o segundo de uma série de 4 artigos sobre o design system da Dotz. Leia os outros artigos da série sobre o Dharma:
- Como desenvolvemos o Dharma, o design system da Dotz
- Conhecendo e construindo um design system na prática
- Evangelizando a Dotz e capacitando o time sobre design system
- Como estruturamos um time de design system na Dotz
