Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
No 0:49 o professor cita que vai explicar como criar essa forma de ter os ícones. Depois, escolhe direto nos assets o ícone e sua variante (nesse caso, da lupa). Como posso fazer esse asset para outro projeto? Achei muito interessante e simples de aplicar os ícones. Obrigada.
Ei, Paula! Tudo bem?
Que bom que você achou interessante a forma de aplicar ícones e suas variantes! Essa técnica realmente facilita muito o trabalho no design de interfaces. Para criar um asset de ícones com variantes, como o professor demonstrou, você pode seguir alguns passos básicos que são comuns em ferramentas de design como Figma ou Adobe XD:
Criação do Ícone Base: Primeiro, desenhe ou importe o ícone base que você deseja usar. No seu caso, pode ser um ícone de lupa ou qualquer outro que você precise. Para ícones prontos, veja a página do Figma, Canva, Flaticon e outros.
Criação de Variantes: A partir do ícone base, crie diferentes variantes que podem representar estados diferentes (por exemplo, ativo, inativo, hover, etc.). Isso pode incluir mudanças de cor, tamanho ou estilo.
Organização em Componentes: Transforme cada variante em um componente. Isso ajuda a manter a consistência e facilita a alteração de todos os ícones ao mesmo tempo, caso necessário.
Uso de Bibliotecas de Ícones: Se você estiver usando uma ferramenta como o Figma, pode criar uma biblioteca de ícones. Isso permite que você reutilize os ícones em diferentes projetos sem precisar recriá-los.
Aplicação no Projeto: Quando for aplicar no seu design, basta escolher o ícone e a variante desejada a partir da sua biblioteca de componentes ou assets.
Por exemplo, no Figma, pode criar um componente principal para o ícone de lupa e, em seguida, criar variantes para diferentes estados, como "ativo" e "inativo". Isso é feito através do recurso de "Variants" no Figma, que permite agrupar diferentes estados de um componente em um único elemento.
Espero que essas dicas ajudem você a criar seus próprios assets de ícones de maneira eficiente e prática. Bons estudos e continue explorando o mundo do design!
Espero ter ajudado no pontá pé inicial para aplicar em outros projetos! Bons estudos e até mais!