Vamos começar do começo

Sistema de projeto. Nos últimos anos, este termo está em toda parte. Para nós, designers, a definição e a utilidade de um design system são evidentes. No entanto, para outros membros da equipe, nem sempre é tão claro. 

Se você já sabe o que é um sistema de design, não hesite em pular direto para o parágrafo sobre comunicação.

Em 2018, a Usabilis ofereceu esta descrição: um Design System é como uma biblioteca de componentes (biblioteca), visuais e princípios com código reutilizável. Este kit escalável oferece um repositório de UX e UI para designers e desenvolvedores de produtos e serviços digitais. Ok, mas sem jargão técnico? 

Poderíamos comparar um sistema de design a uma grande cozinha. Há uma abundância de ingredientes e receitas que permitem que você use esses ingredientes corretamente.

Os cozinheiros do sistema de design são os designers (UI e UX) e os desenvolvedores. É para eles que o sistema de design servirá mais. Os designers irão selecionar os ingredientes (criar os componentes), escrever as receitas (fazer os modelos) e fornecê-los aos desenvolvedores que irão cozinhar os pratos (desenvolver os sites, aplicativos, etc.).

Ao utilizar uma cozinha comum, utilizando os mesmos ingredientes e as mesmas receitas, designers e desenvolvedores têm a certeza de ter consistência em todos os pratos entregues na sala (em produção) e acima de tudo ter um resultado desenvolvido muito próximo ou mesmo idêntico ao modelos criados a montante.

E essa nem é a principal vantagem do sistema de design! Com efeito, o seu principal trunfo é a rapidez de execução que possibilita a toda a equipa de produto (designers + devs). Com os componentes já prontos, basta montá-los para criar novas páginas, interfaces,…! Muitas vezes comparamos o sistema de design ao Lego, não é à toa.

O outro benefício principal vem das atualizações de componentes. De fato, estando todos os componentes “conectados” à biblioteca, a atualização de um deles diretamente na biblioteca torna possível atualizar o componente sem esforço onde quer que seja usado. Economiza tempo, economiza esforço (não há necessidade de procurar manualmente onde o componente é usado!), o que mais você poderia pedir?

Disclaimer: para os desenvolvedores, o sistema de design só tem vantagens para a frente. Não tira de forma alguma a complexidade das costas e as regras de gestão.

# Conteúdo

Um sistema de design geralmente consiste em 2 fontes de trabalho. Uma fonte para designers, compatível com os softwares utilizados (Sketch, Figma,…) e uma fonte para desenvolvedores, que apresenta todos os componentes já desenvolvidos, bem como seu código. Em ambos os casos, os componentes presentes nessas fontes podem ser “chamados” diretamente (nos modelos para os designers, ou no código para os devs) o que economiza muito tempo e consistência na realização.  

Quando falamos du design system, na maioria das vezes nos referimos ao dev source porque é o que é usado na produção. Estes são os elementos que ele contém que serão vistos pelos usuários finais. A origem do designer deve ser visível apenas para designers e desenvolvedores.

Mas o que tem dentro? Bem, isto depende. É claro que existem diretrizes, uma infinidade de artigos listando as melhores práticas. Não hesite em não segui-los se eles não corresponderem às necessidades. Além disso, montar um sistema de design é algo muito longo. Fazer tudo de uma vez é complicado. Há, no entanto, elementos importantes para os quais tender, elementos menos primordiais que, no entanto, é bom ter e que podemos acrescentar completamente depois.

Alguns elementos de conteúdo importantes:

• as cores
• tipografia
• grelhas
• os componentes
• as diretrizes para uso de todos os elementos mencionados acima
• o tom a ser usado

Na minha experiência, os principais problemas ao configurar um sistema de design são:

• para a empresa: o custo de instalação e manutenção que será lucrativo a longo prazo
• para as equipes que vão configurar e usar: antecipação da chegada de novos membros na equipe e comunicação designer-desenvolvedor

Aqui vamos nos concentrar no que afeta diretamente as equipes.

Se você está se perguntando o que há de tão especial na chegada de futuros membros, tenho uma pergunta para você. Você já tentou cozinhar na casa de outra pessoa? Em caso afirmativo, você abriu todos os armários e gavetas para encontrar os ingredientes e utensílios necessários? Ficou surpreso por não encontrar um tempero que considera essencial? Para mim, a resposta é sim.

É exatamente o mesmo para o nosso sistema de design. Seja um novo desenvolvedor ou um novo designer que se junte à equipe, ele terá que encontrar o que procura muito rapidamente por conta própria e que as instruções de uso sejam suficientemente claras para permitir que ele use os componentes corretamente . Isso permitirá que nosso novato (vamos chamá-lo de Fred) possa assumir este novo projeto nas melhores condições e sem frustrações.

Depois vem a questão da comunicação. Por extensão da nomenclatura e disposição dos componentes no sistema de design. De fato, para que os membros da equipe (novos ou não) encontrem seu caminho, o sistema de design já deve ser intuitivo.   

Se os membros da equipe usarem vários termos para se referir ao mesmo componente, mais cedo ou mais tarde isso se tornará um problema.

Vamos a um exemplo simples : 

Alguns vão falar aqui de droplist, outros de dropdown. Ainda outros da lista suspensa ou mesmo do DDL. 4 nomes possíveis para designar um único componente.

Se para vários componentes do sistema de design todos usarem seu próprio nome, a comunicação entre as pessoas será cada vez mais difícil, porque todos terão que se esforçar para lembrar que Lenny diz “dropdown”, Karl “DDL”, Lisa “droplist” .

Cada um, portanto, cada vez traduzirá o pensamento do outro. Nesse contexto, imagine agora Tony, o último a chegar. Ele ainda não sabe que esses colegas usam nomes diferentes para falar sobre a mesma coisa. Durante uma conversa, Lisa falará com ele sobre “droplist”. Isso é bom, Fred precisa disso para seu trabalho. Portanto, ele se referirá ao sistema de design e... não há nenhum componente chamado “droplist”. Portanto, será necessário um esforço extra para Fred encontrar o famoso componente. Ele também terá que aprender que Lenny e Karl usam outros termos. 

Por outro lado, se para falar sobre a próxima cor você disser “azul”, e toda a equipe usar o mesmo termo, a comunicação será boa. Se dissermos “este componente é azul”, todos ao redor da mesa saberão de que tom de azul estamos falando.

Como você pode ver, ter uma nomenclatura única para todos os membros da equipe, tanto verbalmente quanto no design system, é muito importante para ter uma comunicação fluida, e também para permitir fácil manuseio e navegação no design system.

# Manutenção e atualização do sistema de design

Um termo-chave na descrição da Usabilis é “escalável”. Um sistema de design deve estar em movimento. Não são leis esculpidas em pedra: os elementos que a compõem podem ser atualizados, outros podem ser criados, componentes antigos podem ser apagados. Assim como adaptamos uma receita ao nosso gosto depois de tê-la feito várias vezes, podemos adicionar novos ingredientes para obter mais sabores, mais sutilezas. 

Um sistema de design não é um fim em si mesmo. É uma ferramenta de trabalho para designers e desenvolvedores. Como tal, evolui com equipas e projetos.

Um sistema de design não deve ser considerado como um projeto com duração limitada. Os componentes e regras que ele contém podem mudar. Podem ser necessárias variações excepcionais de alguns componentes. Portanto, é importante continuar alocando recursos (dev + designers) para monitorar e manter o design system. Se fosse deixado de fora por um ano, atualizá-lo seria quase como refazer todo o trabalho para configurá-lo. É muito longo. Ninguém quer fazer isso duas vezes. Isso sem falar no custo para o negócio. É, portanto, essencial alocar recursos para a manutenção e evolução do sistema de design. Uma hora por semana pode ser suficiente dependendo do grau de maturidade do DS.

# Pontos chave

Se você chegou até aqui, espero que este artigo tenha aberto novos horizontes para o seu sistema de design, ou que você entenda melhor o que é e para que serve.

Se você tivesse que lembrar apenas alguns pontos :

• O sistema de design é uma ferramenta de criação e comunicação construída por e para designers e desenvolvedores
• Garante a consistência de um produto
• Seu custo de implementação e manutenção é amplamente compensado pela velocidade de execução que oferece aos projetistas e desenvolvedores.
• Pode mudar com o tempo
• Deve ser atualizado regularmente