Exporting your banners to HTML

Video Tutorial: Export banners to HTML/GSAP from Figma

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.

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

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.

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

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.

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></a> tag.

Advertising platform export options ​

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

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.

Inject custom HTML/CSS/Javascript code ​

Video Tutorial: Add custom HTML, CSS, and Javascript to Figma banner exports

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

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.