---
url: "/pt/bannerify/export/html.md"
description: "Depois de animar as camadas na linha do tempo, você pode exportar seus banners como banners HTML animados"
---
# Exportar banners para HTML
> Depois de animar as camadas na linha do tempo, você pode exportar seus banners como banners HTML animados
### Vídeo tutorial: exporte banners do Figma para HTML/GSAP
Este vídeo mostra como exportar, em segundos, banners animados prontos para produção do Figma para HTML/GreenSock (GSAP) usando o plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/SS2J6k5Wo7s)
### Vídeo tutorial: exporte banners HTML do Figma para várias plataformas de anúncios
Este vídeo mostra como exportar, com um clique, banners HTML animados do Figma para várias plataformas de anúncios usando o plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/Q16MPp9YKjg)
[Video](/assets/videos/bannerify/export/html-export.mp4)
## Exportar para HTML {#exporting-to-html}
Quando você estiver satisfeito com seus banners e quiser exportá-los para HTML, clique no botão **Export to HTML** no cabeçalho do Bannerify. Isso abre as configurações de exportação HTML.
Depois de configurar todas as opções de exportação HTML, clique no botão **Export _n_ Banners** na parte de baixo do painel de exportação para começar a exportar seus banners do Figma para HTML.
Quando o Bannerify terminar de processar seus banners, você verá uma mensagem de confirmação. Para baixar o arquivo `.zip` com os banners exportados, clique no botão **Download your .zip file**.
Os nomes dos arquivos dos banners exportados preservam letras como **Å, Ä, Ö, å, ä, ö** dos nomes dos seus frames do Figma. Os nomes das pastas da exportação e o nome do arquivo ZIP principal também aceitam letras acentuadas. Separadores de caminho e pontuação não aceita continuam sendo removidos dos nomes de arquivo dos frames.
Depois de baixar o arquivo `.zip` do Figma para o seu computador, abra o gerenciador de arquivos na pasta onde ele foi salvo. **Clique duas vezes** no arquivo `.zip` exportado para descompactar o conteúdo e usar seus banners como quiser.
> **Note:** **Descompacte primeiro o arquivo `.zip` exportado** antes de usar os banners ou enviá-los para uma plataforma de anúncios, porque o arquivo .zip exportado contém todos os banners individuais (e a pasta `_zips` aninhada, onde cada banner já vem compactado individualmente, pronto para ser enviado para uma plataforma de anúncios).
> **Warning:** **Bloqueadores de anúncios do navegador podem impedir que as pré-visualizações locais dos banners funcionem corretamente.** Se um banner HTML exportado parecer congelado, não animar ou se comportar de outro jeito na pré-visualização do navegador, desative temporariamente as extensões de bloqueio de anúncios/privacidade para o arquivo de pré-visualização local ou teste em outro navegador antes de exportar de novo.
Cada formato de saída HTML tem seus próprios requisitos de configuração e empacotamento. Use o guia [Opções de plataformas de anúncios](/pt/bannerify/export/code-output) para escolher o formato certo antes de exportar.
> **Tip:** **Salvar arquivos baixados do Figma**. Se você usa o **app desktop** do Figma, vai aparecer uma janela para baixar o arquivo. Já se você usa o Figma em um **navegador**, por padrão o arquivo é baixado automaticamente para o seu computador (normalmente para a pasta **Downloads**).
> **Tip:** **Reutilize suas configurações de exportação em outros arquivos do Figma:** com o painel de configurações Export to HTML aberto e em foco, pressione Ctrl + Shift + E para salvar suas preferências de exportação atuais como `bannerify-export-settings.json`. Em outro arquivo do Figma, abra o mesmo painel e pressione Ctrl + Shift + I para procurar esse arquivo JSON e aplicar as preferências dele à página atual. Use a tecla Control tanto no Windows quanto no Mac.
## Recorte automático de fotos com máscara {#automatic-cropping-of-masked-photos}
As exportações HTML/CSS + GSAP padrão podem remover automaticamente áreas não utilizadas de fotos JPEG compatíveis dentro de máscaras de movimento retangulares ou arredondadas. O Bannerify mantém toda a área necessária durante as animações compatíveis **Zoom Pan Left** e **Zoom Pan Right**, com uma pequena margem de segurança. Fotos estáticas e transições de opacidade também podem se beneficiar. Suas camadas do Figma e as posições da animação permanecem inalteradas.
Também são compatíveis Fade In/Out, Slide In/Out e Wipe In/Out direcionais, Instant Show/Hide e Scale Up/Down Center. Animações de entrada e saída sobrepostas que possam combinar transformações mantêm a imagem original.
Essa otimização é automática e independente da [compressão de imagens e das metas de tamanho de arquivo](/pt/bannerify/export/banner-size-optimization). Ela só substitui uma imagem quando o arquivo recortado é menor. A economia depende da parte da foto original que permanece fora da máscara durante toda a animação.
Animações não compatíveis, código personalizado injetado, Figma Motion, imagens giradas ou com efeitos e outros formatos de exportação mantêm as imagens originais. Se o recorte falhar, o Bannerify também usa a imagem original para que a exportação possa continuar.
As variantes geradas a partir de uma planilha mantêm as imagens originais para que cada linha use a foto correta. Os banners comuns, incluindo o banner mestre original, ainda podem usar o recorte automático.
## Opções padrão {#standard-options}
### Adicionar uma borda preta de 1px a todos os banners {#adding-a-1px-black-border-to-all-banners}
Ao ativar a opção de borda de 1px, uma borda `1px solid black` é incluída automaticamente no CSS de todos os seus banners. Isso ajuda em plataformas de publicidade que preferem (ou exigem) uma borda preta de 1px nos banners.
### Adicionar animações de pré-carregamento a todos os banners {#adding-a-preloader-animations-to-all-banners}
Ao ativar a opção de pré-carregamento, um preloader é incluído automaticamente no HTML de todos os seus banners. Essa animação de carregamento aparece até que todas as imagens do banner tenham sido carregadas no navegador.
## Opções de reprodução {#playback-options}
### Definir quantas vezes os banners são reproduzidos {#setting-the-number-of-times-to-play-through-banners}
Esta opção define quantas vezes a linha do tempo de todos os seus banners deve ser reproduzida do início ao fim. A opção padrão é **1**, ou seja, seus banners reproduzem a linha do tempo da animação do início ao fim **uma vez**.
Você pode mudar esse número digitando um valor maior no campo numérico, como **6**, por exemplo. Assim, a animação da linha do tempo de todos os seus banners é reproduzida **seis vezes** do início ao fim.
### Repetir os banners infinitamente {#infinitely-looping-your-banners}
Você pode fazer a linha do tempo da animação se repetir _para sempre_ em todos os seus banners ativando a opção **Infinitely loop all banners**.
## Incluir arquivos .zip individuais para cada banner {#include-individual-zip-files-for-each-banner}
Ao ativar a opção **Include individual .zip files for each banner**, uma pasta extra chamada `_zips` é incluída no arquivo exportado. A pasta `_zips` contém arquivos zip individuais para cada um dos banners exportados. Isso é útil e economiza tempo se a sua plataforma de publicidade exigir o upload de um arquivo zip para cada banner.
> **Info:** **Incluir o backup.jpg nos zips (opcional)**. Se você quiser que a imagem `backup.jpg` seja incluída em cada zip, ative a opção **Add "backup.jpg" to individual zip files**, e as imagens `backup.jpg` serão incluídas nos seus zips individuais. Se essa opção estiver desativada ao compactar os banners individualmente e você _também_ tiver ativado a opção **Add "backup.jpg"**, todas as suas imagens de reserva também serão incluídas em uma pasta `_backups` na raiz do arquivo `.zip` principal exportado pelo Bannerify.
## Escolher um formato de saída HTML {#choosing-an-html-output-format}
O Bannerify pode exportar HTML neutro (sem plataforma específica), pacotes de upload específicos de cada plataforma, layouts responsivos e vários formatos em lote. Cada opção das **Code Output Settings** tem um guia próprio em [Opções de plataformas de anúncios](/pt/bannerify/export/code-output), com a configuração, o tratamento de cliques, a estrutura do pacote e observações sobre testes.
## Incluir ou excluir banners da exportação {#including-or-excluding-banners-in-your-export}
Por padrão, todas as camadas de nível superior do seu arquivo do Figma carregadas no Bannerify como banners são incluídas na exportação. Se você quiser excluir algum banner (sem [recarregar os banners selecionados](/pt/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners)), desative a opção **Include In Export** no cabeçalho da linha do tempo do banner. Isso oculta a linha do tempo desse banner e também o exclui de todas as exportações.
## Exportações com código minificado {#minified-code-exports}
Para otimizar o tamanho dos arquivos, o Bannerify minifica por padrão todo o código exportado e salva um único arquivo `.html` por banner. Se você precisar de um código mais legível e/ou separado em arquivos `.html`, `.css` e `.js`, desative a opção **Minified** nas opções de exportação de código.
## Exportar texto como tags de parágrafo em vez de imagens SVG {#export-text-as-paragraph-tags-instead-of-svg-images}
Por padrão, as camadas de texto da linha do tempo do Bannerify são exportadas como imagens SVG (em tags de imagem), mas você pode exportá-las como rich text (em tags de parágrafo) ativando a opção **Export text as