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.
Banner 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.
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.
Banner Image Size Optimization
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.
- Vanilla HTML/CSS
- Vanilla HTML/CSS/JavaScript (GreenSock GSAP)
Adding a custom <a></a>
tag URL link
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.
- AdForm
- AdRoll
- Adition
- Adobe Advertising Cloud
- AppNexus
- Basis
- DoubleClick Campaign Manager (DCM)
- DoubleClick Studio
- Display & Video 360 (DV360)
- FlashTalking
- Google Ads
- IAB
- Jivox (Dynamic Creative)
- Responsive Display Ads
- Sizmek
- StackAdapt
- Terminus
- The Trade Desk
- Yandex
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.