Vídeo tutorial: exporte em massa variantes de banners do Figma a partir de uma planilha

Este vídeo mostra como exportar em massa variantes de banners do Figma a partir de uma planilha para HTML ou vídeo/GIF usando o plugin Bannerify.

O Bannerify pode transformar um conjunto de banners carregado em muitas variantes exportadas, aplicando uma linha da planilha por vez durante a exportação. O Bannerify não sincroniza a planilha de forma permanente com o seu arquivo do Figma. Em vez disso, ele usa as linhas selecionadas como dados temporários da exportação, gera cada variante do banner e depois empacota esses arquivos no .zip final.

As variantes de banners funcionam com:

• Exportações de banners HTML
• Exportações em GIF, MP4, WebM, WebP animado e PNG animado
• Exportações estáticas em JPG, PNG, WebP e PDF

Passo 1: Faça os cabeçalhos da planilha corresponderem aos nomes das camadas do Figma

A primeira linha da planilha deve conter os nomes das camadas que você quer que o Bannerify substitua durante a exportação.

Para camadas de texto, renomeie as camadas de texto do Figma para que correspondam exatamente aos cabeçalhos da planilha.

Para camadas de imagem, renomeie as camadas do Figma com preenchimento de imagem para que correspondam exatamente aos cabeçalhos da planilha e coloque na célula da planilha uma URL de imagem, um valor data:image/... ou uma referência a um arquivo do ZIP.

Para camadas de mídia incorporada, renomeie a camada do Figma de destino (que não seja de texto) para que corresponda exatamente ao cabeçalho da planilha e coloque na célula uma URL direta de .mp4, .webm ou .json, ou uma referência ao arquivo .mp4, .webm ou .json correspondente de um ZIP enviado. Durante a exportação, o Bannerify trata os valores de vídeo como fontes de vídeo incorporado e os valores .json como fontes de Lottie incorporado.

Para sincronizar estilos, renomeie a camada de destino para que corresponda exatamente ao cabeçalho da planilha e coloque na célula uma string de declaração CSS válida, como color:#ffffff; font-size:48px; ou display:none;.

Para controlar a visibilidade, você também pode colocar _hide ou _show em uma célula correspondente da planilha para ocultar ou mostrar essa camada do Figma durante a exportação das variantes.

Veja um exemplo simples:

headline	cta	logo	badge
Shop now pay later	Download the app	logo-1.png	display:none;
Split your payments	Learn more	logo-2.png	opacity:0.5;
Flexible spending power	Get started	logo-3.png	background-color:#111111; color:#ffffff;

Cada linha de dados vira uma variante do banner.

Se você enviar um arquivo .zip em vez de um .csv ou .xlsx simples, o Bannerify usa o primeiro arquivo de planilha que encontrar dentro do ZIP e também consegue localizar imagens e arquivos de mídia .mp4, .webm e .json incluídos no mesmo ZIP pelo nome do arquivo ou pelo caminho relativo.

Valores de célula aceitos

Atualmente, o Bannerify aplica estes tipos de valor da planilha durante a exportação das variantes:

• Valores de texto simples para as camadas de texto do Figma correspondentes
• Referências de imagem para as camadas com preenchimento de imagem correspondentes: URLs de imagem, valores data:image/... ou referências a arquivos de imagem incluídos em um ZIP enviado
• URLs diretas de .mp4, .webm ou .json para as camadas de mídia incorporada correspondentes
• Referências a arquivos .mp4, .webm ou .json incluídos em um ZIP enviado para as camadas de mídia incorporada correspondentes
• Strings de declaração CSS para as camadas de destino da sincronização correspondentes
• Comandos de visibilidade _hide e _show para as camadas correspondentes

Se você quiser controlar a visibilidade ou o estilo pela planilha, use valores CSS como display:none;, opacity:0;, left:20px; ou transform:translateX(40px);.

Atualmente, o Bannerify aceita estas propriedades CSS nos valores da planilha:

• width, height, opacity
• background, background-image, background-color
• border-radius, border, border-left, border-right, border-top, border-bottom, border-color, border-width
• font-size, color, font-family, font-weight, text-transform, font-style, line-height, text-align, vertical-align
• display, flex-direction, gap, justify-content, align-items
• padding, padding-top, padding-right, padding-bottom, padding-left
• box-shadow, filter, transform, left, top

Passo 2: Faça upload do arquivo CSV, XLSX ou ZIP

Abra o painel Variants no Bannerify e faça upload de um arquivo .csv, .xlsx ou .zip na seção Data Source.

Depois que o Bannerify ler o arquivo, ele mostra uma pré-visualização da planilha ativa no lado esquerdo do painel. Assim, você confere se os cabeçalhos e os valores das linhas estão corretos antes de exportar.

A tabela de pré-visualização destaca os valores de imagem com miniaturas, mostra os valores de vídeo como selos Video Embed ou Video URL, exibe os valores de declaração CSS como tokens de estilo e mostra os valores _hide / _show como comandos de visibilidade de camada, para que você identifique rapidamente as linhas que não são de texto antes da exportação.

Se você fizer upload de um novo arquivo depois, o Bannerify substitui a fonte de dados atual pelo arquivo mais recente.

Passo 3: Ative as variantes e escolha quais linhas exportar

Depois de carregar uma planilha, ative Enable Banner Variants During Exports.

Use as caixas de seleção da tabela para escolher exatamente quais linhas devem ser exportadas como variantes:

• Use a caixa de seleção do cabeçalho da tabela para marcar ou desmarcar todas as linhas
• Use a caixa de seleção de qualquer linha para incluir ou excluir aquela variante
• Só as linhas marcadas são usadas na exportação

O Bannerify lembra essas seleções de linhas para a planilha salva, então, quando você abre o plugin de novo, as linhas incluídas e excluídas continuam as mesmas.

Fontes ausentes e comportamento de reserva da exportação

Com as variantes ativadas, o Bannerify verifica se há fontes ausentes nos banners selecionados antes da exportação.

Se o Bannerify encontrar camadas com fontes ausentes no Figma, ele avisa você no painel Variants. Nesse caso, o Bannerify volta a exportar os banners originais em vez de tentar renderizar variantes da planilha com problemas.

Nomes automáticos de pastas e arquivos das variantes

Se você deixar Export Folder Structure Naming em branco, o Bannerify dá nomes automaticamente a cada variante exportada.

As regras automáticas são:

1. As exportações originais incluídas junto com as variantes da planilha ficam agrupadas em row-0 nas planilhas pequenas, ou em row-000 quando o total de linhas exige preenchimento com zeros.
2. O caminho da pasta da variante usa o valor folder da planilha, se houver.
3. Se não houver valor folder, o Bannerify usa row-1, row-2 e assim por diante nas planilhas menores, e preenche com zeros nos conjuntos maiores, como row-001, row-002.
4. O nome do arquivo exportado usa o valor name da planilha, se houver.
5. Se não houver valor name, o Bannerify mantém o nome original do banner no Figma na exportação.

Ou seja, um campo de nome em branco pode gerar caminhos como estes:

• row-0/300x250_Homepage Hero
• product-launch/300x250_Homepage Hero
• row-003/300x250_Homepage Hero

Personalizar os nomes de pastas e arquivos da exportação

Você pode substituir os nomes automáticos digitando seu próprio modelo em Export Folder Structure Naming.

Use um destes formatos:

• name-only-template
• folder/name-template

Tudo o que vem antes da última / vira o caminho da pasta da variante. Tudo o que vem depois vira o nome do arquivo exportado.

Se você digitar só um modelo de nome, o Bannerify usa esse valor resolvido como o caminho do item exportado. Nas exportações HTML, #{Item_Name} cria uma pasta como summer-sale com o index.html dentro. Nas exportações de imagem ou vídeo, cria um arquivo como summer-sale.png, summer-sale.gif ou summer-sale.mp4.

Usar marcadores com os cabeçalhos da planilha

Você pode usar qualquer cabeçalho da planilha como token dinâmico, envolvendo-o assim:

• #{headline}
• #{cta}
• #{campaign}
• #{product_name}

Se o cabeçalho tiver espaços ou pontuação, o Bannerify também aceita a forma normalizada com sublinhados. Por exemplo, um cabeçalho chamado CTA Label pode ser usado como #{CTA Label} ou #{cta_label}.

Usar os marcadores integrados do Bannerify

O Bannerify também aceita alguns valores integrados:

• #{row_number} para o número da linha atual, começando em 1
• #{row_index} para o índice da linha começando em zero
• #{figma_name} para o nome do banner no Figma
• #{figma_width} para a largura do banner
• #{figma_height} para a altura do banner
• #{figma_size} para o tamanho do banner, como 300x250
• #{source} para o nome da fonte da planilha
• #{source_slug} para uma versão em slug do nome da fonte
• #{platform} para a plataforma de exportação atual

Exemplos:

• #{campaign}/#{figma_size}_#{figma_name}
• #{row_number}_#{headline}
• exports/#{campaign}/#{figma_name}
• exports/#{row_number}_#{figma_size}

Se algum cabeçalho da planilha coincidir com os nomes dos tokens integrados, como name ou folder, você pode referenciar explicitamente o valor bruto da planilha com #{csv_name} ou #{csv_folder}.

Estrutura do ZIP e comportamento da página de pré-visualização

Com as variantes ativadas, o Bannerify exporta cada linha para sua própria pasta de variante dentro do arquivo .zip final.

Nas exportações HTML, o index.html de pré-visualização gerado aponta automaticamente para o caminho exportado de cada banner variante.

Nas exportações baseadas em canvas, como GIF, MP4, WebM, WebP animado, PNG animado e imagens estáticas, o index.html de pré-visualização também segue as mesmas regras de nomes de pastas e arquivos das variantes.

Assim, a sua página de pré-visualização fica sincronizada com:

• as linhas selecionadas da planilha
• os modelos personalizados de nomes de pastas e arquivos
• os caminhos de reserva automáticos baseados em row, folder ou name

Como os arquivos de mídia da planilha são empacotados

Quando uma linha da planilha troca uma camada de mídia incorporada, o Bannerify trata a mídia de acordo com o tipo de fonte:

• URLs diretas de .mp4, .webm ou .json continuam como URLs remotas nos banners HTML exportados
• Arquivos .mp4, .webm ou .json incluídos no ZIP são copiados para a pasta de cada banner HTML exportado e referenciados localmente
• Nas exportações baseadas em canvas, como GIF, MP4, WebM, WebP animado e PNG animado, o Bannerify lê a URL remota da mídia ou o arquivo de mídia do ZIP durante a renderização e usa essa fonte de mídia temporária nos frames exportados

O Bannerify só aplica esses valores de mídia da planilha durante a exportação. Ele não substitui de forma permanente a URL de mídia original salva na sua camada do Figma.

Dicas práticas

• Mantenha os cabeçalhos da planilha curtos e descritivos
• Use as caixas de seleção das linhas para excluir linhas de rascunho em vez de apagá-las
• Use uma fonte ZIP quando quiser incluir junto com a planilha imagens locais ou arquivos de mídia .mp4, .webm ou .json locais
• Use URLs diretas de mídia quando os seus arquivos .mp4, .webm ou .json já estiverem hospedados on-line
• Use camadas com preenchimento de imagem para trocar arquivos GIF; as variantes de mídia incorporada atualmente aceitam .mp4, .webm e .json
• Deixe o campo de nome em branco, a menos que você precise de uma estrutura de pastas personalizada
• Teste uma exportação primeiro se estiver usando um novo modelo de nome