← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to use the Bannerify Figma plugin to export HTML banners with optional custom HTML, CSS, and Javascript injected into the output. It also demonstrates how to turn the feature on or off and how custom code appears in the exported preview page.

Things you'll need

• Bannerify should already be installed or saved as a Figma plugin.
• The banners should already be designed and ready to export.

Steps

1. Open Figma, use the Resources icon to search for Bannerify, and save or run the plugin from Plugins > Saved Plugins.
2. In Bannerify, open Export to HTML and turn on Inject Custom Code.
3. Paste custom HTML into the body tag field for banner content.
4. Paste custom CSS into the CSS styles field and Javascript into the Javascript code field.
5. Export Banners, download the zip file, and open the HTML preview page to test the injected code.
6. Turn off Inject Custom Code and export again to remove the custom code from the output.
7. Optionally add code to the HTML to head tag field for items like meta tags or script tags that belong in the document head.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Inject custom HTML/CSS/Javascript code into all of your HTML banner exports
• Next: Export animated HTML banners from Figma to multiple ad platforms
• Open Bannerify in the Figma Community