Bannerify can turn one loaded banner set into many exported variants by applying one spreadsheet row at a time during export.

This is different to CopyDoc's spreadsheet sync workflow. 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 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.

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
• 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 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 then 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. The variant folder path uses the spreadsheet's folder value if present.
2. If there is no folder value, Bannerify falls back to row-1, row-2, and so on.
3. The exported file name uses the spreadsheet's name value if present.
4. If there is no name value, Bannerify keeps the default Bannerify export name for the banner.

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

• variants/product-launch/300x250_Homepage Hero
• variants/row-3/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.

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}

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

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
• Leave naming blank unless you need a custom folder structure
• Test one export first if you are introducing a new naming template