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.

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.

Exportar para 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.

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).

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 para escolher o formato certo antes de exportar.

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).

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

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. 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

Adicionar uma borda preta de 1px a todos os 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

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

Definir quantas vezes os banners são reproduzidos

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

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

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.

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

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, com a configuração, o tratamento de cliques, a estrutura do pacote e observações sobre testes.

Incluir ou excluir banners da exportação

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), 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

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

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 <p> tags instead of <svg>.

Manter camadas de texto selecionadas como imagens

Com a opção de exportação em parágrafos ativada, as camadas de texto bloqueadas no Figma mantêm a saída em SVG/imagem em vez de virar texto HTML editável.

1. No Figma, bloqueie cada camada de texto que deve continuar como arte. Bloqueie a própria camada de texto, e não só o grupo ou o frame pai.
2. Deixe desbloqueadas as camadas de texto que você quer editar no HTML.
3. Ative Export text as <p> tags instead of <svg> e exporte de novo.

Por exemplo, deixe desbloqueado um marcador para o nome do revendedor e bloqueie o texto ao redor. O marcador continua como HTML editável, enquanto o texto bloqueado fica nas imagens. Bloquear não remove a arte do banner nem controla o acesso aos arquivos exportados. Desbloquear uma camada de texto a torna elegível de novo para rich text na próxima exportação. As regras de elegibilidade de texto e as limitações de formato existentes continuam valendo.

Para usar fontes da marca em texto editável, veja Adicionar fontes personalizadas ao texto HTML editável.