Selecionar animações

Escolha entre dezenas de animações predefinidas com keyframes para as camadas dos seus banners.

Vídeo tutorial: anime e exporte banners para HTML a partir do Figma

Este vídeo mostra como animar e exportar, em segundos, banners HTML prontos para produção a partir do Figma.

Animações ​

O Bannerify vem com dezenas de animações predefinidas com keyframes, agrupadas em 5 categorias:

  • Entrances (entradas)
  • Exits (saídas)
  • Basic Transforms (transformações básicas)
  • Attention Seekers (chamadas de atenção)
  • Background Pans (panorâmicas de fundo)

Usar animações Split Text. O Bannerify também inclui um conjunto próprio de animações que dividem o texto em caracteres, palavras e linhas para as camadas de texto compatíveis. Veja Animações Split Text para conhecer as etapas de configuração, as fontes compatíveis e as limitações atuais.

Usar animações nativas do Figma Motion. Escolha uma animação detectada no grupo Figma Motion de uma camada específica ou escolha Apply Each Layer's Figma Motion no menu de entrada Batch Layer Actions. Depois que o Motion for aplicado a pelo menos uma camada, ative Mirror Figma Motion Timings acima da linha do tempo se também quiser os deslocamentos de tempo nativos do Figma. Veja Usar animações do Figma Motion para conhecer todas as etapas de ativação e as propriedades compatíveis.

Remover as animações de uma camada. Se você não quer que uma camada tenha animações, pode selecionar No Entry Animation e/ou No Exit Animation ou, como alternativa, renomear qualquer camada do Figma com o prefixo locked- (por exemplo, locked-RectangleBackground). Isso também garante que nenhuma animação seja adicionada e desativa o seletor de animações na linha do tempo do plugin.

Adicionar animações de entrada ​

Para definir uma animação de entrada, passe o mouse sobre a camada que você quer animar na linha do tempo do Bannerify e clique no seletor superior. Percorra a lista de animações e clique no nome de uma animação para aplicá-la à camada. A pré-visualização do banner é atualizada na hora com a nova animação aplicada.

Adicionar animações de saída ​

Adicionar animações de saída funciona da mesma forma que adicionar animações de entrada: em vez de clicar no seletor superior, clique no seletor inferior para selecionar uma animação de saída para a camada.

Garanta que qualquer animação de saída definida em uma camada comece depois que a animação de “entrada” terminar. Caso contrário, as duas animações vão se sobrepor e ter transições conflitantes ao mesmo tempo.