Video Tutorial: Animate and export banners to HTML from Figma
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.
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 easily 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 allows you to 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 on the size dropdown in the main plugin header menu.