` 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**. 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 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**. 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/design/nested) 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 a non-text Figma layer in your Bannerify timeline by clicking 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 a non-text Figma layer in your Bannerify timeline by clicking 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 walks through how to add Lottie file animations to your banners using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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 **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: "Move, scale, rotate, or fade a parent group while its nested child layers play their own Bannerify animations."
---
# Animate groups and nested layers independently
> Move, scale, rotate, or fade a parent group while its nested child layers play their own Bannerify animations.
[Video](/assets/videos/bannerify/design/nested-layers.mp4)
### Video Tutorial: Animate groups and layers independently with Group Motion
[Embedded media](https://www.youtube-nocookie.com/embed/B_YTLpBfROg)
[Follow the step-by-step tutorial](/bannerify/tutorials/animate-groups-and-layers-independently).
Bannerify can animate a parent group and the layers inside it at the same time. For example, you can move a grouped car across the banner while independently rotating its wheel layers.
## Things you'll need
- A top-level Figma frame containing your banner design.
- A parent layer with one or more child layers inside it.
- Separate names for any child layers you want to animate individually.
## Steps
1. In Figma, place the related layers inside one parent group. For a car animation, you might create a `Car` group containing `Body`, `Wheel Left`, and `Wheel Right`.
2. Tell Bannerify to expand the parent group using either of these methods:
- Add `[expand]` to the parent layer name, such as `Car [expand]`.
- Open Bannerify, click the **List** icon at the top of the banner timeline, then click the **Arrow** beside the parent layer.
3. In the nested-layer panel, enable **Keep Parent Animatable** beside the expanded parent. This option is off by default, so existing nested-layer setups keep their previous child-only behaviour.
4. Close the nested-layer panel. Bannerify will refresh the banner and add the exposed child layers to the timeline.
5. Confirm that the timeline contains the child layers and a separate parent row labelled **(Group Motion)**. In this example, the parent row appears as `Car [expand] (Group Motion)`.
6. Apply the shared movement to the **Group Motion** row. For example, apply **Slide In Left** to move the complete car into the banner.
7. Apply independent animations to the child rows. For example, apply **Rotate 360°** to each wheel.
8. Click **Play All Banners** or use the timeline scrubber to preview the combined result.
9. Export the banner normally. The parent and child animations are composed in HTML, GIF, MP4, WebM, and other canvas-based media exports.
## Group Motion
[Video](/assets/videos/bannerify/animation/nested-parent-animation.mp4)
When **Keep Parent Animatable** is enabled, Bannerify marks the parent as **Animatable** and adds a separate **Group Motion** row to the timeline. The parent row acts as a motion wrapper around its exposed child layers. Translation, scale, rotation, opacity, and clipping applied to the parent are combined with the animations applied to each child.
If **Keep Parent Animatable** is turned off, the child layers remain expanded and animatable, but Bannerify does not add the parent **Group Motion** row. Bannerify remembers this option for each parent layer.
> **Tip:** Use clear, consistent child-layer names when the same structure appears across several banner sizes. You can then use **Quick Select Layers** to select matching layers and apply their animations in bulk.
## Using Figma Sections
The same setup works when **Use Figma sections as multi-scene banners** is enabled. Each exposed row includes its scene number, while an opted-in parent remains available as a separate **Group Motion** row inside that scene.
## Figma Slot layers
Bannerify also supports Figma [slot layers](https://help.figma.com/hc/en-us/articles/38231200344599-Use-slots-to-build-flexible-components-in-Figma) inside banner frames. Slot containers are treated like nested layer groups and start expanded the first time Bannerify loads them, making their child layers immediately available in the timeline.
If you manually collapse a Slot layer, Bannerify remembers that preference when the banner is refreshed.
## If the group or child layers are missing
- Make sure the banner is a top-level Figma frame or is inside a Section loaded in multi-scene mode.
- Confirm the parent has child layers and is expanded in Bannerify.
- If the child layers appear without the parent **Group Motion** row, open the nested-layer panel and enable **Keep Parent Animatable** beside the parent.
- If you renamed the parent with `[expand]` after loading the banner, click **Refresh Banner Layers**.
- Keep the child layers visible in Figma and ensure they are inside the expanded parent.
## Useful links
- [Animate your banner layers](/bannerify/animation/animating-banners)
- [Select matching layers with Quick Select](/bannerify/animation/quick-select-layers)
- [Create multi-scene banners with Figma Sections](/bannerify/design/scenes)
- [Export animated banners to HTML](/bannerify/export/html)
- [Export banners to video](/bannerify/export/video)
---
---
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 want 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 want 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 (for example, 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 (for example, 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 walks through how to add rich text popup overlays to HTML Figma banners using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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 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:** 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 walks through how to create multi-scene animated banners in Figma (and export to HTML or video) using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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.
Changes to the timeline length apply immediately to the preview and GIF/video exports, including multi-scene banners. You do not need to reload the banners after changing the duration.
> **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 scrollable HTML text or auto-scrolling GIF and video text in Bannerify."
---
# Adding scrollable truncated text layers to your banners
> Use truncated text layers in Figma to export scrollable HTML text or auto-scrolling GIF and video text in Bannerify.
### Video Tutorial: Add scrollable text disclaimers to Figma banner exports
This video walks through how to add scrollable text disclaimers (with auto-scroll) to Figma banner exports using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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, and render auto-scrolling text into GIF/video outputs.
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).
In HTML exports, the visible text box size becomes the scroll container while the full text content is preserved inside it. In GIF/video exports, the same text box clips the rendered auto-scroll motion.
## Step 2. Enable scrollable text in Bannerify
Open the layer settings for that text layer, then enable:
- **Enable scrollable 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.
In GIF/video exports, both auto-scroll modes use the same scroll speed as HTML exports. If the scroll needs more time than the original banner timeline, the exported file is extended so the text can finish scrolling at that speed.
### 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
- In **HTML** outputs, manual mode remains user-scrollable. In either auto mode, wheel, touch, or scrollbar input stops the automatic motion at its current position so the user can continue scrolling manually.
- In **GIF/video** outputs, auto-scroll modes are rendered into the exported frames; manual mode remains static because exported files are not interactive.
- Native browser/device scrollbar styling is used.
- If that layer has an image format override applied, scrollable 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 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: "Choose whether Bannerify includes a layer's full unclipped artwork when exporting animations."
---
# Including a layer's unclipped image content
> Choose whether Bannerify includes a layer's full unclipped artwork when exporting animations.
[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 includes artwork outside the layer's own frame and its parent frames, so the full image can move into view during an animation.
When an animated layer crosses the banner edge, Bannerify automatically includes the artwork beyond that edge while preserving the layer's own clipping. Enable **Include full unclipped layer** if you also want to include content outside the layer's own frame.
> **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 walks through how to bulk export Figma banner variants from a spreadsheet to HTML or Video/GIF using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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 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}`
> **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 a non-text Figma layer in your Bannerify timeline by clicking 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 a non-text Figma layer in your Bannerify timeline by clicking 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 walks through how to add video file embeds to your banners using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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.
> **Note:** **Hosted video URLs stay remote in HTML exports by default.** Bannerify keeps direct `.mp4`/`.webm` video embed URLs in the exported HTML instead of downloading the video into the ZIP. To package hosted video files into HTML export ZIPs, enable **Download videos into ZIP** beside the embed URL field. Google Ads HTML5 and Google App Campaign Playable uploads still leave video embed URLs unbundled because those ZIP uploads do not support packaged video files.
[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 lets you embed videos into your non-text 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 **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 walks through how to export production-ready animated banners from Figma to animated PNG (APNG) images using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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 want to exclude any banners from being included (without [re-loading the selected banners](/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners) 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**. 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 walks through how to export production-ready animated banners from Figma to animated WebP images using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.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 want to exclude any banners from being included (without [re-loading the selected banners](/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners) 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**. 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 (for example, 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 (for example, 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 **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**. 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/choose-a-format.md"
description: "Compare Bannerify HTML, GIF, MP4, WebM, APNG, and animated WebP outputs before exporting a campaign."
---
# Choose a Bannerify export format
> Compare Bannerify HTML, GIF, MP4, WebM, APNG, and animated WebP outputs before exporting a campaign.
Choose the format requested by the destination, media team, or delivery specification. HTML packages and rendered media files solve different problems, and a successful export does not guarantee that a platform accepts that format.
## Compare the outputs
| Format | Use it when | Output and constraints |
| --- | --- | --- |
| [HTML](/bannerify/export/html) | The destination needs an interactive HTML creative, a platform-specific ZIP, responsive layouts, or custom-hosted code | Choose the exact [platform output](/bannerify/export/platforms/) because click handling, metadata, SDKs, manifests, and package structure can differ |
| [Animated GIF](/bannerify/export/gif) | The destination explicitly accepts an animated GIF | Supports lossless or lossy compression and one-time or infinite playback; advanced palette settings can affect the result |
| [MP4](/bannerify/export/video) | The destination needs an H.264 MP4 video or the export needs an optional audio track | Export using Chrome or the Figma desktop app |
| [WebM](/bannerify/export/webm-video) | The destination explicitly accepts a WebM video | Export using Chrome or the Figma desktop app |
| [Animated PNG (APNG)](/bannerify/export/animated-png) | The destination explicitly accepts an APNG image | Export using Chrome or the Figma desktop app |
| [Animated WebP](/bannerify/export/animated-webp) | The destination explicitly accepts an animated WebP image | Export using Chrome or the Figma desktop app |
## Choose by requirement
### You need ad-platform packaging or click handling
Choose **HTML**, then select the exact destination under [Bannerify HTML platform outputs](/bannerify/export/platforms/). Named outputs can add their own click wrapper, metadata, SDK, manifest, and ZIP structure.
### You need several responsive layouts in one HTML output
Choose the responsive HTML option that matches the destination. Bannerify selects between the supplied Figma layouts; it does not generate missing sizes, breakpoints, or orientations.
### You need a rendered file instead of code
Choose GIF, MP4, WebM, APNG, or animated WebP only after confirming that the destination accepts it. These exports render frames from the Bannerify timeline into the selected media format.
### You need audio
Use **MP4**. Bannerify can add an MP3 file or use audio from an embedded video in the MP4 export workflow.
### The HTML upload also needs a static fallback
Enable [`backup.jpg`](/bannerify/export/backup-image) for a 1x JPG fallback. You can hide selected layers from that fallback and set a target size for the file.
## Plan for file size and rendering time
- Higher frame rates take longer to render and produce more frames, which can increase media file size.
- The HTML [maximum file-size target](/bannerify/export/banner-size-optimization) compresses image assets toward the requested threshold, but a low target may still be exceeded when the creative contains many or large assets.
- Animated GIFs embedded inside an HTML banner are not included in Bannerify's HTML file-size target.
- Higher HTML [image scales](/bannerify/export/retina-images) can produce sharper JPG and PNG assets, but also increase their file sizes.
## Validate the deliverable
1. Confirm the required format, dimensions, duration, file-size limit, and playback behavior with the recipient.
2. Export a representative banner using the exact destination settings.
3. Preview the unzipped result. If a local HTML preview appears frozen, test without an ad blocker or privacy extension before re-exporting.
4. Validate or upload the package in the destination platform before producing the full campaign.
---
---
url: "/bannerify/export/cloudflare-pages.md"
description: "Use Bannerify's built-in Cloudflare Pages integration to publish an exported HTML banner preview page to a shareable URL."
---
# Upload a Bannerify preview page to Cloudflare Pages
> Use Bannerify's built-in Cloudflare Pages integration to publish an exported HTML banner preview page to a shareable URL.
Bannerify can publish the generated HTML preview page and all of its banner assets directly to Cloudflare Pages.
## Configure Cloudflare Pages
1. In Cloudflare, create an [API token](https://dash.cloudflare.com/profile/api-tokens) with **Cloudflare Pages: Edit** access for the account you want to use.
2. Copy the account ID from your Cloudflare dashboard.
3. In Bannerify, click **Export to HTML**, enable **Upload Preview Page**, and select **Cloudflare Pages**.
4. Paste the API token and account ID, then enter a lowercase Pages project name using letters, numbers or hyphens.
After you click **Export Banners**, Bannerify uploads the generated preview files and returns a Cloudflare Pages preview URL. If the named Pages project does not exist, Bannerify creates it with `main` as the production branch before uploading.
The API token is stored in your Figma user's private client storage. The account ID and project name are saved with the current Figma page so the same project can be reused for later exports.
Cloudflare Pages offers a free plan for static sites, subject to its current [Pages limits](https://developers.cloudflare.com/pages/platform/limits/).
---
---
url: "/bannerify/export/code-output.md"
description: "Choose the correct Bannerify HTML output for an ad platform, responsive layout, or custom hosting workflow."
---
# Ad Platform Options
> Choose the correct Bannerify HTML output for an ad platform, responsive layout, or custom hosting workflow.
[Video](/assets/videos/bannerify/export/use-editable-text.mp4)
Every option in Bannerify's **Code Output Settings** has a dedicated guide below. Choose the exact destination requested by the media team instead of selecting a similarly named Google, responsive, or legacy platform format.
## Standard HTML outputs
- [HTML/JS (CSS @keyframes)](/bannerify/export/platforms/html-keyframes)
- [HTML/JS (GSAP/GreenSock)](/bannerify/export/platforms/html-gsap)
## Advertising platform outputs
- [AdForm](/bannerify/export/platforms/adform)
- [AdForm Mobile (MRAID)](/bannerify/export/platforms/adform-mobile)
- [Adition](/bannerify/export/platforms/adition)
- [AdRoll](/bannerify/export/platforms/adroll)
- [Adobe Ad Cloud](/bannerify/export/platforms/adobe-ad-cloud)
- [Amazon Ads](/bannerify/export/platforms/amazon-ads)
- [AppLovin (Responsive HTML5)](/bannerify/export/platforms/applovin-responsive)
- [AppNexus](/bannerify/export/platforms/appnexus)
- [Basis](/bannerify/export/platforms/basis)
- [BidTheatre](/bannerify/export/platforms/bidtheatre)
- [Delta Projects](/bannerify/export/platforms/delta-projects)
- [DemandScience](/bannerify/export/platforms/demandscience)
- [DoubleClick (DCM)](/bannerify/export/platforms/doubleclick-dcm)
- [DoubleClick Studio](/bannerify/export/platforms/doubleclick-studio)
- [DV360](/bannerify/export/platforms/dv360)
- [Flashtalking](/bannerify/export/platforms/flashtalking)
- [Google Ad Manager (DFP)](/bannerify/export/platforms/google-ad-manager)
- [Google Ads](/bannerify/export/platforms/google-ads)
- [Google Ads (Responsive HTML5)](/bannerify/export/platforms/google-ads-responsive)
- [Google App Campaign (Playable)](/bannerify/export/platforms/google-app-campaign-playable)
- [Google App Campaign (Responsive)](/bannerify/export/platforms/google-app-campaign-responsive)
- [Google Display Network](/bannerify/export/platforms/google-display-network)
- [IAB](/bannerify/export/platforms/iab)
- [Jivox Dynamic Creative (GSAP)](/bannerify/export/platforms/jivox-gsap)
- [Jivox Dynamic Creative (CSS)](/bannerify/export/platforms/jivox-css)
- [Performance Max (PMAX)](/bannerify/export/platforms/performance-max)
- [Responsive HTML (Media Queries)](/bannerify/export/platforms/responsive-html-media-queries)
- [Simpli.fi](/bannerify/export/platforms/simplifi)
- [Seznam Sklik](/bannerify/export/platforms/seznam-sklik)
- [6sense Dynamic Creative](/bannerify/export/platforms/6sense)
- [Sizmek](/bannerify/export/platforms/sizmek)
- [StackAdapt](/bannerify/export/platforms/stackadapt)
- [The Trade Desk](/bannerify/export/platforms/the-trade-desk)
- [USSD (Tap to SMS)](/bannerify/export/platforms/ussd-sms)
- [USSD (Tap to Call)](/bannerify/export/platforms/ussd-call)
- [Yandex](/bannerify/export/platforms/yandex)
- [Xandr](/bannerify/export/platforms/xandr)
## Multi-platform and other HTML outputs
- [Multiple Ad Platforms](/bannerify/export/platforms/multiple-ad-platforms)
- [Scaleable HTML/JS (CSS @keyframes)](/bannerify/export/platforms/scaleable-html)
- [Responsive HTML/JS (CSS @keyframes)](/bannerify/export/platforms/responsive-html-keyframes)
- [Figma Sections (Separate .zip Files)](/bannerify/export/platforms/figma-sections)
---
---
url: "/bannerify/export/gif.md"
description: "Once you've finished animating your layers in the timeline, you can export your banners to animated GIF files."
---
# Exporting your banners to animated GIF files
> Once you've finished animating your layers in the timeline, you can export your banners to animated GIF files.
### Video Tutorial: Export banners to GIFs from Figma
This video walks through how to export production-ready animated banners from Figma to GIFs using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.com/embed/J2wk4r1QL1k)
[Video](/assets/videos/bannerify/export/animated-gif.mp4)
Once you're happy with your banners and would like to export them to GIF, WebM, MP4 or animated WebP file you can click the **Export to GIF/Video** button in the Bannerify header. This will open the GIF/Video export settings.
> **Note:** **Including or excluding banners in your export**. By default, all of the frames in your Figma file that are loaded into Bannerify as banners will be included in your export; if you want to exclude any banners from being included, you can toggle the **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.
> **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 want to exclude any banners from being included (without [re-loading the selected banners](/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners) 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**. 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.
GIF frame delays use 10-millisecond increments. Bannerify alternates frame delays where needed to preserve the overall playback speed. Individual frames may therefore have slightly different durations. When you select 60 FPS for a GIF, Bannerify samples and exports it at 50 FPS so browsers can play it at the correct speed. The export panel and ZIP filename show the effective 50 FPS rate. Your selected frame rate is retained for MP4 and other formats.
## Lossless or lossy compression
By default, GIFs are exported with *Lossless* compression, which means that the file size is kept low without any noticeable quality loss. If you require even smaller GIFs (at the expensive of some quality loss), you can enable **Lossy** compression instead, and adjust the custom compression quality slider to your needs.
> **Note:** **Setting advanced dithering options**. If you know what you're doing, you can customise the type of [dithering](https://en.wikipedia.org/wiki/Dither#Examples_2) that's used in your GIF export by changing the image dithering dropdown selector option in the GIF export settings panel.
## Using global color palette
If you're exporting a GIF where the color palette for every frame is the same (with only some minor movement, text changes etc between them) and are seeing some color artifacts, you may want to enable the **All frames have the same color palette** toggle option, which will re-use the color palette from the first frame in your GIF, and apply that to all of the other frames in your GIF, too.
> **Warning:** **Global color palettes can be buggy**. Please only use this option as a last resort if your GIF is showing unwanted color related artifacts or banding, as it can cause other issues if some colors in other frames of your GIF aren't included in the first frame.
## Infinitely loop playback
Enabling the **infinitely loop playback** option will export GIFs that continuously loop their animation timeline forever. If you disable this setting, your GIFs will play through their animation timeline once, and then freeze on the final frame of the animation. This option only applies to **GIF** exports.
## Flagging transparent backgrounds for GIFs
By default, your GIF exports won't include transparent backgrounds. If your GIF does require transparency, Add the word **transparent** anywhere in your banner (parent Figma frame) layer name.
## Downloading the final GIF .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 GIF .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/html.md"
description: "Once you've finished animating your layers in the timeline, you can export your banners to animated HTML banners"
---
# Exporting your banners to HTML
> Once you've finished animating your layers in the timeline, you can export your banners to animated HTML banners
### Video Tutorial: Export banners to HTML/GSAP from Figma
This video walks through how to export production-ready animated banners from Figma to HTML/GreenSock (GSAP) in seconds using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.com/embed/SS2J6k5Wo7s)
### Video Tutorial: Export HTML banners from Figma to multiple ad platforms
This video walks through how to export animated HTML banners from Figma to multiple ad platforms with one click using the Bannerify plugin.
[Embedded media](https://www.youtube-nocookie.com/embed/Q16MPp9YKjg)
[Video](/assets/videos/bannerify/export/html-export.mp4)
## Exporting to HTML
Once you're happy with your banners and would like to export them to HTML, you can click the **Export to HTML** button in the Bannerify header. This will open the HTML export settings.
After you've configured all of your HTML export settings, you can click the **Export Banners** button at the bottom of the export panel to begin exporting your banners from Figma to HTML.
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.
Exported banner filenames preserve letters such as **Å, Ä, Ö, å, ä, ö** from your Figma frame names. Export folder names and the main ZIP filename also support accented letters. Path separators and unsupported punctuation are still removed from frame filenames.
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.
> **Note:** **Please ensure you unzip the exported `.zip` file first** before using the banners or uploading them to an ad platform, as the exported .zip file contains all of the individual banners (and the nested `_zips` folder, where all of your banners are pre-zipped individually, ready to be uploaded to an ad platform).
> **Warning:** **Browser ad blockers can stop local banner previews from playing correctly.** If an exported HTML banner looks frozen, does not animate, or behaves differently in your browser preview, temporarily disable ad blocker/privacy extensions for the local preview file or test in another browser before re-exporting.
Each HTML output format has its own setup and packaging requirements. Use the [Ad Platform Options](/bannerify/export/code-output) guide to choose the correct format before exporting.
> **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).
> **Tip:** **Reuse your export settings across Figma files:** While the Export to HTML settings panel is open and focused, press Ctrl + Shift + E to save your current export preferences as `bannerify-export-settings.json`. In another Figma file, open the same panel and press Ctrl + Shift + I to browse for that JSON file and apply its preferences to the current page. Use the Control key on both Windows and Mac.
## Standard Options
### Adding a 1px black border to all banners
Enabling the 1px border option will automatically include a `1px solid black` border to the CSS of all of your banners. This can be helpful for certain advertising platforms that prefer (or require) you to include a 1px black border to your banners.
### Adding a preloader animations to all banners
Enabling the preloader option will automatically include a preloader to the HTML of all of your banners. This loading animation will be displayed until all of the banner's images have loaded in the web browser.
## Playback Options
### Setting the number of times to play through banners
Setting this option will specify how many times you would like the banner timeline on all of your banners to play through from start to end. The default option is **1**, which means that your banners will play through the animation timeline from start to end **once**.
You can change this number by entering a higher number into the number input field, like **6**, for example. This would ensure that the timeline animation for all of your banners are played through **six times** from start to end.
### Infinitely looping your banners
You can repeat the animation timeline to play on repeat _forever_ in all of your banners by enabling the **Infinitely loop all banners** option.
## Include individual .zip files for each banner
Enabling the **Include individual .zip files for each banner** toggle will include an additional folder called `_zips` in your exported file. The `_zips` folder will contain individual zip files for each of the banners that you've exported. This can be useful and time saving if your advertising platform requires you to upload a zip file for each banner.
> **Info:** **Optionally include backup.jpg from zips** If you want the `backup.jpg` image file to be included inside each zip, enabling the **Add "backup.jpg" to individual zip files** toggle will ensure that `backup.jpg` images are included inside your individual zips. If this toggle is disabled while individually zipping your banners, and you've _also_ enabled the **Include a "backup.jpg" for all banners** toggle, all of your backup images will also be included in a `_backups` folder inside the root directory of the main Bannerify exported `.zip` file.
## Choosing an HTML output format
Bannerify can export platform-neutral HTML, platform-specific upload packages, responsive layouts, and several batch formats. Each option in **Code Output Settings** has a dedicated guide under [Ad Platform Options](/bannerify/export/code-output), including its setup, click handling, package structure, and testing notes.
## 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 want to exclude any banners from being included (without [re-loading the selected banners](/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners) 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.
## Minified code exports
To optimize file sizes, Bannerify will minifies all the code that's exported by default, and will save out a single `.html` file per banner. If you need your code to be more readable and/or split out into separate `.html`, `.css`, `.js` files, you can turn off the **Minified** toggle in the code export options.
## Export text as paragraph tags instead of SVG images
By default, any text layers in your Bannerify timeline will be exported as SVG images (in image tags), but you can optionally export these as rich text (in paragraph tags) instead by enabling the **Export text as tags instead of