Bannerify works by looking through all of your top level frames and instances in the active Figma page and using each one as its own banner. Bannerify will also load top level elements inside of a Figma component set (or “variants”) layer as banners.

Structuring your Figma frames

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.

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.

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 your banners from Figma

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.

Refreshing a single banner

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.

Refreshing or re-loading multiple/all 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.

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- (eg. hide-RectangleBackground), which will ensure this layer doesn’t get included in the plugin timeline or your banner exports.

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.