Vídeo tutorial: crie banners animados com várias cenas no Figma
Este vídeo mostra como criar banners animados com várias cenas no Figma (e exportá-los para HTML ou vídeo) usando o plugin Bannerify.
O que são banners com várias cenas?
Por padrão, o Bannerify trata cada frame de nível superior do Figma como um banner separado.
Quando você ativa Use Figma sections as multi-scene banners, o Bannerify trata cada Section do Figma como um banner, e cada frame do mesmo tamanho dentro dessa section como uma cena separada na mesma linha do tempo.
Isso é ideal quando você quer sequenciar vários estados criativos ou mensagens na exportação de um único banner.
O Bannerify segue a ordem visual das camadas dos frames do Figma dentro da section. Assim, se você mover os frames das cenas no Figma, a ordem das cenas no Bannerify será atualizada depois que você atualizar e recarregar os banners.
Configuração rápida
- Crie os frames dos seus banners no Figma normalmente.
- Selecione os frames que devem se tornar cenas de um mesmo banner.
- Clique com o botão direito e escolha Wrap in new section.
- No Bannerify, clique em Refresh All Banners para voltar à tela de carregamento.
- Ative Use Figma sections as multi-scene banners.
- Clique em Load Checked Banners (ou Load All Banners).
Agora você deve ver um banner por section, com as camadas agrupadas por cena na linha do tempo.
Fluxo de trabalho passo a passo
1. Execute o Bannerify
Abra o Bannerify pelos plugins do Figma. Se você usa o plugin com frequência, salve-o na lista Saved plugins para acessá-lo rapidamente.
2. Confirme o comportamento padrão (opcional)
Antes de você ativar o modo de sections, o Bannerify carrega os frames de nível superior como banners separados.
Isso ajuda a verificar se os seus frames de origem estão sendo detectados corretamente.
3. Coloque os frames das cenas em uma Section
Selecione todos os frames que você quer combinar em um único banner com várias cenas e use:
Right click -> Wrap in new section
Essa section passa a ser o contêiner do seu banner no modo de sections.
4. Recarregue e mude para o modo de sections
Clique em Refresh All Banners no Bannerify e ative:
Use Figma sections as multi-scene banners
Agora o Bannerify vai procurar sections em vez de frames individuais.
5. Carregue os banners das sections
Clique em Load Checked Banners ou Load All Banners.
Agora você verá:
- Um banner por section
- Agrupamentos de cenas na linha do tempo (Scene 1, Scene 2, Scene 3 etc.)
- Rótulos e controles de camadas que levam as cenas em conta
Se você quiser que a Scene 3 apareça antes da Scene 2, ou que a Scene 1 vá para o final, mova os frames das cenas para a ordem visual de camadas que você quer dentro da section no Figma e depois atualize e recarregue a section no Bannerify.
6. Ajuste a duração da linha do tempo para sequenciar as cenas
Se as cenas estiverem se sobrepondo, aumente a duração da linha do tempo (por exemplo, de 5s para 15s) e clique em Update Timeline Length.
Depois, ajuste os tempos das camadas para que cada cena entre e saia em sequência ao longo da linha do tempo mais longa.
As alterações na duração da linha do tempo se aplicam imediatamente à pré-visualização e às exportações em GIF/vídeo, inclusive nos banners com várias cenas. Você não precisa recarregar os banners depois de mudar a duração.
Use os controles de tempo agrupados por cena para deslocar os blocos de tempo das cenas mais rápido, em vez de ajustar cada camada uma por uma.
7. Visualize e exporte
Use a reprodução da pré-visualização para validar a ordem e o tempo das cenas e depois exporte conforme necessário:
- Exportação HTML para pacotes de código de anúncios e plataformas
- Exportação GIF para imagens animadas
- Exportação MP4/Video para entregas em vídeo
Todas as cenas de uma section são exportadas como uma única sequência de banner combinada.
Trabalhar com vários tamanhos e várias sections
Você pode duplicar sections para criar outros tamanhos e variantes de banner.
Ao atualizar, o Bannerify carrega cada section como um banner separado, cada um com seu próprio conjunto de cenas. Assim, você exporta várias dimensões e variantes com várias cenas em um único lote.
Requisito importante: os frames das cenas precisam ter as mesmas dimensões
Para que os frames sejam tratados como cenas do mesmo banner, eles precisam ter dimensões idênticas dentro da section.
Se um frame tiver uma diferença de apenas 1px, o Bannerify pode excluí-lo do conjunto de cenas dessa section.
Exemplo: se dois frames têm 269x250 e um tem 268x250, o Bannerify pode carregar como cenas apenas os frames com o mesmo tamanho.
Se isso acontecer:
- Deixe todos os frames de cena da section exatamente com a mesma largura e altura.
- Atualize os banners.
- Recarregue o banner da section.
Checklist de solução de problemas
- Só algumas cenas estão carregando: verifique se todos os frames da section têm dimensões idênticas.
- As alterações na section não aparecem: clique em Refresh All Banners e recarregue.
- A ordem das cenas está errada: reordene os frames dentro da section do Figma, clique em Refresh All Banners e recarregue.
- As cenas se sobrepõem demais: aumente a duração da linha do tempo e redistribua os tempos.
- A exportação está diferente da pré-visualização: confira de novo os tempos das camadas e a ordem das cenas depois de mudar a linha do tempo.
Resumo
Usar Sections do Figma com o Bannerify é a forma mais rápida de criar sequências de banner mais longas e narrativas, sem precisar colocar tudo em um único frame gigante.
Crie cada cena como um frame normal, coloque-as em uma section, ative o modo de sections e depois anime e exporte tudo como um único banner combinado.