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.

Adding custom fonts to editable HTML text

Use a web-font file for each weight and style used by your editable text. Installing a font in Figma does not package that font in an HTML export.

1. Obtain the brand's approved .woff2 or .woff files for web use.
2. Enable paragraph text export. Leave editable text unlocked in Figma.
3. In the HTML export panel, enable Inject Custom Code, then choose Add custom CSS styles.
4. Paste an @font-face rule into the CSS field without a surrounding <style> tag. Replace the sample family with the exact family name used in Figma and the exported text's font-family declaration, and match the actual font weight and style.

@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

5. Add a separate rule for each additional weight/style (for example, 700 for bold or italic for an italic file).
6. Export and unzip the banner. Place the font files in a fonts folder beside each banner's HTML file, then re-zip that banner's complete contents. Bannerify injects the CSS but does not copy these local font files into the ZIP. Relative font URLs resolve from the stylesheet location; adjust the path if CSS is saved in a different folder.
7. Test the package through a local web server or the destination platform's preview, including on a device without the font installed. Check font loading, line breaks and longer replacement text. Font files count towards package size, and the destination must allow those files.

You can instead use a direct hosted HTTPS font-file URL if your ad platform permits external font requests. The font server must allow cross-origin font loading. See the MDN font-face reference.