Como praticar Design System
Recentemente, a PretUX me deu a oportunidade de participar do curso Design System Boost, da ui-Boost, ministrado por Rafael Coronel, Guilherme González e um time de mentores. A seguir, compartilho algumas coisas que aprendi por lá.
Antes de começar, é necessário ressaltar que Design System é uma prática colaborativa e multidisciplinar, sendo utilizada principalmente por Designers e Desenvolvedores. Envolve não apenas criação e documentação de componentes e guias de estilo, utilizando princípios de Design, mas também código, liderança, facilitação do processo de criação de interfaces e métricas de sucesso.
O que trago aqui é uma parcela do que você pode praticar sozinho como Designer, mas o processo será muito mais rico e completo se você puder colaborar dentro de um time, ainda que fictício.
Então, vamos aos passos.
1. Roadmap
Qual é o seu objetivo? Como diria Simon Sinek, comece pelo porquê. Definir um objetivo para o seu estudo é um passo importante para que você leve seu aprendizado a sério.
Além do mais óbvio (aprender a construir um Design System), você também pode utilizar este estudo para:
- Treinar seu olhar para as próximas interfaces nas quais for trabalhar, tornando sua construção mais consciente;
- Construir portfólio voltado para Design System;
- Utilizar a biblioteca em interfaces futuras;
- Treinar uma ferramenta de construção de telas (Figma, Sketch, Adobe XD);
- Aplicar futuramente na empresa onde trabalha.
Quanto tempo você tem disponível? Defina a data inicial e final do estudo.
Com qual interface você vai praticar? Aqui é possível praticar tanto com uma interface sua, quanto de um site/app que esteja disponível na rede. O importante é identificar a possibilidade de padrões visuais na interface que será a base do Design System.
2. Listar e priorizar fluxos
Quais são os fluxos disponíveis? E os mais importantes? Analise o negócio para decidir. Para uma loja online, encontrar produtos, visualizar suas características e seguir o processo de compra são indispensáveis. Já para uma rede social, realizar cadastro, login e adicionar novas conexões são mais importantes.
Priorize com cuidado, de acordo com o tempo estabelecido no Roadmap. Se o objetivo é estudar, não é necessário fazer o Design System do site inteiro, o importante é praticar de forma consistente.
Dica: alguns sites trazem no rodapé da página um link para seu mapa, o que pode facilitar a listagem.
3. Capturar telas-chave
Decidido qual fluxo será trabalhado primeiro, tire um print de suas telas. Se a página for maior do que a área do seu monitor, é possível capturá-la inteira através da extensão GoFullPage.
Dica: Como acessar a versão para celular de um site usando o Chrome no PC
4. Categorizar componentes
Primeiro, constrói-se uma documentação visual, que facilita as próximas etapas e previne erros de contagem, tagueando cada elemento visível nas capturas de tela.
Você pode categorizar as tags por cores de tipo de componente (Ex: rosa para simples; azul para complexo, etc) ou por objetos (Ex: rosa para todas as variações de botões; azul para todas as variações de cards, etc).
Finalizadas as tags, compare os componentes. Observe cores, tipografias, estilos em geral. Encontrou alguma inconsistência? Decida qual estilo será descartado ou ajustado.
5. Listar e priorizar componentes
Liste todos os componentes. O ideal é que você faça essa lista em uma tabela fácil de editar e reordenar. O Notion e o Excel/Google Docs são boas ferramentas para esta etapa. Inclua os nomes, tipos e contextos de cada componente, além da quantidade de vezes que eles aparecem no fluxo.
Ordene os elementos de acordo com sua frequência. O ideal é trabalhar com até 25 componentes por período de roadmap. Porém, você pode escolher a quantidade que for adequada à sua realidade e ao tempo que você estabeleceu no passo 1.
6. Listar dados replicáveis e seus valores
Liste todos os dados replicáveis dos componentes que serão prioridade, como cores, tipografias, ícones, espaçamentos, motion, temas e grid. Um Design System completo também pode incluir padrões de tom de voz, acessibilidade, guias de marca e de ilustração e repositórios.
7. Listar design tokens
Design Tokens são identificadores que carregam em sua definição características de uma variável. Podem ser utilizados tanto para estilos (cores, fontes, espaçamentos, bordas), quanto para componentes (botões, cards, inputs).
Os Design Tokens facilitam não só a vida do Designer, como também das pessoas que vão desenvolver as telas do produto. Então, se você puder consultar pessoas desenvolvedoras nessa etapa, a experiência será muito mais realista.
Por exemplo, imagina uma tela na qual a cor #FAF1F9 se repete como cor de fundo de um card, uma barra de busca e de um menu. Sem Design Token, a hexadecimal terá que ser citada três vezes ao longo do código da mesma.
Agora imagina o que acontece se for tomada a decisão de alterar essa cor em todos os elementos nos quais ela aparece. O código precisaria ser editado em cada linha em que a cor é citada. Com o Design Token, não é necessário. Basta alterar a hexadecimal atribuída a ele.
Há várias formas de construir Design Tokens, podendo ir da mais simples “objeto-semântica-variável” (exemplo: cor-marca-principal), até a mais completa “objeto-contexto-tipo-hierarquia-modificador-tamanho-estado” (exemplo: botão-claro-navegação-primário-normal-grande-hover). A quantidade de definições, vai de acordo com a sua necessidade.
Dica: Design Tokens Generator (gustavoquinalha.github.io)
8. Documentação
Um dos objetivos do Design System é ter uma documentação que facilite as tomadas de decisão dos futuros produtos que se basearão nele. É essencial que tanto os padrões visuais quanto os padrões de código estejam disponíveis. No mercado são utilizadas diversas ferramentas, como zeroheight, InVisionDSM, Frontify, Github e o próprio Notion, que possui até mesmo um template de documentação. Basta duplicar para o seu perfil e começar a usar.
Dica: O Design Systems Repo tem mais de 100 Design Systems reunidos, então é um ótimo local para procurar referências de documentação. Alguns disponibilizam até mesmo o Design System completo em Figma, como o Liquid Design System.
Para conhecer mais sobre Design System: Conheça o seu novo amor: Design System — o que é e porque amar trabalhar com um | by Iane Fadigas | Pretux | May, 2021 | Medium
Como montar seu time: 4 modelos de times de Design Systems | by Ricardo Tedeschi | Medium
Ferramentas úteis no Figma: Assets, library e components [Aula 06] | by Chief of Design|YouTube
Priorização para interfaces complexas: Como priorizar elementos usando S.H.I.T. | by Glauber Laender | UX Collective 🇧🇷 (uxdesign.cc)
Sobre Design Tokens: O que são Design Tokens? | by Henrique Filho | UX Collective 🇧🇷 (uxdesign.cc)
