Icons
Estrutura
↳ Tamanho
Para garantir a consistência e padronização na criação de iconografias, foram estabelecidos 5 tamanhos de ícones de forma que atenda todo o produto Cifra Club e seus subprodutos, sendo eles 32px, 24px, 20px, 16px e 12px.
↳ Espessura
Para que a consistência visual dos ícones permaneça harmônico em relação a outros elementos como tipografia por exemplo, foi necessário definir uma espessura (stroke) para cada tipo de tamanho de icone, sendo eles:
32px
2.4px
24px
1.8px
20px
1.5px
16px
1.2px
12px
0.9px
Construção (Figma)
↳ Icon grid
O Icon grid são linhas guias (e também um componente no Figma) que formam a base do grid de uma iconografia. São como a estrutura esquelética que sustenta todo o conjunto de ícones. Essas linhas guias garantem que cada ícone seja projetado respeitando os mesmos tamanhos, bordas e peso visual em relação aos demais elementos do sistema.
Ao iniciar a construção de um ícone é recomendado utilizar o componente ❖ icon-grid presente no arquivo do Figma dentro do frame do ícone para garantir que todos pareçam ter o mesmo tamanho.
Exemplo real de aplicação utilizando os grids:
↳ Regras gerais
Na construção de um novo ícone, é obrigatório seguir conter as seguintes definições:
Stroke: 1.8px, Round e Center
Espessura: Como utilizamos por base o tamanho de 24 x 24px logo o stroke padrão deverá ser 1.8px, como já descrito em estrutura.
End point: Configure o end point para "round", para deixar as extremidades do traçado arredondadas.
Posição: Utilize a posição "center" para que o traçado expanda sua espessura para os lados.
Position: Center e Scale
Layer externo: o frame de 24px que abrange todo o ícone com seus espaçamentos deverá estar em "center" de forma que o ícone sempre permaneça centralizado em todas suas aplicações.
Layer interno: o frame que comporta até a extremidade do vetor deverá possuir os constraints em “scale”. Isso possibilita escalar o ícone para diferentes tipos de tamanho de forma consistente.
Estrutura das layers
Variantes: Para cada ícone é necessário duas variantes: uma com o ícone visível (◇ Fill=Off) e outra como um placeholder (◇ Fill=On). Esse padrão é necessário para que todos os ícones se comportem da mesma forma, até quando aplicado de modo placeholder.
Camadas:
◇ Fill=Off: na camada principal onde aparece o ícone, é necessário que possua o componente de Icon Grid + o vetor do ícone final + versão do ícone editável (com a possibilidade de alteração do vetor em linha).
b. ◇ Fill=On: a camada de placeholder com apenas um shape com uma imagem aplicada.
Nomenclatura: é expressamente recomendado nomear o ícone da forma mais genérica possível para que ele não fique limitado à uma função apenas.
Ex.: Se é um ícone de utilizado para referenciar o blog, nomeá-lo como "newspaper" será mais indicado, pois este mesmo ícone pode aparecer em outro contexto.
Utilizar sempre nomes em inglês para manter o padrão.
Incluir o novo ícone na ordem alfabética das layers e do arquivo.
Cor: 
base-neutral-foreground-dynamic-10
base-neutral-foreground-dynamic-10Ao finalizar a construção do ícone, garanta que a cor utilizada esteja com o token de cor base-neutral-foreground-dynamic-10 . Só é recomendado utilizar a troca de cores durante a aplicação em uma tela, caso o componente utilizado já não pré defina a cor especifica.
Boas práticas
Priorizar colocar os pontos do vetor no meio da linha - dessa forma ajuda a não borrar o ícone dependendo da densidades de pixels nas principais resoluções de dispositivos.
Cmd/CTRL + SHIFT + P: pré-visualização de pixels no Figma, ajuda a entender como o pixel será exibido quando renderizado na tela em densidades menores.
Resources
Atualizado