---
url: "/pt/bannerify/design/variants.md"
description: "Exporte variantes de banners em HTML, GIF, MP4, WebM, APNG, WebP, imagem ou PDF a partir de um conjunto do Figma com linhas de um CSV, XLSX ou ZIP."
---

# Criar variantes de banners a partir de dados de planilha

> Exporte variantes de banners em HTML, GIF, MP4, WebM, APNG, WebP, imagem ou PDF a partir de um conjunto do Figma com linhas de um CSV, XLSX ou ZIP.

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/EiVk0G0nEU4)

[Video](/assets/videos/bannerify/export/banner-spreadsheet-variants.mp4)

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 {#step-1-match-your-spreadsheet-headers-to-figma-layer-names}

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.

> **Tip:** 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 {#supported-spreadsheet-cell-values}

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 {#step-2-upload-your-csv-xlsx-or-zip-file}

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 {#step-3-enable-variants-and-choose-which-rows-to-export}

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 {#missing-fonts-and-export-fallback-behavior}

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 {#automatic-variant-folder-and-file-naming}

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 {#customizing-export-folder-and-file-names}

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 {#using-spreadsheet-header-placeholders}

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 {#using-bannerify-s-built-in-placeholders}

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}`

> **Tip:** 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 {#zip-structure-and-preview-page-behavior}

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 {#how-spreadsheet-media-files-are-packaged}

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 {#practical-tips}

- 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