Sendo um desenvolvedor, sempre quis aprender a projetar um produto de classe mundial do zero (por conta própria 😅). Recentemente, tenho aprendido a projetar um aplicativo usando as ferramentas e o processo certos, principalmente usando a ferramenta já bem estabelecida Figma . Como o Figma suporta quase todos os tipos de imagem populares prontos para uso, e com suas brilhantes coleções de plug-ins disponíveis (de graça 😁), podemos arrastar e soltar um design para qualquer aplicativo ou site com bastante facilidade.

O problema mais recorrente que encontrei foi lidar com imagens, especialmente ícones e a necessidade de mudar para cores diferentes com base no esquema de design (por exemplo, modo Escuro vs Claro).

Depois de procurar por um tempo, me deparei com este tópico do reddit ( clique aqui , créditos para o criador!) E imediatamente tive vontade de tentar o mesmo truque legal no meu plugin favorito.

Mudando a cor dos ícones.

Para minhas necessidades de ícones, costumo usar StreamLine Icons, um dos plug-ins mais usados ​​da Figma para obter qualquer formato desejado no design. Você pode encontrar o plugin aqui .

Aqui está como podemos mudar a cor de um ícone importado deste plugin.

1. Carregue o plug-in selecionando-o no menu Plug-ins.

3. Selecione o ícone e remova o preenchimento de “FFFFFF” da imagem no painel de design à direita. Isso removerá o ícone de seus limites, removendo assim o fundo indesejado.

3. Desenhe um retângulo na parte superior do ícone, certifique-se de que o retângulo tenha a mesma dimensão do ícone, por exemplo, 48x48 como na imagem acima. Caso não seja, ele pode ser ajustado mais tarde também no painel de design à direita.

4. Selecione o Ícone e o Retângulo pressionando Cmd + Clique em cada item nas Camadas ou manualmente no quadro e abra o Menu do Botão Direito e selecione Usar Como Máscara (shift + cmd + m).

5. Altere a cor do retângulo na máscara para obter o resultado desejado.

Acho esse truque bastante útil e fácil de aprender, e os resultados finais são igualmente surpreendentes. Este truque também funciona bem com arquivos de imagem personalizados. Vou tentar adicionar mais cenários a este documento e mantê-lo atualizado com mais descobertas ao longo do caminho. Sinta-se à vontade para deixar seus pensamentos ou ideias nos comentários abaixo. Estou sempre procurando aprender coisas novas.