Video Tutorial: Animate and export banners to HTML from Figma
This video walks through how to animate and export production-ready HTML banners from Figma in seconds.
Starting from a blank Figma page
To quickly get started designing your own banners, Bannerify will offer to create some standard banner sizes automatically for you when the plugin is run inside of an empty Figma page.
Structuring your Figma banner frame layers
The direct child layers of each frame are used as the default elements inside of each banner. As we'll see in the sections below, each of these elements can be individually animated inside the Bannerify plugin to create your banners.
Hidden child layers will be included in your banner frames Any direct child layers that have been toggled to hidden in Figma will still appear in your Bannerify layers timeline. The reason for this is to allow child layers to be visibly hidden while designing banners that may contain elements that need to be transitioned in and out over multiple stages. Bannerify will automatically display these hidden layers in their visually un-hidden state.
Hiding Figma layers from your timeline. If you don't want a certain layer in your Figma frame to be included in the timeline, you can rename any Figma layer with the prefix hide- (for example, hide-RectangleBackground), which will ensure this layer doesn't get included in the plugin timeline or your banner exports.
Starting with banners you've already designed
If you've already created some banner designs in Figma, running the Bannerify plugin on your page will automatically load a list of the available frames or instances in your file that can be used as banners.
You can either check/uncheck only the banners you'd like the plugin to load and then click Load Checked Banners button, or you can click the Load All Banners button to automatically load all of them.
Refreshing or re-loading multiple/all banners
If you add or update any layers in your Figma file while Bannerify is already running, they won't be updated automatically. However, there are two ways to refresh your banners.
To refresh all of the banners in your timeline, or load in brand new banners from your Figma file, you can click the Refresh icon in the main plugin header menu.
This will show the initial banner selection screen again, where you can either check/uncheck only the banners you'd like the plugin to load and then click Load Checked Banners button, or you can click the Load All Banners button to automatically load all of them. Any updated layers will show up in the Bannerify timeline and real-time previews.
Refreshing a single banner
If you add or update any layers in your Figma file while Bannerify is already running, they won't be updated automatically. However, there are two ways to refresh your banners.
To quickly refresh a single banner, you can click the Refresh icon in the banner's header bar to only refresh the layers for that banner, any updated layers will show up in the Bannerify timeline and real-time previews.
Setting a solid banner background fill
You can set a solid background colour of any banner by setting the solid Fill of that frame to the colour you need in Figma; this may be seen briefly before your image elements load.
Auto-scrolling banners into view
To Switch between editing banners, Bannerify automatically scrolls a banner into view in the timeline when it's corresponding layer (or child layer) is clicked on the Figma page.
This also works the other way around, where if you click on the frame or instance icon button above any of your banner previews in the timeline, the corresponding Figma layer will be automatically scrolled and zoomed into view on your Figma page.
Resizing the plugin window
If you're using a bigger (or smaller) computer monitor, Bannerify lets you resize the plugin window to make it easier to use and view the timeline depending on the size of your screen. You can resize the window from smaller to larger (4K) sizes by clicking the size dropdown in the main plugin header menu.