---
url: "/pt/bannerify/animation/figma-motion.md"
description: "Ative os keyframes do Figma Motion detectados e controle como as propriedades, o tempo e o easing deles são reproduzidos no Bannerify."
---

# Usar animações do Figma Motion

> Ative os keyframes do Figma Motion detectados e controle como as propriedades, o tempo e o easing deles são reproduzidos no Bannerify.

[Video](/assets/videos/bannerify/animation/bannerify-figma-motion.mp4)

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

[Embedded media](https://www.youtube-nocookie.com/embed/QKvJ2YVTUyU)

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.

> **Warning:** **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](https://developers.figma.com/docs/plugins/api/figma-motion/) para conferir o status atual da API do Figma.

## Antes de começar {#before-you-start}

- 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](/pt/bannerify/design/nested).
- Carregue ou atualize o banner no Bannerify depois de alterar os keyframes do Motion no Figma.

## Aplicar o Motion detectado com um clique {#apply-detected-motion-in-one-click}

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 {#apply-motion-to-nested-groups-and-pulse-layers}

Expanda cada grupo que contém filhos animados no [painel de camadas aninhadas](/pt/bannerify/design/nested). 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 {#apply-figma-motion-to-several-layers}

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 {#apply-figma-motion-to-one-layer}

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 {#mirror-the-figma-motion-timeline}

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.

> **Tip:** **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 {#supported-motion-properties}

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 {#reuse-motion-in-a-rotated-banner}

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 {#refresh-after-editing-in-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 {#preview-and-export}

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 {#troubleshooting}

### Algumas animações do Figma Motion não aparecem na exportação {#some-figma-motion-animations-are-missing-from-the-export}

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 {#figma-motion-does-not-appear-in-the-animation-menu}

- 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 {#the-timing-does-not-match-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 {#the-animation-looks-slightly-different}

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.