7 dicas para construir um Design System: lições aprendidas na prática

Aprendizados práticos e dicas para a construção de design systems centrados no usuário.

Estamos cada vez mais digitais e, mais importante ainda — estamos cada vez mais omnichannel. Isso implica em vários produtos em diversas plataformas, com linguagens e layouts diferentes.

Trabalhar tela por tela, desenvolvendo o mesmo componente várias vezes têm se tornado impraticável, seja pelo número de inconsistências, seja pela demanda de tempo. Para otimizar a forma com que produzimos interfaces, muitas empresas têm resgatado a ideia de design systems.

Existem vários materiais técnicos sobre a construção de design systems a partir da visão de UI/UX e tecnologia.

Neste artigo, vou contar para vocês alguns aprendizados práticos que obtive colocando a mão na massa, construindo um design system do ponto de vista de inovação.

O conteúdo abordará os seguintes tópicos:

• Mas afinal, o que é um design system?
• Não é só sobre pixels, é sobre pessoas
• Comece com um MVP
• Inventário é um investimento
• Crie uma linguagem comum
• Envolva a tecnologia desde o dia 0
• Se não está documentado, não existe
• Tenha design principles claros
• Faça uma boa gestão de mudanças

Continue a leitura e confira!

Mas afinal, o que é um design system?

Um design system funciona como um ecossistema de bibliotecas de componentes reutilizáveis espelhados entre tecnologia e design, que podem ser agrupados para criar aplicações escaláveis.

Esses componentes são guiados por princípios de uso e gestão de estilo centralizada, promovendo a qualidade nos produtos digitais através de padrões claros. Dessa maneira, propõe uma abordagem para resolvermos problemas pensando do menor para o maior, a partir de variáveis de estilo.

Na prática, funciona como um guia para designers, desenvolvedores, líderes digitais, product owners, scrum masters e demais stakeholders que usam informações disponibilizadas para criar os produtos digitais de uma empresa.

Assim, um design system nunca está pronto, está em constante evolução. Ele deve crescer e amadurecer em conjunto com a empresa, acompanhando suas necessidades para se tornar perene no dia a dia e na cultura.

Bom, já vou começar dizendo que não existe fórmula mágica nem um passo a passo exato para ser seguido. O mais importante é compreender o contexto da empresa e o problema que você está tentando solucionar.

Um design system para uma empresa que possui apenas um produto é diferente de o de uma empresa com várias marcas. O número de plataformas, a prioridade de negócio e a cultura da empresa também influenciam muito.

Por isso, vou deixar aqui algumas lições aprendidas que se aplicam em casos amplos, mas é fundamental estudar o contexto da sua empresa antes de seguir ao pé da letra, ok? Você pode conferir aqui algumas dicas sobre como começar.

#1 não é só sobre pixels, é sobre pessoas

Um design system institui uma nova maneira de trabalhar. Podemos pensar em interfaces e componentes, mas no final do dia estamos falando sobre pessoas.

O sucesso do seu design system depende da adoção contínua.

Uma situação comum com a qual nos deparamos é que muitas pessoas não sabem o que é um design system e não entendem como ele pode impactar positivamente o seu dia a dia de trabalho.

Por isso é fundamental fazer o gerenciamento de entregas de valor. Você pode começar mapeando quem vão ser as pessoas que vão usar o seu design system direta ou indiretamente e enumerar como elas poderão se beneficiar dele.

Depois é só escolher os métodos mais adequados para envolver pessoas diferentes em etapas adequadas do projeto. Pode ser por meio de entrevistas, surveys, workshops, meetups... O que fizer mais sentido para a empresa!

#2 comece com um MVP

Um design system pode ter uma data de inauguração, mas não tem data para acabar. O processo inicial de construção de uma base sólida é fundamental, por isso o faça com muito cuidado.

O seu design system só vai ter valor quando aplicado a um problema real, por isso, quando já tiver o mínimo necessário construído, faça testes e iterações. E principalmente, deixe espaço para feedbacks e ajustes, eles são partes fundamentais do processo criativo. Tenha um canal sempre aberto para solucionar dúvidas e receber sugestões.

Além de componentes, você deve desenhar processos e estabelecer métricas que se adaptem ao contexto e a evolução do design system. Por isso, o trate como um produto que alimenta outros produtos da empresa.

Essa mudança de chave é fundamental: enxergue o design system como um produto e espalhe essa visão dentro da empresa. Isso vai te ajudar a mostrar a importância de várias etapas durante a construção. Você construiria um produto sem entender o seu usuário, por exemplo?

#3 inventário é um investimento

Para construir um design system assertivo é fundamental conhecer os produtos da empresa. Para isso, invista um tempo para fazer um bom inventário.

Uma estratégia interessante é começar com um overview e fazer um diagnóstico dos padrões e inconsistências que mais saltam aos olhos entre produtos e sistemas. Depois, prepare-se para passar um pente fino e descobrir quais são os componentes mais utilizados, quais são as cores, imagens, iconografias, tipografias, voz e tom dos textos e muito mais.

A partir desse estudo detalhado, você vai conseguir montar o backlog do que o seu design system deve entregar, e priorizá-lo para entregar valor no momento certo.

Mas lembre-se da dica #2: comece com um MVP! Você não precisa ter todos os componentes para que o seu design system possa começar a ser usado. Gerencie as entregas de valor para manter os squads da empresa engajados.

#4 crie uma linguagem comum

Um cenário comum que vemos em muitas empresas é o conhecimento de ilha, cada área fala a sua língua. Mas o design system vem para quebrar barreiras e otimizar a comunicação.

O que o time de design chamava de dialog, o time de engenharia chamava de modal e a equipe de negócios se referia como “telinha de mensagens” passa a ter um nome só — e isso facilita a troca de informações de uma maneira incrível!

Spoiler alert: estabelecer uma linguagem comum não é tão simples quanto parece. Você precisa tomar decisões de desde que língua vai usar (tudo em inglês? Só português? Vale misturar?) e métodos semânticos.

Novamente, não existe resposta certa. A dica é: escolha o que faz mais sentido para a cultura da empresa e não se prenda em metodologias. Você deve ter duas preocupações principais: que todo mundo entenda e que seja escalável.

#5 envolva a tecnologia desde o dia 0

Por ter “design” no nome, os design systems sofrem de um mau comum de passar a impressão de que é um assunto que se limita a designers. Mas, assim como o design thinking, ele extrapola várias disciplinas. P

Para construir um design system incrível, você precisa (e muito) do apoio do time de tecnologia, principalmente do frontend. Envolva estes perfis desde o primeiro dia do projeto, entenda seu ponto de vista e troque experiências. Se não for para espelhar a tecnologia e o design, seu design system vai virar um style guide.

Sabemos que um problema comum nas empresas é que o que é projetado no design nem sempre é reproduzido no desenvolvimento. Uma das principais vantagens do design system é facilitar o diálogo e o handoff entre estes perfis.

Quando projetamos a partir do design system, a comunicação entre design e engenharia se torna tão fluída que podemos projetar uma tela apenas listando quais componentes devem estar nela. Você já pensou em um designer passar uma lista ao invés de um layout para o desenvolvedor?

#6 se não está documentado, não existe

Nos design systems, documentamos todos os componentes, processos e métricas que estabelecemos para promover a consistência e qualidade entre os produtos digitais. Mas ao mesmo tempo em que precisamos registrar todos os detalhes, sabemos ninguém lê documentações longas demais.

Por isso, o segredo é gerenciar entregas de conhecimentos para perfis para os quais eles façam sentido. É crucial catalogar as informações e as entregar para as pessoas certas, no momento certo e no formato ideal.

Para isso, os design systems possuem dois tipos essenciais de documentação: uma documentação técnica de design e tecnologia e uma documentação funcional para todos os stakeholders.

Design Systems tendem a ser complexos e abrangentes por natureza, o que pode resultar em um portal extenso com uma navegação confusa. Por isso é imprescindível contemplar também guias de onboarding, que demonstrem para usuários de diferentes perfis como usar o design system.

#7 tenha design principles claros

Nós falamos muito sobre o design system ser adaptável e evoluir sempre, mas tem uma parte que não muda, que é a chave de toda a consistência que ele promove: os design principles.

Eles são um conjunto de regras acordadas que vão guiar o time na tomada de decisão durante a construção do design system e de todos os produtos digitais que vão nascer a partir dele. Mas, eles só serão verdadeiramente úteis para o time se estiverem visíveis no dia a dia.

Por isso, é fundamental que os design principles sejam cocriados e envolvem diversos stakeholders, para refletirem a cultura da empresa. Esta deve ser uma das primeiras etapas da construção do design system e tem um papel estratégico fundamental.

O momento de cocriação é uma ferramenta poderosa de engajamento: aproveite esta oportunidade para que todos sejam donos e se sintam parte do design system.

Dica final: faça uma boa gestão de mudanças

Quando você for construir o design system, tenha em mente que você está propondo uma nova maneira de trabalhar, que vai afetar todos os produtos digitais da empresa.

Por isso, esteja preparado para fazer uma boa gestão de mudanças. Mantenha um canal de comunicação aberto e saiba comunicar e vender a ideia, senão é possível que você desperte inseguranças e mal entendidos que podem vir a prejudicar a adoção do projeto.

Uma boa estratégia é deixar claro para todos os designers que o design system não vai cercear a criatividade, ele vai otimizar micro decisões. Deixe claro que eles não precisam perder tempo pensando em espaçamentos, cores e tipografias.

Estes elementos já foram determinados. Assim, terão tempo para se dedicar em questões mais estratégicas, como fluxos de navegação e experiência do usuário.

É importante dialogar com vários perfis e elaborar uma conversa personalizada, que evidencie os benefícios trazidos por essa nova maneira de trabalhar. Uma estratégia interessante é criar um site com uma documentação conceitual, FAQ e canais de comunicação.

Se você tiver que tirar apenas uma lição deste artigo, que seja essa: além de pixels, seu design system lida com pessoas — não se esqueça disso.

Quer saber mais sobre Design System? Baixe nosso ebook gratuito!