Video Tutorial: Bulk export Figma banner variants from a spreadsheet

This video walks through how to bulk export Figma banner variants from a spreadsheet to HTML or Video/GIF using the Bannerify plugin.

Bannerify can turn one loaded banner set into many exported variants by applying one spreadsheet row at a time during export. Bannerify does not permanently sync the spreadsheet into your Figma file. Instead, it uses your selected rows as temporary export inputs, generates each banner variant, and then packages those files into your final .zip.

Banner variants work with:

• HTML banner exports
• GIF, MP4, WebM, animated WebP, and animated PNG exports
• Static JPG, PNG, WebP, and PDF exports

Step 1: Match your spreadsheet headers to Figma layer names

The first row of your spreadsheet should contain the layer names you want Bannerify to replace during export.

For text layers, rename your Figma text layers to match the spreadsheet headers exactly.

For image layers, rename your Figma image-filled layers to match the spreadsheet headers exactly, then put either an image URL, a data:image/... value, or a ZIP asset reference in the spreadsheet cell.

For embedded media layers, rename the target non-text Figma layer to match the spreadsheet header exactly, then put either a direct .mp4, .webm, or .json URL in the spreadsheet cell, or a matching .mp4, .webm, or .json file reference from an uploaded ZIP source. Bannerify will treat video values as embedded video sources and .json values as embedded Lottie sources during export.

For style sync, rename the target layer to match the spreadsheet header exactly, then put a valid CSS declaration string in the spreadsheet cell, such as color:#ffffff; font-size:48px; or display:none;.

For visibility control, you can also put _hide or _show in a matching spreadsheet cell to hide or show that Figma layer during variant export.

Here is a simple example:

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;

Each data row becomes one banner variant.

If you upload a .zip file instead of a plain .csv or .xlsx, Bannerify will use the first spreadsheet file it finds inside the ZIP and can also resolve bundled images, .mp4, .webm, and .json media files from the same ZIP by filename or relative path.

Supported spreadsheet cell values

Bannerify currently applies these spreadsheet value types during variant export:

• Plain text values for matching Figma text layers
• Image references for matching image-filled layers: image URLs, data:image/... values, or image file references bundled inside an uploaded ZIP
• Direct .mp4, .webm, or .json URLs for matching embedded media layers
• .mp4, .webm, or .json file references bundled inside an uploaded ZIP for matching embedded media layers
• CSS declaration strings for matching sync target layers
• _hide and _show visibility commands for matching layers

If you want to control visibility or styling from the spreadsheet, use CSS values such as display:none;, opacity:0;, left:20px;, or transform:translateX(40px);.

Bannerify currently accepts these CSS properties in spreadsheet values:

• 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

Step 2: Upload your CSV, XLSX, or ZIP file

Open the Variants panel in Bannerify and upload a .csv, .xlsx, or .zip file in the Data Source section.

After Bannerify reads the file, it will show a preview of the active spreadsheet on the left side of the panel. This lets you check that your headers and row values look correct before you export anything.

The preview table highlights image values with thumbnails, shows video values as Video Embed or Video URL badges, shows CSS declaration values as style tokens, and displays _hide / _show values as layer visibility commands so you can quickly spot non-text rows before export.

If you upload a new file later, Bannerify will replace the current file-based source with the latest one.

Step 3: Enable variants and choose which rows to export

Once a spreadsheet is loaded, turn on Enable Banner Variants During Exports.

You can use the checkboxes in the table to choose exactly which rows should be exported as variants:

• Use the checkbox in the table header to select or unselect all rows
• Use the checkbox on any row to include or exclude that individual variant
• Only checked rows are used during export

Bannerify remembers those row selections for the saved spreadsheet source, so when you reopen the plugin your included and excluded rows stay the same.

Missing fonts and export fallback behavior

When variants are enabled, Bannerify checks your selected banners for missing fonts before export.

If Bannerify finds missing font layers in Figma, it will warn you in the Variants panel. In that case, Bannerify falls back to exporting the original banners instead of trying to render broken spreadsheet variants.

Automatic variant folder and file naming

If you leave Export Folder Structure Naming blank, Bannerify names each exported variant automatically.

The automatic rules are:

1. Original exports included alongside spreadsheet variants are grouped inside row-0 for small spreadsheets, or row-000 when the total row count requires zero padding.
2. The variant folder path uses the spreadsheet's folder value if present.
3. If there is no folder value, Bannerify falls back to row-1, row-2, and so on for smaller spreadsheets, and zero-pads them for larger sets like row-001, row-002.
4. The exported file name uses the spreadsheet's name value if present.
5. If there is no name value, Bannerify keeps the original Figma banner name for the export.

That means a blank naming field can produce paths like these:

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

Customizing export folder and file names

You can override the automatic naming by entering your own template into Export Folder Structure Naming.

Use either:

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

Anything before the final / becomes the variant folder path. Anything after it becomes the exported file name.

If you enter only a name template, Bannerify uses that resolved value as the exported item path. For HTML exports, #{Item_Name} creates a folder like summer-sale with its index.html inside. For image or video exports, it creates a file like summer-sale.png, summer-sale.gif, or summer-sale.mp4.

Using spreadsheet header placeholders

You can use any spreadsheet header as a dynamic token by wrapping it like this:

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

If your header contains spaces or punctuation, Bannerify also supports the normalized underscore form. For example, a header called CTA Label can be used as #{CTA Label} or #{cta_label}.

Using Bannerify's built-in placeholders

Bannerify also supports a few built-in values:

• #{row_number} for the current row number, starting at 1
• #{row_index} for the zero-based row index
• #{figma_name} for the Figma banner name
• #{figma_width} for the banner width
• #{figma_height} for the banner height
• #{figma_size} for the banner size, like 300x250
• #{source} for the spreadsheet source name
• #{source_slug} for a slugified version of the source name
• #{platform} for the current export platform

Examples:

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

If you have spreadsheet headers that overlap with built-in token names, such as name or folder, you can explicitly reference the raw spreadsheet value with #{csv_name} or #{csv_folder}.

ZIP structure and preview page behavior

When variants are enabled, Bannerify exports each row into its own variant folder inside the final .zip file.

For HTML exports, the generated preview index.html automatically points to each variant banner's exported path.

For canvas-based exports such as GIF, MP4, WebM, animated WebP, animated PNG, and static image exports, the preview index.html also follows the same variant folder and file naming rules.

That means your preview page stays in sync with:

• selected spreadsheet rows
• custom folder and file naming templates
• automatic row, folder, or name based fallback paths

How spreadsheet media files are packaged

When a spreadsheet row swaps an embedded media layer, Bannerify handles the media according to the source type:

• Direct .mp4, .webm, or .json URLs stay as remote URLs in exported HTML banners
• ZIP-bundled .mp4, .webm, or .json files are copied into each exported HTML banner folder and referenced locally
• For canvas-based exports such as GIF, MP4, WebM, animated WebP, and animated PNG, Bannerify reads either the remote media URL or the ZIP media file during rendering, then uses that temporary media source for the exported frames

Bannerify only applies those spreadsheet media values during export. It does not permanently overwrite the original media URL stored on your Figma layer.

Practical tips

• Keep your spreadsheet headers short and descriptive
• Use row checkboxes to exclude draft rows instead of deleting them
• Use a ZIP source when you want to bundle a spreadsheet with local image assets or local .mp4, .webm, or .json media files
• Use direct media URLs when your .mp4, .webm, or .json files are already hosted online
• Use image-filled layers for GIF file swaps; embedded media variants currently cover .mp4, .webm, and .json
• Leave naming blank unless you need a custom folder structure
• Test one export first if you are introducing a new naming template