` link tag around the entire banner, and the other is to add clickable links to individual layers in your timeline.
> **Note:** **Links only applies to HTML exports**. Please note that this will only apply to all HTML export options, and won't have any effect on GIF or video exports from the plugin.
## Adding a clickable URL to the entire banner
[Video](/assets/videos/bannerify/design/banner-link-tag.mp4)
To add a link around your entire banner, you can paste a link into the URL field inside of the export settings panel. This will automatically wrap your entire banner inside of an `` tag, which has an `href` set to the URL that you specified in the input field.
## Adding a clickable URL to a specific timeline layer
[Video](/assets/videos/bannerify/design/prototype-link.mp4)
If you need to make a certain timeline layer clickable, you can do this by clicking on that layer in your Figma canvas, then adding an **Open link** interaction under the native Figma **Prototype** panel. Pasting your link into the URL field of the Figma interaction will automatically include an `onclick="window.open('https://yourwebsitelink.com', '_blank')"` attribute to that element in your HTML banner export.
> **Tip:** **Only applies to layers visible in your Bannerify timeline**. Please note that this will only be applied to layers that are visible in your Figma timeline. By default, this means direct child layers of your banner frame; you can optionally [include nested layers](/bannerify/animation/animating-banners#animating-nested-child-layers-individually) via the plugin, and then apply a prototype link interaction to those nested layers, if desired, too.
## Using Enabler.exit() on timeline layers for DoubleClick exports
If you export with the **DoubleClick Studio** format, you can also set a timeline layer's Figma prototype URL to an `Enabler.exit(...)` call instead of a normal website URL.
1. Select a layer in your timeline (for example your CTA button).
2. In Figma's **Prototype** panel, add an **On click -> Open link** interaction.
3. In the URL field, enter a DoubleClick exit call like:
```js
Enabler.exit("CTA Exit");
```
4. Export your banner with Bannerify using the **DoubleClick Studio** format.
Bannerify will then:
- bind that layer to `Enabler.exit("CTA Exit")`,
- keep the default full-banner background exit (`Enabler.exit("Background Exit")`),
- prevent the layer click from bubbling to the background exit, so you do not get duplicate exit calls.
> **Tip:** **Use this only for DoubleClick exports**. For non-DoubleClick HTML formats, use regular website URLs in Prototype links (for example, `https://example.com`).
---
---
url: "/bannerify/design/lottie.md"
description: "You can embed Lottie file animations to any Figma layer in your Bannerify timeline by clicking on the **Settings** icon button for that layer, and then pasting in a URL pointing to a valid Lottie file (`.json`) into the Lottie embed input field."
---
# Including Lottie file animations in your banners
> You can embed Lottie file animations to any Figma layer in your Bannerify timeline by clicking on the **Settings** icon button for that layer, and then pasting in a URL pointing to a valid Lottie file (`.json`) into the Lottie embed input field.
### Video Tutorial: Add Lottie animations to Figma banner exports
This video tutorial is a complete step-by-step guide showing you how to add Lottie file animations to your banners using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/JOJXVPWejOw)
[Video](/assets/videos/bannerify/design/lottie-animation.mp4)
To get a Lottie animation, you can either [browse the selection of animations](https://lottiefiles.com/featured?ref=bannerify) on LottieFiles.com, or if you've created your own using the [After Effects plugin](https://lottiefiles.com/plugins/after-effects), you can upload your `.json` file to the LottieFiles website as a [private animation](https://lottiefiles.com/preview?ref=bannerify), and then copy the URL link to your animation in the same way to use it in Bannerify.
By default, your Lottie animation will automatically loop, but you can change this if needed by turning off the **Loop Embed** toggle.
To remove a Lottie animation from your layer, click on the the **Settings** icon button again and remove the URL from the Lottie embed input field.
> **Tip:** **Bulk applying Lottie file URLs** As with other layer settings, you can also apply your Lottie file URL setting to layers in bulk by using the [bulk apply](/bannerify/animation/animating-banners#applying-bulk-animations) feature.
> **Note:** **Complex visual effects/masks in video/GIF exports**. If you're exporting banners containing Lottie files to video or GIFs from Bannerify, certain Lottie files contain special effects, masks or styles that won't be supported as they are in the HTML exports.
> **Warning:** **Some ad platforms will block Lottie animations from being used**. If you're exporting banners containing Lottie files to HTML for ad platforms like Google Ads, some of these platforms won't allow you to upload your banners, as they don't allow third party Javascript libraries (like Lottie) to be used.
---
---
url: "/bannerify/design/nested.md"
description: "By default, Bannerify only loads the direct child layers from your Figma banners into the timeline, but you can also include nested child layers when needed, too."
---
# Animating nested layers in your banner frames
> By default, Bannerify only loads the direct child layers from your Figma banners into the timeline, but you can also include nested child layers when needed, too.
[Video](/assets/videos/bannerify/design/nested-layers.mp4)
To choose which layers in your banner frame you'd like to expand and load into your Bannerify timeline as animatable layers, you can click on the **List** icon button at the top of your banner in the timeline, then click on the **Arrow** icon next to any layers with child layers to expand or collapse them as needed.
Closing this panel will automatically refresh your banner to reveal all of the nested children you exposed in your timeline as new individual layers in your timeline.
Bannerify also supports Figma [slot layers](https://help.figma.com/hc/en-us/articles/38231200344599-Use-slots-to-build-flexible-components-in-Figma) inside your banner frames. These slot containers are treated like nested layer groups in the Bannerify layer picker, and start expanded by default the first time Bannerify loads them so their child layers are immediately available in your timeline. If you manually collapse one of those Slot layers, Bannerify will remember that preference for later refreshes instead of forcing it open every time.
> **Tip:** Alternatively, you can specify which layers should be expanded (to load their nested children into the timeline) by adding `[expand]` to the parent layer name, without needing to use the nested user interface in the plugin, described above.
---
---
url: "/bannerify/design/override-image-format.md"
description: "By default, Bannerify will try to automatically select the best image file format for each layer, but you can specify your own file format overrides for any layers in your timeline."
---
# Override the image file format for layers in your HTML exports
> By default, Bannerify will try to automatically select the best image file format for each layer, but you can specify your own file format overrides for any layers in your timeline.
[Video](/assets/videos/bannerify/design/override-image-format.mp4)
If you would like to override the image file format for any layer in your timeline, you can optionally do this for any layer by clicking any layer's **Settings** icon button in the main timeline to open the layer settings, and selecting an option from the **Optionally override the image format for this layer in banner exports** dropdown select list:
- Auto-detect optimal format _(Default)_
- Export layer as JPG _(.jpg)_
- Export layer as PNG _(.png)_
- Export layer as SVG _(.svg)_
This will ensure that your layer will always be exported to the image format you've selected when they're exported to HTML from the Bannerify plugin.
> **Tip:** **Bulk applying image format override settings**. As with other layer settings, you can also apply your image format override to layers in bulk by using the [bulk apply](/bannerify/animation/animating-banners#applying-bulk-animations) feature.
---
---
url: "/bannerify/design/override-image-scale.md"
description: "By default, Bannerify will use your global image scale setting in the HTML export settings panel, but you can specify individual image scale overrides for any layers in your timeline."
---
# Override the image scale for layers in your HTML exports
> By default, Bannerify will use your global image scale setting in the HTML export settings panel, but you can specify individual image scale overrides for any layers in your timeline.
[Video](/assets/videos/bannerify/design/override-image-scale.mp4)
If you would like to override the image scale size for any layer in your timeline, you can optionally do this for any layer by clicking any layer's **Settings** icon button in the main timeline to open the layer settings, and selecting an option from the **Optionally override the image scale for this layer in banner exports** dropdown select list:
- Use Global HTML Export Image Scale Setting _(Default)_
- Export this layer at @0.5x Resolution
- Export this layer at @1x Resolution
- Export this layer at @1.5x Resolution
- Export this layer at @2x Resolution (Retina)
This will ensure that your layer will always be exported at the scaling resolution that you've selected when they're exported to HTML from the Bannerify plugin.
> **Tip:** **Bulk applying image scale override settings**. As with other layer settings, you can also apply your image scale override to layers in bulk by using the [bulk apply](/bannerify/animation/animating-banners#applying-bulk-animations) feature.
---
---
url: "/bannerify/design/popups.md"
description: "You can use Bannerify to add a simple overlay popup to display rich text text (eg. disclaimers or terms and conditions) that shows up when you click on a certain layer in your banner."
---
# Adding clickable rich text popup overlay links to your banners
> You can use Bannerify to add a simple overlay popup to display rich text text (eg. disclaimers or terms and conditions) that shows up when you click on a certain layer in your banner.
### Video Tutorial: Add rich text popup overlays to HTML Figma banners
This video tutorial is a complete step-by-step guide showing you how to add rich text popup overlays to HTML Figma banners using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/fOlw2ghGcIc)
[Video](/assets/videos/bannerify/design/popup-overlays.mp4)
If you need to have a popup overlay with scrollable (and dismissible) rich text included in your banner, which can be opened by clicking on a certain layer in your banner timeline, you can do this by [selecting those desired trigger layers](/bannerify/animation/animating-banners#quick-selecting-similar-layers) in each of your banners, then choosing any animation options under the **Generate Popup Overlay Disclaimers** section in the bulk actions window at the bottom of the plugin (which appears when multiple layers are checked in your timeline).
Once your happy with the popup animation settings, clicking the **Create Popup Links** button will automatically create a "Popup" component (containing a text layer and a close button) on your Figma page and automatically linking each of your selected layers as a trigger to point to that new Popup component via the native Figma Prototype link feature.
You're welcome to modify the content of the text layer, adjust the font size and change the solid color fills of the popup background, close icon and the text layer.
When you export your HTML banners, the plugin will automatically look for those Figma Prototype links and the Popup component that they're pointing to, and generate the clickable triggers and popup overlay code in your final exported banner set.
### Customizing scrollbar styles
If you want to customize the scrollbar styling for scrollable truncated text layers or popup overlay text, enable **Inject Custom Code** in your HTML export settings, then paste this into the **Custom CSS** field.
```css
:root {
--bannerify-scrollbar-color: #ff6600;
--bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
--bannerify-scrollbar-width: 8px;
--bannerify-scrollbar-height: 8px;
--bannerify-scrollbar-radius: 8px;
}
/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
scrollbar-color: var(--bannerify-scrollbar-color)
var(--bannerify-scrollbar-track-color);
scrollbar-width: thin;
}
/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
width: var(--bannerify-scrollbar-width);
height: var(--bannerify-scrollbar-height);
}
[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
background-color: var(--bannerify-scrollbar-color);
border-radius: var(--bannerify-scrollbar-radius);
}
[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
background-color: var(--bannerify-scrollbar-track-color);
}
```
You can change the values at the top to update the scrollbar color, track color, width, height, and corner radius. Some browsers and mobile devices may still render scrollbars using their native system style, but the CSS will be applied wherever the client allows custom scrollbar styling.
> **Warning:** Please note, this component is designed to be extremely simple, with just the single text layer (for disclaimer text) and the close button. Feel free to customize the text content, font styles and colors, but any **other customizations or additional layers added may break the exported HTML** as a result.
---
---
url: "/bannerify/design/scenes.md"
description: "Learn how to combine multiple same-size Figma frames into a single multi-scene banner by wrapping them in a Section, then animate and export them as HTML, GIF, or video using Bannerify."
---
# Creating multi-scene banners using Figma Sections
> Learn how to combine multiple same-size Figma frames into a single multi-scene banner by wrapping them in a Section, then animate and export them as HTML, GIF, or video using Bannerify.
### Video Tutorial: Create multi-scene animated banners in Figma
This video tutorial is a complete step-by-step guide showing you how to create multi-scene animated banners in Figma (and export to HTML or video) using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/_RJoxtwDC04)
## What are multi-scene banners?
By default, Bannerify treats each top-level Figma frame as a separate banner.
When you enable **Use Figma sections as multi scene banners**, Bannerify treats each **Figma Section** as one banner, and each same-size frame inside that section as a separate scene in the same timeline.
This is ideal when you want to sequence multiple creative states/messages in one banner export.
Bannerify follows the Figma visual frame layer order inside the section, so if you move the scene frames around in Figma, the scene order in Bannerify will update after you refresh and reload the banners.
## Quick setup
1. Create your banner frames in Figma as normal.
2. Select the frames that should become scenes in one banner.
3. Right-click and choose **Wrap in new section**.
4. In Bannerify, click **Refresh all banners** to return to the load screen.
5. Enable **Use Figma sections as multi scene banners**.
6. Click **Load checked banners** (or **Load all banners**).
You should now see one banner per section, with layers grouped by scenes in the timeline.
## Step-by-step workflow
### 1. Run Bannerify
Open Bannerify from Figma plugins.
If you use it often, save it to your **Saved plugins** list for quick access.
### 2. Confirm default behavior (optional)
Before enabling sections mode, Bannerify will load top-level frames as separate banners.
This is useful to verify your source frames are detected correctly.
### 3. Wrap scene frames in a Section
Select all frames you want to combine into one multi-scene banner, then use:
**Right click -> Wrap in new section**
That section now becomes your single banner container in sections mode.
### 4. Reload and switch to sections mode
Click **Refresh all banners** in Bannerify, then enable:
**Use Figma sections as multi scene banners**
Bannerify will now scan sections instead of individual frames.
### 5. Load section banners
Click **Load checked banners** or **Load all banners**.
You will now see:
- One banner per section
- Scene groupings in the timeline (Scene 1, Scene 2, Scene 3, etc.)
- Scene-aware layer labeling and controls
> **Tip:** If you want Scene 3 to appear before Scene 2, or Scene 1 to move to the end, move the scene frames into the Figma visual frame layer order you want inside the section, then refresh and reload the section in Bannerify.
### 6. Adjust timeline length for scene sequencing
If scenes currently overlap, increase the timeline length (for example from `5s` to `15s`. and click **Update timeline length**.
Then adjust layer timings so each scene enters/exits in sequence across the longer timeline.
> **Tip:** Use grouped scene timing controls to shift scene timing blocks more quickly instead of adjusting every layer one-by-one.
### 7. Preview and export
Use preview playback to validate scene order and timing, then export as needed:
- **HTML** export for ad/platform code packages
- **GIF** export for animated image output
- **MP4/Video** export for video deliverables
All scenes in a section are exported as one combined banner sequence.
## Working with multiple sizes and multiple sections
You can duplicate sections to create additional banner sizes/variants.
On refresh, Bannerify will load each section as a separate banner, each containing its own set of scenes.
This lets you export multiple dimensions and multi-scene variants in a single batch.
## Important requirement: scene frames must match dimensions
For frames to be treated as scenes in the same banner, they must have identical dimensions inside the section.
If one frame has even a 1px difference, Bannerify may exclude it from that section's scene set.
> **Warning:** Example: if two frames are `269x250` and one is `268x250`, Bannerify can load only the matching-size frames as scenes.
If this happens:
1. Make all scene frames in the section the exact same width and height.
2. Refresh the banners.
3. Reload the section banner.
## Troubleshooting checklist
- **Only some scenes are loading**: verify all frames in the section have identical dimensions.
- **Section changes are not appearing**: click **Refresh all banners** and reload.
- **Scene order is wrong**: reorder the frames inside the Figma section, then click **Refresh all banners** and reload.
- **Scenes overlap too much**: increase timeline length and redistribute timings.
- **Export looks different from preview**: re-check layer timings and scene order after timeline changes.
## Summary
Using Figma Sections with Bannerify is the fastest way to build longer, narrative banner sequences without forcing everything into one giant frame.
Design each scene as a normal frame, wrap them in a section, enable sections mode, then animate/export as one combined banner.
---
---
url: "/bannerify/design/scrollable-text.md"
description: "Use truncated text layers in Figma to export selectable, scrollable HTML text in Bannerify, with manual scroll or optional auto-scroll timing."
---
# Adding scrollable truncated text layers to your banners
> Use truncated text layers in Figma to export selectable, scrollable HTML text in Bannerify, with manual scroll or optional auto-scroll timing.
### Video Tutorial: Add scrollable text disclaimers to HTML Figma banners
This video tutorial is a complete step-by-step guide showing you how to add scrollable text disclaimers (with auto-scroll) to HTML Figma banners using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/lDPV4QU_ZRU)
[Video](/assets/videos/bannerify/design/scrollable-text.mp4)
If you need long legal text, safety copy, or PI content to stay readable in a compact area, Bannerify can export a truncated text layer as native scrollable HTML text.
If you want a dismissible overlay instead of inline scrolling text, see [Add Popup Overlay](/bannerify/design/popups).
### Step 1. Create a truncated text layer in Figma
Create a text layer with a fixed text box size, and make sure it is set to **Truncate** (instead of auto-growing).
The visible text box size becomes the scroll container in HTML exports, while the full text content is preserved inside it.
### Step 2. Enable scrollable HTML text in Bannerify
Open the layer settings for that text layer, then enable:
- **Enable scrollable HTML text**
This feature is only available for truncated text layers.
### Step 3. Choose scroll behavior
When enabled, choose one of these modes:
- **Manual User Scrollable**: user scrolls manually for the full timeline.
- **Auto Scroll on Layer Enter**: starts auto-scrolling when the layer enters.
- **Auto Scroll on Banner End**: starts auto-scrolling when the banner timeline finishes.
#### Banner loop behavior
- If playback count is finite, **Auto Scroll on Banner End** triggers only on the final playthrough.
- If the banner is set to infinite looping, **Auto Scroll on Banner End** is skipped.
### Step 4. Review export notes
- Scrollable truncated text is exported in **HTML** outputs.
- Native browser/device scrollbar styling is used.
- If that layer has an image format override applied, scrollable HTML text is disabled for that layer.
### Customizing scrollbar styles
If you want to customize the scrollbar styling for scrollable truncated text layers or popup overlay text, enable **Inject Custom Code** in your HTML export settings, then paste this into the **Custom CSS** field.
```css
:root {
--bannerify-scrollbar-color: #ff6600;
--bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
--bannerify-scrollbar-width: 8px;
--bannerify-scrollbar-height: 8px;
--bannerify-scrollbar-radius: 8px;
}
/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
scrollbar-color: var(--bannerify-scrollbar-color)
var(--bannerify-scrollbar-track-color);
scrollbar-width: thin;
}
/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
width: var(--bannerify-scrollbar-width);
height: var(--bannerify-scrollbar-height);
}
[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
background-color: var(--bannerify-scrollbar-color);
border-radius: var(--bannerify-scrollbar-radius);
}
[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
background-color: var(--bannerify-scrollbar-track-color);
}
```
You can change the values at the top to update the scrollbar color, track color, width, height, and corner radius. Some browsers and mobile devices may still render scrollbars using their native system style, but the CSS will be applied wherever the client allows custom scrollbar styling.
> **Warning:** Scrollable HTML text is designed for truncated text layers only. If your layer is not truncated, it should be exported using normal text/image behavior.
---
---
url: "/bannerify/design/unclip-content.md"
description: "By default, Bannerify only exports the visible image areas inside of your banner, which helps to save on un-needed image data being included in your HTML exports, but you can optionally override this behavior."
---
# Including a layer's unclipped image content
> By default, Bannerify only exports the visible image areas inside of your banner, which helps to save on un-needed image data being included in your HTML exports, but you can optionally override this behavior.
[Video](/assets/videos/bannerify/design/unclip-layer.mp4)
If you do need to include the full unclipped image area outside of your banner dimensions, due to the animation moving in/out of the overall banner frame area, you can optionally do this for any layer by clicking any layer's **Settings** icon button in the main timeline to open the layer settings, and enabling the **Include full unclipped layer** toggle.
This will unclip any parent frames for that layer during export and include the full layer content previously being clipped, and allow you to see that extra image area being included in animations that move the animation in/out of the banner's dimensions.
> **Tip:** **Bulk applying clipping settings**. As with other layer settings, you can also apply your custom clipping setting to layers in bulk by using the [bulk apply](/bannerify/animation/animating-banners#applying-bulk-animations) feature.
> **Warning:** **Unclipping image layers will increase file sizes**. Please use this feature carefully if you need to keep your banner file sizes low. Unclipping a layer's content area will include more of the image, so this is especially important to be mindful of if your image layers are much larger in dimensions to the banner dimensions (which usually acts as the clipping size, by default).
---
---
url: "/bannerify/design/variants.md"
description: "Bannerify can export multiple HTML, GIF, MP4, WebM, APNG, WebP, image, or PDF banner variants from a single Figma banner set by applying rows from a CSV, XLSX, or ZIP spreadsheet source during export."
---
# Creating banner variants from spreadsheet data
> Bannerify can export multiple HTML, GIF, MP4, WebM, APNG, WebP, image, or PDF banner variants from a single Figma banner set by applying rows from a CSV, XLSX, or ZIP spreadsheet source during export.
### Video Tutorial: Bulk export Figma banner variants from a spreadsheet
This video tutorial is a complete step-by-step guide showing you how to bulk export Figma banner variants from a spreadsheet to HTML or Video/GIF using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/EiVk0G0nEU4)
[Video](/assets/videos/bannerify/export/banner-spreadsheet-variants.mp4)
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.
> **Tip:** 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 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. 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.
### 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}`
> **Tip:** 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
---
---
url: "/bannerify/design/video.md"
description: "You can embed video files to any Figma layer in your Bannerify timeline by clicking on the **Settings** icon button for that layer, and then pasting in a URL pointing to a valid video file (`.mp4` or `.webm`) into the video embed input field."
---
# Including Video file embeds in your banners
> You can embed video files to any Figma layer in your Bannerify timeline by clicking on the **Settings** icon button for that layer, and then pasting in a URL pointing to a valid video file (`.mp4` or `.webm`) into the video embed input field.
### Video Tutorial: Add video embeds to Figma banner exports
This video tutorial is a complete step-by-step guide showing you how to add video file embeds to your banners using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/8eqKeU4c4bc)
> **Warning:** **YouTube/Vimeo links will not work.** You must link directly to an .mp4 video file URL, by uploading your video to a service like [Dropbox](https://www.dropbox.com/) first.
[Video](/assets/videos/bannerify/design/video-embeds.mp4)
While the Figma Plugin API doesn't support reading video files directly from your Figma file layers, Bannerify allows you to embed videos into your timeline layers by pasting in a direct URL pointing to an `.mp4` or `.webm` file.
To get a video file, you can either browse the selection of free stock videos on a site like [Pixabay](https://pixabay.com/videos/), or you can upload your own `.mp4` or `.webm` file to a file hosting service like [Dropbox](https://dropbox.com) or [Backblaze B2](https://www.backblaze.com/b2/cloud-storage.html), and then copy the URL link to your animation to use it in Bannerify.
By default, your video will automatically loop, but you can change this if needed by turning off the **Loop Embed** toggle.
To remove a video animation from your layer, click on the the **Settings** icon button again and remove the URL from the video embed input field.
> **Note:** If you're copying a Dropbox link, please ensure it's linking direclty to the video file itself (you should `.mp4` as part of the URL), as sometimes Dropbox "Share"/"Copy Link" buttons will link to an entire folder instead, depending on which part of the Dropbox interface they're viewed from.
> **Tip:** **Bulk applying video file URLs** As with other layer settings, you can also apply your video file URL setting to layers in bulk by using the [bulk apply](/bannerify/animation/animating-banners#applying-bulk-animations) feature.
> **Tip:** **Spreadsheet-driven video and Lottie swaps** You can also swap embedded media per spreadsheet row during export by using the [variants workflow](/bannerify/design/variants) with direct `.mp4`, `.webm`, or `.json` URLs, or matching `.mp4`, `.webm`, or `.json` files bundled inside an uploaded ZIP source.
> **Warning:** **Keep the total size of any video embeds under 4mb** to avoid your banner ad getting blocked by [Chrome's heavy ad policy update](https://developer.chrome.com/blog/heavy-ad-interventions) that they've rolled out.
---
---
url: "/bannerify/export/animated-png.md"
description: "Once you've finished animating your layers in the timeline, you can export your banners to animated PNG (APNG) files."
---
# Exporting your banners to animated PNG image
> Once you've finished animating your layers in the timeline, you can export your banners to animated PNG (APNG) files.
### Video Tutorial: Export banners to animated PNG (APNG) images from Figma
This video tutorial is a complete step-by-step guide showing you how to export production-ready animated banners from Figma to animated PNG (APNG) images using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/GoBXTURjPuM)
[Video](/assets/videos/bannerify/export/animated-apng.mp4)
After you've clicked the **Export to GIF/Video** and configured your export settings, you can click the **Export APNG** button at the bottom of the export panel to begin exporting your banners from Figma to animated PNG images. This will export your animated banners to [animated PNG](https://www.litmus.com/blog/animated-pngs-in-email-an-alternative-to-gifs) image files.
> **Note:** **Browser Support**. Due to browser compatibility issues, **Animated PNG** images can _only_ be exported using [Chrome](https://www.google.com/intl/en_us/chrome/) or the [Figma Desktop App](https://www.figma.com/downloads/).
> **Tip:** **Including or excluding banners in your export**. By default, all of the top level layers in your Figma file that are loaded into Bannerify as banners will be included in your export; if you would like to exclude any banners from being included (without [re-loading the selected banners](/bannerify/design/figma-frames#refreshing-your-banners-from-figma) in), you can toggle the **Include Banner in Export** switch in any banner's timeline header to "off"; this will hide that banner's timeline and also exclude it from being added to any exports.
### Frames Per Second
You can change the framerate of your GIF exports by using the **Frames Per Second** select box options. You can select from the FPS options below:
- 60 FPS (Ludicrous Mode)
- 30 FPS (Ultra Smooth)
- 24 FPS (Smooth)
- 18 FPS (Less Smooth)
- 12 FPS (Least Smooth)
- 6 FPS (Jittery)
> **Warning:** **Higher FPS will take longer to render**. Please note that more frames will take longer to export and ouput larger file sizes. For example, exporting a **5 second timeline** at **24 FPS** will render out **120 frames** _per_ banner.
### Downloading the final PNG .zip file
After Bannerify has finished processing your banners, you'll be shown a confirmation message; you can download your `.zip` file containing your exported banners by clicking the **Download your .zip file** button.
> **Tip:** **Saving file downloads from Figma** If you're using the Figma **desktop app**, you'll see a prompt appear to download your file. However, if you're using Figma in a **web browser**, your file will automatically be downloaded to your computer by default (usually to the **Downloads** directory on your computer).
### Opening your PNG .zip file
After you've downloaded your `.zip` file from Figma to your computer, you can open your file explorer to the directory where it was saved. **Double clicking** on the exported `.zip` file will unzip the contents and let you use your banners however you like.
---
---
url: "/bannerify/export/animated-webp.md"
description: "Once you've finished animating your layers in the timeline, you can export your banners to animated WebP files."
---
# Exporting your banners to animated WebP image
> Once you've finished animating your layers in the timeline, you can export your banners to animated WebP files.
### Video Tutorial: Export banners to animated WebP images from Figma
This video tutorial is a complete step-by-step guide showing you how to export production-ready animated banners from Figma to animated WebP images using the Bannerify plugin.
[Embedded media](https://www.youtube.com/embed/-MsleYiQHIQ)
[Video](/assets/videos/bannerify/export/animated-webp.mp4)
After you've clicked the **Export to GIF/Video** and configured your export settings, you can click the **Export WebP** button at the bottom of the export panel to begin exporting your banners from Figma to animated WebP images. This will export your animated banners to [animated WebP](https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/#aa-use-animated-webp) image files.
> **Note:** **Browser Support**. Due to browser compatibility issues, **Animated WebP** videos can _only_ be exported using [Chrome](https://www.google.com/intl/en_us/chrome/) or the [Figma Desktop App](https://www.figma.com/downloads/).
> **Tip:** **Including or excluding banners in your export**. By default, all of the top level layers in your Figma file that are loaded into Bannerify as banners will be included in your export; if you would like to exclude any banners from being included (without [re-loading the selected banners](/bannerify/design/figma-frames#refreshing-your-banners-from-figma) in), you can toggle the **Include Banner in Export** switch in any banner's timeline header to "off"; this will hide that banner's timeline and also exclude it from being added to any exports.
### Frames Per Second
You can change the framerate of your GIF exports by using the **Frames Per Second** select box options. You can select from the FPS options below:
- 60 FPS (Ludicrous Mode)
- 30 FPS (Ultra Smooth)
- 24 FPS (Smooth)
- 18 FPS (Less Smooth)
- 12 FPS (Least Smooth)
- 6 FPS (Jittery)
> **Warning:** **Higher FPS will take longer to render**. Please note that more frames will take longer to export and ouput larger file sizes. For example, exporting a **5 second timeline** at **24 FPS** will render out **120 frames** _per_ banner.
### Downloading the final WebP .zip file
After Bannerify has finished processing your banners, you'll be shown a confirmation message; you can download your `.zip` file containing your exported banners by clicking the **Download your .zip file** button.
> **Tip:** **Saving file downloads from Figma** If you're using the Figma **desktop app**, you'll see a prompt appear to download your file. However, if you're using Figma in a **web browser**, your file will automatically be downloaded to your computer by default (usually to the **Downloads** directory on your computer).
### Opening your WebP .zip file
After you've downloaded your `.zip` file from Figma to your computer, you can open your file explorer to the directory where it was saved. **Double clicking** on the exported `.zip` file will unzip the contents and let you use your banners however you like.
---
---
url: "/bannerify/export/backup-image.md"
description: "This can be helpful for certain advertising platforms that prefer (or require) you to include a backup static fallback JPG image."
---
# Including a backup.jpg fallback image file for all banners
> This can be helpful for certain advertising platforms that prefer (or require) you to include a backup static fallback JPG image.
[Video](/assets/videos/bannerify/export/add-backup-image.mp4)
Enabling the **Include a "backup.jpg" for all banners** toggle will automatically export your frames from Figma as a @1x JPG and be included in each banner folder as a `backup.jpg` file.
Specifying a maximum size in kilobytes (kb) will automatically optimize the `backup.jpg` image file to be under your specified limit. If you don't specify a size limit for your backup image, it will automatically default to 200kb (you also can set a higher limit, if needed).
## Hiding layers from your backup images
[Video](/assets/videos/bannerify/design/hide-backup-layers.mp4)
If you have different content layers transitioning in and out at different points in your banner animation, you will likely want to hide some of those from appearing in the your `backup.jpg` file.
You can do this by enabling the **Hide in backup.jpg** toggle for any layer in its [layer settings panel](/bannerify/design/hide-layers-from-backup), which will ensure it doesn't get included in the backup image for that banner.
> **Tip:** You can also show or hide elements from your `backup.jpg` file in bulk by using the [bulk apply](/bannerify/animation/animating-banners#applying-bulk-animations) feature.
---
---
url: "/bannerify/export/banner-size-optimization.md"
description: "Some ad platforms have a size limit per banner (eg. 150kb), so you can use this HTML export setting to try and automatically fit each banner under that size threshold."
---
# Setting a maximum file size target for each banner in your HTML exports
> Some ad platforms have a size limit per banner (eg. 150kb), so you can use this HTML export setting to try and automatically fit each banner under that size threshold.
[Video](/assets/videos/bannerify/export/set-target-size.mp4)
Enabling the **Maximum file size target for each banner** option will allow you to specify a maximum size in kilobytes (kb) for each banner; the plugin will automatically optimize the image assets to be under your specified limit. If you don't specify a size limit with the compression option enabled, it will automatically default to 150kb, which is the size limit (per banner) imposed by Google Ads.
> **Note:** **If you have a low file size target, and also have lots of image assets in your banners** (and/or have the global image scale set to `1.5x` or `2x`), the banner sizes still may end up larger than your target, as there is a limit to how much each image asset can be compressed before it's un-usable.
> **Tip:** **Exporting WebP images instead of JPG/PNG**. You can optionally use WebP compression by enabling the **Use WebP** toggle switch. Enabling the the **Use WebP** toggle will automatically compress/convert any of JPG/PNG images into Google's **[WebP](https://en.wikipedia.org/wiki/WebP)** format instead; which is designed to have a better image:quality ratio. Please check the [WebP browser support](https://caniuse.com/webp) to ensure that using this feature aligns with the browsers you're supporting with your banner ads.
> **Warning:** **Any animated GIF files will not be included in the target file size**. Please note, due to GIFs being large in file size by default and not highly compressible, any maximum file size targets will not include any animated GIFs that are included in your HTML banner export.
---
---
url: "/bannerify/export/code-output.md"
description: "Bannerify supports exporting HTML banners for a variety of different ad platforms (eg. Google Ads), or you can also export generic HTML banners without any clickTag code included."
---
# Select the target ad platform or HTML output type for your banners
> Bannerify supports exporting HTML banners for a variety of different ad platforms (eg. Google Ads), or you can also export generic HTML banners without any clickTag code included.
## Standard HTML export options
[Video](/assets/videos/bannerify/export/use-editable-text.mp4)
This will export your banners to vanilla HTML, **without clickTags**.
- Vanilla HTML/CSS
- Vanilla HTML/CSS/JavaScript ([GreenSock GSAP](https://greensock.com/gsap/))
## Advertising platform export options
[Video](/assets/videos/bannerify/export/select-ad-option.mp4)
This will export your banners to platform specific HTML/Javascript, **with clickTags**.
- [AdForm](https://site.adform.com)
- [AdRoll](https://www.adroll.com/)
- [Adition](https://www.adition.com/)
- [Adobe Advertising Cloud](https://business.adobe.com/au/products/advertising/adobe-advertising-cloud.html)
- [AppNexus](https://www.appnexus.com/fr)
- [Basis](https://basis.com/)
- [DemandSience](https://demandscience.com/) (formerly Terminus)
- [DoubleClick Campaign Manager (DCM)](https://developers.google.com/doubleclick-advertisers)
- [DoubleClick Studio](https://support.google.com/richmedia/answer/2389093?hl=en)
- [Display & Video 360 (DV360)](https://marketingplatform.google.com/about/display-video-360/)
- [FlashTalking](https://www.flashtalking.com/)
- [Google Ads](https://ads.google.com/intl/en_au/home/)
- [IAB](https://iabaustralia.com.au/)
- [Jivox (Dynamic Creative)](https://jivox.com/)
- [Responsive Display Ads](https://support.google.com/google-ads/answer/6363750?hl=en-AU)
- [Sizmek](https://sizmek.com/)
- [StackAdapt](https://www.stackadapt.com/)
- [The Trade Desk](https://www.thetradedesk.com/)
- [Yandex](https://yandex.com/support/direct/products-cpm-campaign/about.html)
## Rendering text layers as `` tags instead of SVG `` tags
[Video](/assets/videos/bannerify/export/use-editable-text.mp4)
By default, Bannerify will export any text layers as SVG image files to ensure your text is visually accurate; however, if you would prefer to render the text as rich text HTML `` tags instead, you can enable the **Export text as tags instead of