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

This video walks through how to add custom HTML, CSS, and Javascript to Figma banner exports using the Bannerify plugin.

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.

Custom disclaimer overlay toggle example. You can reference this CodePen HTML/CSS/JS code example as a basic example for a common use case for this feature, which will inject a toggleable disclaimer pop-up over your banners. Feel free to copy and modify the styles and content as needed.

Saved Custom Code Presets (Optional)

The Saved Custom Code Presets feature lets you save and reuse different configurations of custom HTML, CSS, and JavaScript code when exporting banners. To use it, you can populate your custom code in the four available areas (Head HTML, Body HTML, CSS, and JavaScript), enter a descriptive name, and click Save as New Preset to store that configuration for future use.

Once saved, you can quickly load any preset from the Load Saved Preset (Optional) dropdown menu to instantly populate all custom code areas with your saved configuration. This eliminates the need to manually copy and paste code snippets each time you export banners with different requirements. You can manage your presets by deleting ones you no longer need or updating existing ones by loading them, making changes, and saving with the same name. All presets are stored locally within your current Figma app (using the clientStorage API from Figma) and persist whenever you reopen the Bannerify code panel across different Figma files, making it easy to maintain consistent code across multiple export sessions.