Criando novos componentes para um Design System
Precisamos mapear todas as possibilidades de uso e variações, além de documentar e testar casos de acessibilidade.
No cenário do design de interface, cada vez é mais difundida a palavra do Design System e como ele auxilia no dia a dia tanto dos designers quanto dos desenvolvedores. Segundo um estudo do Figma em 2019, os designers que utilizam um Design System concluem suas tarefas 34% mais rapidamente.
Com um bom sistema integrado por ambas as partes, o trabalho torna-se mais rápido e ágil, não apenas no sentido literal, mas também na comunicação, melhorando significativamente o trabalho da equipe.
Cada Design System tem seu funcionamento, portanto, use o que vou falaaplicando ao seu contexto, cada componente terá características diferentes, portanto o “roteiro” pode ser um pouco diferente. Além disso, vale ressaltar que um Design System é muito mais do que somente fazer componentes no Figma. Só estou abordando essa parte em específico.
Bora começar!
1. Identifique se o componente se encaixa no Design System
Muitas vezes aquela demanda é necessária para um fluxo muito específico, portanto chamamos de snowflake (floco de neve).
Nesse caso, pode ser somente um componente local, que no momento não tem outros cenários que se encaixe.
2. Faça benchmarkings! O mais querido por todos
É nesse momento que precisamos olhar referências tanto da concorrência como também de outros lugares que possuem bons insights. Podendo ser desde guidelines como também de aplicativos. É ótimo para entendermos padrões e ver o que podemos melhorar ou seguir.
Caso o produto que está fazendo é para desktop e mobile recomendo sempre ver nos dois, porque o comportamento pode ser diferente. Vou deixar alguns sites nas referências.
3. Anote o que precisa ter no componente
Isso surge a partir dos benchmarkings e mapeamento dos casos de uso.
— “Beleza, o que precisa ter nesse componente?”
— “Uma imagem, título, subtítulo, switch…”
A partir dessa anotação você já consegue ir mapeando os casos e vendo o que precisa ter englobado.
4. Veja se pode ser reaproveitado um componente já existente
A partir do momento que temos os componentes básicos, é uma boa prática reutilizarmos em componentes mais complexos.
5. Testar, testar e testar…
Crie o seu componente, com suas variações e teste. Se lembre:
O seu principal usuário são designers. Deixe de fácil uso!
6. Entendimento do cenário técnico
Após ter achado o teste abençoado, vamos validar com o pessoal de desenvolvimento. Essa é uma das partes mais importantes e é interessante ter uma conversa continua e constante com o pessoal de código, tanto no meio como no final do processo, para quando virar uma tarefa deles, não ter nenhum tipo de impedimento.
Se for um aplicativo multiplataforma, sempre necessário ver com os responsáveis, porque às vezes o tranquilo para uma plataforma, pode ser mais difícil para a outra.
Deu tudo certo, fogos de artifício, vamos refinar!
7. Refinamento do componente
- Veja se está usando Local Variables ou Local styles corretos (cores, textos, espaçamento, corner radius, stroke).
- Nomeie todas as camadas de forma correspondente.
- Verificar se não há camadas extras, que dificulta o uso do componente.
- Verificar hierarquia de títulos relevantes.
- Veja possibilidade de colocar um máximo de linhas em partes com texto.
- Veja possibilidade de adicionar mínimo e máximo de altura e largura.
- Ofereça zonas de toque suficientemente grandes (As especificações do Material Design afirmam que os alvos de toque devem ter pelo menos 48 × 48 px).
- Certifique-se que está sendo responsivo e se encaixa com a proposta.
8. Cores & Contrastes
- Certifique-se de que as informações não sejam transmitidas apenas por cores.
- Verifique o contraste correto para textos:
4.5:1 para texto menor que 24px ou 19px em negrito.
3:1 para texto maior que 24px ou 19px em negrito. - Verifique a relação dos elementos de interface com o fundo.
- Faça teste de contraste WCAG e APCA.
Alguns plugins do Figma que ajudam demais: Color blind, Contrast e Stark.
9. Documentação!
Creio a dizer que essa é a parte mais crucial para um bom entendimento. Não adianta fazer um componente perfeito com todos os cenários de uso possível sem documentar isso.
Imagine que alguém está olhando pela primeira vez o seu Design System. Documente de uma forma que qualquer pessoa entenda.
Aqui alguns tópicos interessantes (necessários) para deixar descrito, tanto para designer quanto para os desenvolvedores:
- Anatomia explicitando espaçamentos, tamanho das fontes e corner radius (caso houver).
- Descrição: O que é esse componente, para o que serve?
- Destacar os tipos visualmente, caso houver opções e variações daquele componente.
- Destacar campos obrigatórios e opcionais.
- Características do texto como máximo de linhas, se há possibilidade de bold no texto.
- Especificações do componente, caso tiver algo específico só dele.
- Cenários, mostrando todas as possibilidades visuais daquele componente.
- Casos de uso: Quando e como posso utilizar ele?
- Exemplo do componente aplicado a tela (app e web).
- Exemplo navegável, caso tenha algum tipo de animação.
Plugin do Figma: DesignDoc[Spectral].
10. Espalhe a palavra
Um ponto importantíssimo é comunicar a todos sobre a existência desse novo componente.
Sem uma boa comunicação, não temos uma boa aplicação do Design System
Ao criar novos componentes converse com designers, peça para testarem e aplicarem. Mostre para os demais desenvolvedores, veja se está tudo certo e se tem mais cenários que talvez não tenha sido mapeados!
Ajustes e mudanças pequenas são normais, o Design System é um organismo vivo que sempre tem mudanças e alterações.
E… tá pronto o sorvetinho!
Referências
Design Systems referências:
- Material.io
- Morningstar Design System
- Human Interface Guidelines
- Lightning Design System
- Jota DS
- Carbon Design System
- Design Systems Brasileiros
