Dicas para fazer animações usando Smart Animate do Figma
"Smart Animate busca layers com nomes iguais, reconhece as diferenças e anima as layers entre os frames automaticamente."- Figma
O Figma introduziu a feature Smart Animate no ano passado. Com objetivo de entender melhor essa feature e praticar UI Design, resolvi fazer alguns experimentos.
Aqui compartilho os resultados e algumas dicas do que aprendi.
Animação 1: seguindo o mouse
Usando formas com 0% de opacidade é possível criar animações onde algo segue o mouse. A interação "Mouse Enter" é o gatilho da animação de quando o mouse passou pela forma invisível. Exemplo:
Resultado:
Resultado de outro exemplo usando 3 frames:
Animação 2: cards caindo no Smartwatch
- Cada frame/componente teve exatamente o mesmo nome e seguiu a mesma ordem;
- Recomendo baixar este arquivo para entender como as layers foram organizadas;
- Para fazer a virada da página, coloquei a animação em Push e ativei o "Smart Animate matching layers" dessa forma a animação foi para o lado e animou os três pontinhos do card.
Exemplo das interações abaixo:
Resultado:
Animação 3: expansão de card e micro-interação quando favorita
Para fazer a estrela expandir e diminuir ao clicar nela, existe um frame onde ela volta ao tamanho normal automaticamente — sem cliques ou interações.
Ela começou de um tamanho, com o clique foi para outro frame onde estava maior e usando a interação “After Delay” ela foi automaticamente para outro Frame onde a estrela era do mesmo tamanho da inicial.
Para expandir o card e revelar os textos e botão dentro dele, usei a máscara:
Resultado:
Animação 4: transição de página
As imagens do primeiro frame também estão no segundo frame mas com opacidade zero. Alterei o tamanho e reposicionei elas para fazer a transição com animação. Ao passar o mouse sobre a layer, é possível ver ela no frame ao lado, conforme imagem abaixo:
Resultado:
Animação 5: transição com Material Design
Pra fazer a animação do botão flutuante indo do play para o pause, usei o pause na diagonal por trás do play e alterei a ordem os objetos. Com os mesmos nomes e ativando o Smart Animate o Figma reconhece os objetos e anima automaticamente.
Para o menu de hamburger virar uma seta, coloquei nomes iguais em cada layer do objeto e o Figma animou automaticamente.
Resultado:
Animação 6: deslizando para deletar e puxando para atualizar
Usei a interação "On Drag" para fazer o efeito de deslizar e reposicionei a layer no frame seguinte. (Só é possível visualizar a layer para fora do frame seguinte pois desativei o "Clip Content").
- "After delay" para fazer a animação acontecer automaticamente sem que houvesse interação (imagem abaixo);
- Girei o ícone de refresh em -165° na layer seguinte para fazer a animação:
Resultado:
Animação 7: Deslizando para comparar
Foram três frames com os mesmos elementos em cada frame e um grupo com máscara para a imagem em desfoque.
A máscara delimita quanto da imagem em desfoque irá aparecer. O controle deslizante (slider) é a referência para o final da máscara:
Resultado:
Artigos que me ajudaram na criação das animações
- Cópia do arquivo do Figma para observar alguns exemplos e entender como eles foram construídos;
