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.

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 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.

​
Preview Page

When you export any HTML banners, Bannerify will automatically include an index.html preview page. This file loads in all of your exported banners on the same page, and lays them out in a grid where you can see them all at the same time. It’s perfect for uploading and sharing a preview of all your banners to a client or stakeholder on your team.

​
Preview Page Title

The name of your Figma document will be used as the <title> tag for the exported HTML preview page from Bannerify.

​
Preview Page Banner Order

The order of your banner frames in the Figma layers panel will be used to order your banners on the preview page.

​
Selecting a layout for your preview page

Updating the preview page layout select box option will set the grid style used to position your banners in the generated index.html preview page. You can change this by selecting a different option in the select box.

​
Masonry Layout Grid

The masonry layout mode option will automatically figure out the best layout to fit all of your banners. This can be a good option for a large banner set.

​
Centered Layout Grid

The centered layout mode option will vertically align and horitzontally center all of the banners. This can be a good option for smaller banner sets.

​
Enabling “Dark Mode” on your preview page

Enabling the Dark Mode setting will set a dark theme/background to your generated index.html preview page. You can enable this setting if your banner designs work better against a darker background.

​
Adding a branded header to your preview page

If you’re showing your index.html preview page to clients or third party stakeholders, you can add some custom HTML and CSS to apply your own branding or custom header to the page. Any HTML you add will be

​
Custom HTML

Any code added to the Custom HTML field will be injected directly after the <body> tag in the generated index.html page. You can add anything here, like a custom header, or something as simple as an <img> tag linking to your company logo.

​
Custom CSS

Any code added to the Custom CSS field will be injected into a custom <style> tag (so you don’t need to add your own <style> tag in your input) in the index.html page. This can be used to style the Custom HTML you’ve added.

​
Adding a 1px black border to all banners

Enabling the 1px border option will automatically include a border: 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.

​
Adding custom CSS classes to layers

You can optionally include your own custom CSS class names to any layer by clicking any layer’s Settings icon button in the main timeline to open the layer settings, and typing/pasting the custom CSS class names you would like to be included on that layer in its HTML export.

Bulk applying custom CSS classes. As with other layer settings, you can also apply your custom CSS classes to layers in bulk by using the bulk apply feature.

​
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 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.

​
Image Options

​
Including a backup.jpg for all banners

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. This can be helpful for certain advertising platforms that prefer (or require) you to include a backup image.

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 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. Enabling the Hide in backup.jpg toggle for any layer in its settings panel will ensure it doesn’t get included in the backup image for that banner. You can also show or hide elements from your backup.jpg file in bulk by using the bulk apply feature.

​
Rendering banner images @2x retina

Enabling the Render banner images @2x retina toggle option will automatically export any JPG and PNG images at retina (@2x) resolution. This will give you sharper looking images in your banners, but will also increase the file sizes of any JPG and PNG images.

You can also optionally override this per layer by clicking any layer’s Settings icon button in the main timeline to open the layer settings, where you can specify forcing the layer to be exported as 1x, 2x, or left as the default (which will use the global Render banner images @2x retina toggle option, which is the default).

​
Overriding image export format

Bannerify will automatically detect the optimal export format for each layer’s image, but you can override this by clicking any layer’s Settings icon button in the main timeline to open the layer settings, where you can specify forcing the layer to be exported as a JPG, PNG or SVG.

Alternatively, you can override this to set the export format of any layer to JPG or PNG by adding your own export setting.

​
Setting a maximum file size target for each banner

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.

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 format instead; which is designed to have a better image:quality ratio. Please check the WebP browser support to ensure that using this feature aligns with the browsers you’re supporting with your banner ads.
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.

​
Code Output Settings

​
Standard HTML export options

This will export your banners to vanilla HTML, without clickTags.

For any of the Standard HTML export options, you have the option to add a URL that will be injected automatically to each banner as an <a> tag.

Add hyperlinks to individual layers using Figma’s Prototype feature If you’d prefer to set the URL per banner, you can select your banner frame, then click on the Prototype tab in Figma, then add an On click interaction, and specify a link (eg. https://example.com) in the Open link action. This will automatically include an <a> tag with that URL in your HTML banner export.

​
Advertising platform export options

This will export your banners to platform specific HTML/Javascript, with clickTags.

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.

​
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.

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.

​
Inject custom HTML/CSS/Javascript code

If you need to add your own custom HTML/CSS/Javascript to all of your HTML banner exports, you can enable the Inject Custom Code toggle in the export settings, which will allow you to add custom HTML before the closing </body> (for adding content) or </head> (for adding meta tags or asset links) tags, or adding custom CSS to a new <style></style> tag, or adding custom Javascript code inside new a <script></script> tag.

​
Starting the HTML export process

Once you’re happy with all of your 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.

​
Downloading the final HTML .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.

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 HTML .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.

Was this page helpful?

Unclip Frame ContentExport to Video