--- url: "/pt/bannerify/design/scenes.md" description: "Combine frames do Figma do mesmo tamanho em um banner com várias cenas usando uma Section e anime e exporte em HTML, GIF ou vídeo com o Bannerify." --- # Criar banners com várias cenas usando Sections do Figma > Combine frames do Figma do mesmo tamanho em um banner com várias cenas usando uma Section e anime e exporte em HTML, GIF ou vídeo com o Bannerify. ### 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. [Embedded media](https://www.youtube-nocookie.com/embed/_RJoxtwDC04) ## O que são banners com várias cenas? {#what-are-multi-scene-banners} 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 {#quick-setup} 1. Crie os frames dos seus banners no Figma normalmente. 2. Selecione os frames que devem se tornar cenas de um mesmo banner. 3. Clique com o botão direito e escolha **Wrap in new section**. 4. No Bannerify, clique em **Refresh All Banners** para voltar à tela de carregamento. 5. Ative **Use Figma sections as multi-scene banners**. 6. 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 {#step-by-step-workflow} ### 1. Execute o Bannerify {#_1-run-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) {#_2-confirm-default-behavior-optional} 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 {#_3-wrap-scene-frames-in-a-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 {#_4-reload-and-switch-to-sections-mode} 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 {#_5-load-section-banners} 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 > **Tip:** 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 {#_6-adjust-timeline-length-for-scene-sequencing} 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. > **Tip:** 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 {#_7-preview-and-export} 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 {#working-with-multiple-sizes-and-multiple-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 {#important-requirement-scene-frames-must-match-dimensions} 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. > **Warning:** 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: 1. Deixe todos os frames de cena da section exatamente com a mesma largura e altura. 2. Atualize os banners. 3. Recarregue o banner da section. ## Checklist de solução de problemas {#troubleshooting-checklist} - **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 {#summary} 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.