Vídeo tutorial: exporte banners animados do Figma Motion para HTML, vídeo MP4 ou GIF

O Bannerify consegue detectar animações compatíveis criadas com o Figma Motion e disponibilizá-las como uma animação de entrada Figma Motion. Você decide quais camadas a usam, como em qualquer outra animação do Bannerify.

A detecção nunca substitui automaticamente uma animação de entrada do Bannerify que já existe. Aplique o Figma Motion a camadas individuais ou use as ações em lote para camadas do Bannerify para aplicá-lo a várias camadas de uma só vez.

O Figma Motion é atualmente uma API Beta. O Figma pode mudar o modelo de dados do Motion enquanto a API estiver em beta. Veja a documentação da API do Figma Motion para conferir o status atual da API do Figma.

Antes de começar

• Adicione uma animação do Motion a uma camada dentro do frame do banner no Figma.
• Verifique se a camada aparece na linha do tempo do Bannerify. Se ela estiver dentro de um grupo, componente ou outra camada, inclua primeiro a camada aninhada.
• Carregue ou atualize o banner no Bannerify depois de alterar os keyframes do Motion no Figma.

Aplicar o Motion detectado com um clique

Quando o Bannerify encontra um Motion compatível em camadas que ainda não o usam, a mensagem Figma Motion detected aparece acima das linhas do tempo dos banners.

Clique em Apply to All Banners (n Layers) para aplicar as faixas compatíveis do Motion de cada camada elegível em todos os frames de banner carregados no Bannerify no momento. A contagem inclui todas as camadas elegíveis com Motion nas linhas do tempo carregadas. O Bannerify também ativa Mirror Figma Motion Timings, para que os deslocamentos nativos sejam usados na hora. As animações de saída e hover existentes não mudam, e você pode desativar o espelhamento depois para restaurar os intervalos de tempo editáveis do Bannerify.

Aplicar o Motion a grupos aninhados e camadas de pulsação

Expanda cada grupo que contém filhos animados no painel de camadas aninhadas. Se o grupo externo também tiver o próprio Motion, ative Keep Parent Animatable nesse grupo para que a animação dele continue disponível junto com as animações dos filhos.

Depois de fechar o painel, clique em Apply to All Banners no aviso Figma Motion detected. Os filhos recém-expostos precisam dessa etapa mesmo que Mirror Figma Motion Timings já esteja ativado. Por exemplo, camadas de pulsação podem aparecer na linha do tempo, mas continuar estáticas até que as faixas de escala e opacidade detectadas sejam aplicadas.

Aplicar o Figma Motion a várias camadas

1. Abra o frame do banner no Bannerify e atualize-o, se necessário.
2. Marque as caixas de seleção das camadas que você quer atualizar ou use Quick Select Layers.
3. Em Batch Layer Actions, abra o menu de animação Entry.
4. Escolha Apply Each Layer's Figma Motion no grupo Figma Motion.
5. Defina o tempo de entrada do Bannerify que você quer e clique em Apply Animations to Selected Layers.

O Bannerify aplica os keyframes do Motion detectados em cada camada. Se a seleção também tiver camadas sem valores compatíveis do Motion, essas camadas mantêm a animação de entrada atual, e o Bannerify mostra quantas camadas selecionadas são elegíveis antes de você aplicar.

Aplicar o Figma Motion a uma camada

1. Encontre a camada animada na linha do tempo do Bannerify.
2. Abra o menu Entry Animation dela.
3. Selecione a animação detectada no grupo Figma Motion.

O Bannerify combina todas as faixas compatíveis do Motion da camada em uma única animação de entrada. Por exemplo, posição, opacidade, escala e rotação podem ser animadas juntas, cada uma mantendo os próprios keyframes e easing.

Espelhar a linha do tempo do Figma Motion

Depois que pelo menos uma camada estiver usando a animação de entrada do Figma Motion, o Bannerify mostra Mirror Figma Motion Timings acima da linha do tempo. O rótulo inclui o número de camadas com Motion que serão atualizadas, como Mirror Figma Motion Timings (5 Layers).

• A ação de um clique Apply to All Banners ativa essa opção automaticamente.
• Deixe-a desativada para posicionar ou redimensionar as barras de animação do Motion com os controles de tempo normais do Bannerify.
• Ative-a para usar os deslocamentos nativos de início e fim do Figma de cada animação do Motion selecionada. O Bannerify também ajusta a linha do tempo geral para caber a linha do tempo do Motion selecionada mais longa.
• Desative-a de novo para restaurar os intervalos de tempo editáveis do Bannerify que você usava antes do espelhamento.

A opção de espelhamento em si só sincroniza os tempos da linha do tempo. Ela não aplica o Figma Motion a outras camadas nem substitui nenhuma outra animação de entrada. A ação de um clique aplica o Motion às camadas elegíveis antes de ativá-la; para uma ativação mais seletiva, use o fluxo de trabalho por camada ou em lote e controle o espelhamento separadamente.

Para banners que já estão animados no Figma, use Apply to All Banners para chegar, em uma única etapa, o mais perto possível da linha do tempo nativa do Figma. O Bannerify aplica o Motion a todas as camadas elegíveis carregadas e ativa Mirror Figma Motion Timings automaticamente. A configuração geral da linha do tempo usa segundos inteiros, então a linha do tempo nativa mais longa é arredondada para cima até o próximo segundo inteiro quando necessário.

Você ainda pode adicionar uma animação de saída separada do Bannerify. Para uma transição limpa, coloque a animação de saída depois que a animação de entrada do Figma Motion terminar.

Propriedades do Motion compatíveis

No momento, o Bannerify reproduz estas propriedades nativas do Motion:

• Posição nos eixos X e Y
• Opacidade
• Escala nos eixos X e Y
• Rotação
• Raios de canto uniformes ou individuais em camadas retangulares com preenchimento sólido alinhadas aos eixos horizontal e vertical, incluindo rotações de 90 graus, sem contornos, efeitos, máscaras ou suavização de cantos visíveis

Os raios de canto animados são reproduzidos na pré-visualização e nas exportações em HTML, GIF e vídeo. Retângulos com preenchimento de imagem, frames, grupos e retângulos com contornos, efeitos ou suavização de cantos continuam mostrando um aviso de compatibilidade de raio de canto.

Cada propriedade mantém os próprios keyframes, tempo e easing dentro da animação combinada do Bannerify. O Bannerify converte o easing cubic-bezier e spring compatível para o formato usado na pré-visualização e nas exportações. Pode haver diferenças visuais muito pequenas, principalmente com movimentos spring.

Se uma animação misturar propriedades compatíveis e incompatíveis, o Bannerify reproduz as compatíveis e identifica as que ainda não consegue exportar. Uma camada sem nenhuma propriedade compatível do Motion não mostra a opção Figma Motion.

O aviso da linha do tempo identifica as propriedades incompatíveis, incluindo tamanho, raio de canto em tipos ou aparências de camada incompatíveis, espaçamento e padding do auto layout, espessura do contorno ou da borda, corte de caminho (path trim), preenchimentos, contornos ou efeitos. As propriedades listadas não serão animadas no arquivo exportado.

Reutilizar o Motion em um banner girado

Você pode girar um frame de banner em formato retrato em 90 graus para usá-lo em formato paisagem. O Bannerify acompanha a direção girada das faixas de posição do Motion e a ordem dos cantos dos retângulos compatíveis. Atualize o banner depois de girá-lo, para que a arte e as faixas do Motion sejam recarregadas juntas.

Girar o frame também gira a arte dele. Ajuste os textos e as imagens no Figma se eles precisarem ficar na vertical e depois confira a animação na pré-visualização do Bannerify e no arquivo exportado. A animação de raio de canto continua exigindo um retângulo compatível alinhado aos eixos horizontal e vertical; retângulos girados na diagonal mostram um aviso de compatibilidade.

Atualizar depois de editar no Figma

Depois de alterar uma animação do Motion no Figma, clique em Refresh All Banners no Bannerify ou use Refresh Banner Layers no banner afetado. O Bannerify detecta os keyframes mais recentes. As camadas que já usam o Figma Motion continuam com ele ativado, enquanto as camadas recém-animadas não mudam até que você aplique o Figma Motion a elas.

Pré-visualizar e exportar

As animações do Figma Motion funcionam com os controles Play e Replay do Bannerify e podem ser percorridas em qualquer ponto da linha do tempo. O Bannerify captura a arte compatível do Motion independentemente da posição atual do cursor de reprodução do Figma, incluindo camadas que começam com escala ou opacidade zero. A escala e a rotação mantêm o centro da camada original do Figma quando a arte exportada tem limites diferentes, como em textos ou artes com sombras.

Elas também são incluídas nas exportações para:

• HTML com CSS ou GSAP
• GIF
• MP4

Antes de exportar, revise o aviso Figma Motion detected acima da linha do tempo. Ele indica quando:

• Um Motion compatível foi detectado, mas ainda não foi aplicado como animação de entrada do Bannerify da camada.
• Uma camada com Motion contém propriedades que o Bannerify ainda não exporta.
• Uma camada com Motion contém apenas propriedades incompatíveis e ainda não pode ser aplicada.

Você pode aplicar todo o Motion compatível ainda não aplicado direto pelo aviso da linha do tempo.

Solução de problemas

Algumas animações do Figma Motion não aparecem na exportação

1. Confira se o aviso Figma Motion detected acima da linha do tempo indica camadas não aplicadas.
2. Clique em Apply to All Banners ou selecione o Figma Motion no menu Entry Animation de cada camada afetada.
3. Revise os nomes das propriedades incompatíveis listadas no aviso.
4. Expanda as camadas animadas aninhadas na linha do tempo do Bannerify e atualize o banner.
5. Confirme que Mirror Figma Motion Timings continua ativado se os deslocamentos exportados precisarem corresponder à linha do tempo do Motion no Figma.

O Figma Motion não aparece no menu de animações

• Verifique se a camada tem pelo menos uma propriedade compatível do Motion.
• Se a camada estiver aninhada, confirme que ela está incluída na linha do tempo do Bannerify.
• Atualize o banner depois de adicionar ou editar a animação do Motion no Figma.
• Nas ações em lote, confirme que a seleção atual contém pelo menos uma camada com valores do Motion detectados.

O tempo não corresponde ao Figma Motion

Primeiro, aplique o Figma Motion às camadas que você quer usar. Depois, ative Mirror Figma Motion Timings acima da linha do tempo para usar os deslocamentos nativos de início e fim em vez das posições personalizadas das barras de animação do Bannerify.

A animação parece um pouco diferente

Verifique se todas as propriedades animadas são compatíveis. O easing cubic-bezier é reproduzido diretamente sempre que possível, enquanto as faixas com spring ou com easing independente são convertidas para os formatos de pré-visualização e exportação do Bannerify e podem ter diferenças muito pequenas.