Introdução
Conforme um produto cresce, novas telas e funcionalidades precisam ser criadas. Sem uma referência compartilhada, a equipe pode acabar resolvendo o mesmo problema de formas diferentes: um botão muda de aparência entre telas, campos semelhantes apresentam comportamentos distintos e componentes são criados sem um padrão visual ou precisam ser refeitos a cada entrega.
O design system ajuda a organizar essas decisões para que a equipe possa reutilizar o que já foi definido e se concentrar nas necessidades de cada funcionalidade. Isso contribui para uma interface mais consistente e facilita a manutenção do produto.
Esse trabalho envolve os componentes e as orientações sobre como utilizá-los. Para que os benefícios também cheguem ao produto em funcionamento, é importante que exista alinhamento entre o que foi projetado e o que a equipe implementa em código.
Como eu faço
Começo analisando as necessidades do produto, as decisões de UX e os materiais que já estão disponíveis, como a identidade visual e os componentes existentes. Isso me ajuda a entender o que pode ser aproveitado e o que precisa ser desenvolvido.
Organizo essa base no Figma e construo os componentes, suas combinações e as estruturas das páginas. Ao longo do trabalho, observo como essas partes funcionam juntas e compartilho as definições com o cliente e com a equipe para esclarecer dúvidas e ajustar o que for necessário.
Atomic Design: a metodologia que orienta meu trabalho
Minha abordagem para a criação de design systems utiliza o Atomic Design, Brad Frost. Essa metodologia organiza a interface em cinco níveis relacionados: átomos, moléculas, organismos, templates e páginas.
A ideia é compreender como os elementos mais simples se combinam para formar estruturas maiores e como essas estruturas funcionam no contexto das páginas do produto.
Essa organização pode contribuir para o projeto de algumas formas:
Redução de retrabalho e custos: reutilizar componentes pode facilitar a criação e a manutenção das interfaces. A economia também depende da adoção do sistema pela equipe, da implementação em código e das necessidades do projeto. Escalabilidade e consistência: os componentes podem ser utilizados em diferentes partes do produto, ajudando a manter padrões visuais e de interação conforme novas funcionalidades são desenvolvidas. Flexibilidade: se a equipe de branding definir uma nova cor secundária, por exemplo, podemos atualizar a variável correspondente e refletir essa alteração nos componentes vinculados a ela. Ainda é necessário conferir se a mudança funciona nos diferentes contextos de uso.
As etapas abaixo mostram como organizo esse trabalho. Elas podem ser retomadas conforme o projeto evolui. Por exemplo, se um componente não funcionar bem ao ser aplicado em uma tela, reviso o que precisa mudar para que ele atenda àquela necessidade e continue consistente com o restante do sistema.
Etapa 1 — Organização do projeto no Figma
Começo estruturando o projeto no Figma para facilitar a organização do design system, a colaboração com o cliente e as revisões da equipe. Também configuro recursos do próprio Figma que facilitam a vida do programador.
Organizo os arquivos, as páginas e os componentes com nomes claros e agrupamentos que facilitem a navegação. A intenção é que as pessoas envolvidas consigam entender o que está disponível e onde encontrar cada parte do sistema.
Estabeleço diretrizes para: arquivologia no Figma, estilos e como podem ou não se relacionar, regras de tamanhos, acessibilidade e entre outras. As regras são baseadas no contexto do projeto e moldadas às necessidades da interface e nuances da experiência do usuário.
Compartilho o projeto com o cliente e com os profissionais envolvidos por meio de um link ou convite por e-mail, conforme as permissões necessárias. Assim, eles podem acompanhar o trabalho, deixar comentários e participar das revisões.
A equipe de desenvolvimento também terá acesso aos componentes e às suas definições. Essa referência apoia a implementação em código e ajuda a esclarecer dúvidas sobre estilos, variações e comportamentos do design system.
Etapa 2 — Fundamentos visuais e criação dos átomos
Após estruturar o projeto no Figma, organizo os fundamentos visuais e começo a criação dos elementos mais simples da interface. Essa base considera as diretrizes da identidade visual e as necessidades de uso do produto.
Identidade visual e fundamentos
Começo reunindo as definições da identidade visual que são relevantes para o projeto, como cores, tipografia, variações do logotipo, elementos gráficos e por aí vai.
A partir dessa referência, organizo as aplicações necessárias para a interface: escalas de tons de cores, tamanhos e pesos tipográficos, espaçamentos, efeitos e outras definições. Nesse trabalho, considero os critérios de acessibilidade das WCAG aplicáveis ao design, como contraste, identificação dos campos, visibilidade do foco e por aí vai.
Nem tudo estará pronto no material de identidade visual, por isso algumas escolhas precisam ser adaptadas ou desenvolvidas para o contexto do produto.
Componentes e variáveis essenciais
Com essa base organizada, começo a criação dos elementos essenciais, como botões, campos de entrada, caixas de seleção etc.
Defino as variações e os estados necessários para cada elemento: tamanhos, estilos, hover, focus, seleção, desabilitado e outros (conforme sua função).
Utilizo o Figma prototyping para demonstrar o comportamento esperado dos componentes nas interações previstas. Quando uma interação não pode ser representada fielmente no protótipo, explico o comportamento esperado para orientar a equipe de desenvolvimento.
Organizo também as variáveis e os estilos utilizados pelos componentes para facilitar a consistência e as atualizações.
Etapa 3 — Criação das moléculas
As moléculas são combinações de átomos que trabalham juntos para cumprir uma função na interface. Um campo de texto permite digitar uma informação; combinado com um botão de busca, forma um conjunto que permite à pessoa informar o que procura e iniciar a pesquisa.
Para facilitar o entendimento, pense que os átomos são os ingredientes e a molécula é o prato preparado com eles.
Por exemplo, ao combinar carne, cebola e sal no preparo, posso fazer um bife acebolado.
Na interface, se eu juntar um campo de texto e um botão, o resultado será uma molécula que chamamos de campo de pesquisa.
Mapeamento dos componentes necessários
Primeiro, identifico quais moléculas serão necessárias com base nas decisões de UX e nas funcionalidades previstas para o produto. Analiso quais elementos precisam trabalhar juntos e quais combinações podem ser reutilizadas em diferentes telas.
Um campo de formulário com rótulo, entrada de texto e mensagem de orientação, por exemplo, pode aparecer no cadastro, na edição do perfil e em outras situações. Organizar essa combinação ajuda a manter a consistência e evita que ela seja reconstruída a cada aplicação.
Criação e variações
Na criação das moléculas, defino a organização dos elementos, os espaçamentos e as variações necessárias para cada contexto. Também considero como o conjunto se comporta durante a interação.
No exemplo do formulário, o que acontece quando a pessoa preenche uma informação inválida? Onde aparece a mensagem de erro? Ela explica o que precisa ser corrigido? Essas definições ajudam a equipe a aplicar o componente de forma consistente e tornam a interação mais clara para o usuário.
Reutilizo os átomos já definidos e ajusto o que for necessário conforme essas combinações são desenvolvidas. Assim, as moléculas passam a compor uma base para a criação de estruturas maiores nas próximas etapas.
Etapa 4 — Criação de Organismos
Os organismos agrupam átomos, moléculas e, às vezes, outros organismos para formar seções mais completas da interface. Essas partes se complementam para atender a um objetivo, como por exemplo, permitir o cadastro de uma pessoa em um sistema ou apresentar os detalhes da fatura de um cartão de crédito e por aí vai.
Para facilitar o entendimento, pense que organismos são como uma refeição em que as moléculas são os pratos.
Por exemplo, se eu ponho à mesa: arroz, feijão, bife acebolado e um refrigerante bem gelado, terei um almoço.
Se eu juntar: campo de texto, select, checkbox e botão, posso criar um formulário de cadastro. Esse conjunto pode ser organizado como um organismo, reunindo os elementos necessários para que a pessoa faça seu cadastro.
Nessa etapa, observo a relação entre os componentes: quais informações precisam de destaque, como as ações se organizam e como a estrutura se adapta aos tamanhos de tela previstos para o projeto.
Também considero as variações necessárias. Um cabeçalho pode apresentar opções diferentes quando a pessoa está conectada à conta, por exemplo. Organizo esses cenários para que a equipe entenda o que muda e o que deve permanecer consistente.
Etapa 5 — Definição dos Templates
Templates definem a estrutura das páginas e orientam como os componentes serão distribuídos para acomodar o conteúdo e os recursos previstos.
Para facilitar o entendimento, pensa na estrutura de um cardápio: ela define onde ficam as categorias, os nomes dos pratos, as descrições, os preços e as ofertas em destaque.
Essa organização considera o que precisa chamar a atenção e como o cliente encontra as opções. Os pratos e preços podem mudar, enquanto a estrutura continua servindo de referência.
Percebe que o cardápio do exemplo segue uma estrutura de organização? Essa estrutura funciona como um template. Quando recebe os pratos, as descrições e os preços reais, temos uma aplicação desse template — assim como acontece com as páginas do produto.
Organizo a hierarquia das informações, os espaçamentos e o comportamento da estrutura nos tamanhos de tela previstos. O objetivo é estabelecer uma referência que possa ser reutilizada sem precisar resolver novamente a organização de cada página semelhante.
Se essa aplicação revelar alguma limitação nos componentes, retomo as definições anteriores e faço os ajustes necessários.
Etapa 6 — Simulação do Design system utilizando conteúdo real
Após definir os templates, aplico conteúdos reais para observar como as páginas se comportam. Essa aplicação corresponde ao nível de páginas do Atomic Design e ajuda a conferir se as definições anteriores atendem às situações do produto na hora da prototipagem.
Um card pode funcionar bem com um título curto, mas precisar de ajustes quando recebe um nome maior ou uma imagem em outro formato. Essas diferenças nem sempre aparecem quando utilizamos apenas conteúdos escolhidos para caber no layout.
Por isso, considero situações como:
Textos curtos e longos. Imagens com diferentes proporções. Listas com poucos ou muitos itens. Ausência de conteúdo ou de resultados. Estados de carregamento, erro e confirmação. Diferentes tamanhos de tela.
Quando o conteúdo definitivo ainda não está disponível, utilizo exemplos representativos do que o produto precisa apresentar.
Observo se as informações continuam claras, se os componentes acomodam essas variações e se as interações representadas fazem sentido. Quando encontro alguma dificuldade, ajusto o componente ou a estrutura e confiro novamente sua aplicação.
Essa simulação ajuda a identificar problemas no design. Depois da implementação, também é necessário conferir o comportamento no produto em funcionamento, incluindo os aspectos de acessibilidade que dependem do código.
O que entrego
Organizo o material para que o cliente e a equipe consigam consultar as definições, reutilizar os componentes e compreender como aplicá-los no produto.
Os entregáveis variam conforme o escopo e as necessidades do projeto. Podem incluir:
Projeto organizado no Figma. Fundamentos visuais, estilos e variáveis. Componentes com suas variações e estados. Moléculas e organismos. Templates e exemplos de páginas com conteúdo real ou representativo. Interações demonstradas em protótipo, quando necessárias. Orientações de uso e informações para apoiar a implementação.
As orientações explicam como utilizar os componentes, quais variações estão disponíveis e quais cuidados precisam ser considerados. Isso ajuda a equipe a compreender as decisões e a manter a consistência nas próximas aplicações.
O material no Figma serve de referência para o desenvolvimento. A implementação dos componentes em código depende do escopo combinado para o projeto.
Conforme o produto evolui, novas necessidades podem surgir. Por isso, também é importante definir quem ficará responsável por manter o sistema atualizado e registrar as mudanças, para que o material continue correspondendo ao que a equipe utiliza.
Perguntas frequentes
Todo produto precisa de um design system?
Nem todo projeto precisa começar com um sistema amplo. A necessidade depende da complexidade do produto, da quantidade de interfaces e das pessoas envolvidas. Em alguns casos, uma base menor de componentes e orientações já atende ao momento do projeto e pode evoluir conforme a necessidade.
É possível criar um design system para um produto que já existe?
Sim. Nesse caso, o trabalho considera as interfaces e os componentes existentes para identificar o que pode ser aproveitado, o que precisa de ajuste e quais padrões ainda precisam ser definidos.
Qual é a diferença entre identidade visual e design system?
A identidade visual define elementos que representam a marca, como logotipo, cores e tipografia. O design system considera essa referência e organiza também componentes, comportamentos e orientações para construir as interfaces do produto.
O design system inclui todas as telas do produto?
Não necessariamente. Ele reúne elementos e padrões que ajudam a construir as telas, além de exemplos de aplicação. A criação de todos os fluxos e interfaces depende do escopo do projeto.
A entrega inclui os componentes em código?
O trabalho apresentado nesta página contempla a organização no Figma e as orientações para apoiar o desenvolvimento. A implementação em código precisa estar prevista no escopo e alinhada com a equipe responsável.
O design system garante a acessibilidade do produto?
Não. Ele pode incorporar cuidados de acessibilidade nos componentes e nas orientações de uso, mas o resultado também depende do conteúdo, da combinação dos elementos e da implementação. Esses aspectos precisam ser avaliados no produto em funcionamento.
Quanto tempo leva para criar um design system?
O prazo depende do tamanho do produto, dos componentes necessários, do material disponível e das revisões com a equipe. Analiso esses pontos para definir um escopo e um prazo adequados ao projeto.
O design system precisa ser atualizado?
Sim. Novas funcionalidades, mudanças na marca e aprendizados sobre o uso do produto podem exigir ajustes. Manter os componentes e as orientações atualizados ajuda a evitar que a equipe trabalhe com referências que já não correspondem ao produto.