Ei, Gabriel, tudo bem?
Teste usar componentes e o recurso de "Smart Animate" do Figma. Aqui está um passo a passo que pode ajudar:
Crie um Componente para o Card: Certifique-se de que o card que deseja animar está configurado como um componente no Figma. Isso facilita a reutilização e a aplicação de interações.
Adicione uma Variante ao Componente: No painel de propriedades do Figma, você pode criar variantes do seu componente. Adicione uma variante que represente o estado "hover" do card. Por exemplo, você pode aumentar a escala do card, mudar a cor de fundo ou adicionar uma sombra.
Configure a Interação de Hover: Selecione o componente principal (não a variante) e vá para o painel de protótipos. Adicione uma interação de "hover" que troque para a variante que você criou. Para isso, defina a interação como "While Hovering" e escolha a variante de hover como destino.
Utilize o Smart Animate: Ao configurar a interação, escolha "Smart Animate" como a animação de transição. Isso permitirá que o Figma anime suavemente as diferenças entre as variantes.
Teste a Interação: Execute o protótipo para ver como a interação de hover está funcionando. Ajuste os "easings" e a duração da animação conforme necessário para obter o efeito desejado.
Essa abordagem deve permitir que você crie uma interação de hover de forma mais eficiente e organizada. Lembre-se de que o uso de variantes e componentes é uma prática recomendada no Figma, pois ajuda a manter o design consistente e fácil de modificar.
Material Complementar
Esse conteúdo pode estar em inglês, para traduzi-lo utilize o tradutor automático do navegador ou clique com o botão direito do mouse sobre a página e selecione a opção Traduzir para o português.
Espero ter ajudado e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
