Hypermatic Docs

# Using Bannerify

# Designing your banners in Figma

# Structuring your Figma frames

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.

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.

# Animating your banners

# Selecting animations

Bannerify comes with dozens of pre-defined keyframe based animations, which are grouped into 5 categories:

  • Entrances
  • Exits
  • Basic Transforms
  • Attention Seekers
  • Background Pans

To set an entry animation, hover over the layer you would like to animate in the Bannerify timeline and click on the top select box. Scroll through the list of animations and click on an animation name to apply it to your layer. You'll see the banner preview update instantly with the new animation applied.

Removing animations from a layer

If you don't want a layer to have any animations, you can either select the No Entry Animation and/or No Exit Animation, or alternatively, you can rename any Figma layer with the prefix locked- (eg. locked-RectangleBackground), which will also ensure no animations are added, and will disable the animations select box in the plugin timeline, too.

# Adjusting the timeline length

You can adjust the length of the entire timeline itself for all of your banners by clicking on the Timeline select box in the Bannerify header; selecting a length (with options from 3 seconds to 3 minutes) will automatically extend or shrink the Bannerify timeline for all of your banners. Bannerify will do its best to update your existing animations if they previously extended beyond a new shorter timeline, and vice-versa.

You can't automatically undo timeline length updates

Selecting a new timeline length will apply the changes to the timelines across all of your banners. You will need to manually update your timeline animations again if you change your mind. With this in mind, it's usually worth setting your timeline length before starting to work on your animations.

# Adding exit animations

Adding exit animations works the same way as adding entry animations; instead of clicking on the top select box, you can click on the bottom select box to select an exit animation for your layer.

# Adjusting animation speeds and delays

You can adjust the speed and delay of your animations by clicking down on the left/right edges of the timeline bar for your layer, then holding and dragging with your mouse to adjust the length of your animation and it's start/end point.

You can shift the location of your animation on the timeline by clicking down on the middle of the timeline bar for your layer, then holding and dragging with your mouse; moving it either left or right to change where it is placed in your timeline.

Use your keyboard to input precise timing numbers

If you'd prefer not to use the timeline slider, you can also set your speed and delay values by clicking on the second value in your timeline layer, and entering a new number with your keyboard (eg. 1.5) to set the amount of seconds.

# Animating nested child layers individually

By default, Bannerify only loads in the direct child layers of your top level frames or instances, which simplifies the timeline and limits the amount of individual image assets that are exported with your HTML.

However, you can customise the nested child layers that are included by clicking on the list icon in the header bar for any of your banners. This will bring up the layer tree for your banner, where you can expand any layers with nested child layers to include them as animatable layers in your timeline.

Closing this panel will automatically refresh your banner to reveal all of the nested children you exposed in your timeline as new individual layers in your timeline.

# Looping animations

If you have an animation on a specific layer that you would like to repeat infinitely (even after the banner timeline has finished), you can enable the Loop toggle next to the animation you've selected. This can be handy for very short animations that lend themselves to a looped playback (eg. "Heartbeart", "Flicker" or "Pulse").

# Copy/pasting animations

You can quickly copy an animation from one timeline layer to another by using the Copy and Paste buttons. Clicking on the Copy button will copy the animation, which can then be pasted by clicking the Paste button on any other layer.

Pasting a copied animation to multiple layers

You can also apply your copied animation in bulk to multiple layers by using the bulk apply feature.

# Adding hover animation states to layers

You can add a hover animation state (for HTML exports) to any layer in your timeline by clicking on the Add Hover toggle, and then selecting a hover animation from the revealed drop down selector. You can set the animation to repeat by enabling the Loop toggle, and you can adjust the speed of the hover animation by dragging the speed slider next to it.

To preview how the animation looks, you can hover over the layer with your mouse in the Bannerify preview window.

Applying a hover animation to multiple layers

You can also apply a hover animation in bulk to multiple layers by using the bulk apply feature.

# Applying bulk animations

To quickly apply an animation to multiple layers at the same time, select some layers using the checkboxes next to each layer name (or use Quick Select Layers feature), then set your animation in the slide-up area at the bottom of the plugin window. Once you're happy with your animation, click the Apply animations to layers button to apply the new animation to all of the selected layers.

# Quick selecting similar layers

If you're working with a banner set that contains multiple banners with the same elements or layers, you can use the Quick Select Layers select box in the Bannerify header to automatically select similar layers across all of your banners. This can be a great alternative to manually checking each layer.

Example of using Quick Select Layers

For example, if all of your banners contain a layer called CTA Button, you will be able to click on that option to automatically check all the CTA Button layers for you. This will then allow you to bulk apply animations to that layer across all of your banners at the same time.

# Previewing your banner animations in the timeline

You can preview your animations in your banners by clicking on the Play icon button, and pause the timeline at any point by clicking on the Pause icon button. You can also restart the animation playback from the beginning by clicking on the Restart icon button.

To jump to a certain part of the timeline, you can click on any point in the timeline Seconds header on any banner, or you can click and drag your mouse left and right to scrub through the timeline that way, too.

# Using magic delays and magic speeds

The Magic Delay and Magic Speed select boxes in the Bannerify header allow you to automatically apply timings to all of your layers, across all of your banners with one click.

# Magic Delays

If you want all of your layers in all of your banners to have a staggered delay offset, you can click on the Magic Delay select box in the Bannerify header; selecting a delay (from 0.1 seconds to 0.5 seconds) will automatically apply that staggered delay to every layer's timeline in Bannerify for each banner.

# Magic Speeds

If you want all of your layers in all of your banners to be the same speed, you can click on the Magic Speed select box in the Bannerify header; selecting a speed (from 0.1 seconds to 1 second) will automatically apply that speed to every layer's timeline in Bannerify for each banner.

You can't automatically undo magic speeds/delays

Selecting a magic speed or delay option will apply the changes to the timelines across all of your banners. You will need to manually reset them again if you change your mind.

# Including Video file embeds in your banners

You can embed video files to any Figma layer in your Bannerify timeline by clicking on the Settings icon button for that layer, and then pasting in a URL pointing to a valid video file (.mp4 or .webm) into the video embed input field.

To get a video file, you can either browse the selection of free stock videos on a site like Pixabay (opens new window), or you can upload your own .mp4 or .webm file to any file hosting or CDN (content delivery network) service (opens new window), and then copy the URL link to your animation to use it in Bannerify.

By default, your video will automatically loop, but you can change this if needed by turning off the Loop Embed toggle.

To remove a video animation from your layer, click on the the Settings icon button again and remove the URL from the video embed input field.

Bulk applying video file URLs

As with other layer settings, you can also apply your video file URL setting to layers in bulk by using the bulk apply feature.

# Including Lottie file animations in your banners

You can embed Lottie file animations to any Figma layer in your Bannerify timeline by clicking on the Settings icon button for that layer, and then pasting in a URL pointing to a valid Lottie file (.json) into the Lottie embed input field.

To get a Lottie animation, you can either browse the selection of animations (opens new window) on LottieFiles.com, or if you've created your own using the After Effects plugin (opens new window), you can upload your .json file to the LottieFiles website as a private animation (opens new window), and then copy the URL link to your animation in the same way to use it in Bannerify.

By default, your Lottie animation will automatically loop, but you can change this if needed by turning off the Loop Embed toggle.

To remove a Lottie animation from your layer, click on the the Settings icon button again and remove the URL from the Lottie embed input field.

Bulk applying Lottie file URLs

As with other layer settings, you can also apply your Lottie file URL setting to layers in bulk by using the bulk apply feature.

Complex visual effects/masks in video/GIF exports

If you're exporting banners containing Lottie files to video or GIFs from Bannerify, certain Lottie files contain special effects, masks or styles that won't be supported as they are in the HTML exports.

# Including animated GIFs in your HTML banners

There are two different options for using GIFs in your banner designs, each one works a bit differently, depending on how you'd like to incorporate the GIF into your design. Your GIF layer will need to be included in the main timeline; any nested layers containing a GIF won't be rendered or included in your HTML exports.

Flagging transparent GIFs

By default, your GIF exports won't include transparency. If your GIF does require transparency, please add the word transparent anywhere in your Figma layer's name.

# Using animated GIFs as image layers

You can drag a .gif file inside of any top level banner, which will add it as a Figma image layer.

This method won't allow to include any other content over the top of the animated GIF, however, any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final .gif export.

# Using animated GIFs as background fills on a frame layer

Alternatively, you can also drag a .gif file from your computer onto a frame layer's fill, which will set it as an image fill on the background of the frame. Any additional Figma fills (eg color/gradient overlays) on this frame will also be included in the final .gif export.

The advantage of this is that you can then add other Figma layers (text, images etc) inside of the frame on top of your animated GIF, and those will also be included in the .gif that gets exported with your HTML banners.

Animated GIFs will be displayed as static images in the timeline preview

Please note, due to GIFs taking longer to render from Figma layers, they will only be exported in your final HTML exports in order to speed up refreshing banner previews inside the plugin. Embedded animated GIFs will also not be included in GIF/Video exports from Bannerify.

# Including a layer's unclipped image content

By default, Bannerify only exports the visible image areas inside of your banner. This helps to save on un-needed image data being included in your HTML exports.

However, if you do need to include the full unclipped image area outside of your banner dimensions, you can optionally do this for any layer by clicking any layer's Settings icon button in the main timeline to open the layer settings, and enabling the Include full unclipped layer toggle.

This will unclip any parent frames for that layer during export and include the full layer content previously being clipped, and allow you to see that extra image area being included in animations that move the animation in/out of the banner's dimensions.

Bulk applying clipping settings

As with other layer settings, you can also apply your custom clipping setting to layers in bulk by using the bulk apply feature.

Unclipping image layers will increase file sizes

Please use this feature carefully if you need to keep your banner file sizes low. Unclipping a layer's content area will include more of the image, so this is especially important to be mindful of if your image layers are much larger in dimensions to the banner dimensions (which usually acts as the clipping size, by default).

# Keeping layers as a static end frame in HTML exports

If some of your banner layers include entry/exit animations on a banner that is also set to only loop a certain number of times (rather than infinitely) in HTML exports, this can end up resulting in some of your exit animations making layers invisible after the final banner playback iteration.

To resolve this issue for this scenario, you can specify any layer in your banner's timeline to remain visible after your banner's final playback iteration.

This feature works by automatically preventing your "exit" animation from playing, and keeping your layer in the final state of its "entry" animation for the rest of the time that your banner is visible after it finishes all its playback iterations.

You can optionally enable this setting by clicking any layer's Settings icon button in the main timeline to open the layer settings, and enabling the Keep layer as static end frame (remove final exit animation) toggle.

Bulk applying static layer settings

As with other layer settings, you can also apply your custom static end frame setting to layers in bulk by using the bulk apply feature.

# Creating custom keyframe animations

If you need a specific animation that isn't available in the animation presets included in Bannerify by default, you can create your own custom timeline animation by adding custom keyframes with your own x, y, scale, rotation and opacity properties.

# Opening the custom animations panel

To open the custom animations panel, click on the Custom Animations button in the main Bannerify header. This will open up the custom animation panel, where you'll be able to start adding your own keyframe animation.

# Creating custom animation keyframes

When you open the animations panel, you'll see 2 keyframes; the first keyframe (0%) and the final keyframe (100%). These are added by default and can't be removed, as a keyframe animation needs at least one frame to start the animation from and a keyframe to show where it ends.

# Selecting a keyframe to edit

You can instantly swap between any keyframes by clicking on a keyframe under the Animation Timeline near the top of the custom animations panel. Clicking on a keyframe will allow you to edit the properties for that specific keyframe.

# Inserting new keyframes

You can easily add more keyframes in between the default start/end (0%/100%) keyfarmes to create more complex keyframe animations. To add a new keyframe to your timeline, enter your new keyframe percentage (eg. 50) in the input field, then click on the Insert New Keyframe button to insert a brand new keyframe at that percentage in the timeline.

Any new keyframe that you add will automatically be created with the same properties that your currently selected keyframe contains; this allows you to easily adjust properties based on other keyframes you've already added. Your newly added keyframe will also be automatically selected after you click the Insert New Keyframe button.

# Editing keyframe properties

You can edit 5 different properties for any of your animation keyframes. Any differences in properties between your keyframes will automatically be animated; for example, setting scale to 2x on the 0% keyframe, and setting scale to 1x on the 100% keyframe will automatically create a "shrinking" animation.

  • The X property will animate your element's left/right pixel position (in pixels).
  • The Y property will animate your element's top/bottom pixel position (in pixels).
  • The Opacity property will animate your element's transparency percentage.
  • The Rotate property will animate your element's rotation degrees.
  • The Scale property will animate your element's size.

# Using Percentage Based Relative X/Y Transforms

If you would prefer to set X/Y positioning based on the percentage of the animated element, you can enable the Relative % Transforms toggle in the keyframe properties panel, which will allow you to set a percentage value for your X/Y values (instead of pixels).

Applying a percentage X/Y transform value will automatically animate the element that the animation is applied to by using its position, and applying the percentage transform to that size; for example, setting a 10% X transform value on a keyframe will animate a layer that's 100px wide, by 10px. Applying that same animation with a 10% X transform value to a layer that's 200px wide, will animate the layer by 20px.

# Splitting Scale into X/Y Scale Options

If you would prefer to set the scale values for each X/Y axis individually, you can click the Unlock Scaling toggle in the keyframe properties panel, which will allow you to set the horizontal and vertical "Scale" values for your keyframes independently, rather than equally scaling them both for an even scale up or down animation.

This setting can be useful if you need to animate the width or height of a layer, without also affecting other X/Y axis at the same time.

# Copying and pasting keyframe properties

You can copy/paste properties from one keyframe to another by first selecting the keyframe you would like to copy the properties from, clicking the Copy Properties button, then selecting the keyframe you would like to paste the copied properties to, then clicking the Paste Properties button to paste the copied properties onto the selected keyframe.

Copied properties are only available until the panel is closed

You can copy and paste properties from/to any keyframes in your animations while the custom animations panel is open, any copied properties will be not be available to paste after you close the custom animations panel.

# Deleting keyframes

To delete an keyframe, click any keyframe under the Animation Timeline to select it, then click on the Delete Keyframe button to delete your keyframe from the timeline. Please note, that you can't delete the 0% or 100% keyframes, as these are default keyframes required for your animation timeline.

After you delete any keyframe, the 0% keyframe will automatically be re-selected as the active keyframe to edit.

Deleting a keyframe animation will permanently delete it

When you delete any of your keyframes, it will be permanently removed from your timeline and you won't be able to undo the deletion. However, you are able to Copy Properties of a keyframe, delete it, then paste your deleted properties in a different keyframe while you're still editing your animation timeline.

# Using the live preview to see your animation

To easily see how your animation is looking based on the keyframes and their properties that you've updated, you can look at the Live Preview area, which sits right next to your keyframe properties, and directly underneath the animation timeline. Any changes you make to your keyframes, properties or easing will automatically be shown in the live preview.

You can adjust the playback speed of the live preview

If you want to see how your custom animation looks at different speeds, you can change the playback speed in the live preview by dragging the Preview Speed slider left and right to increase and decrease the playback speed.

# Setting the animation easing

You can choose what kind of easing you need your animation to have by choosing an option from the Animation Easing select box. Easing is automatically applied to your entire timeline, and will update the Live Preview area so you can see how your selected easing changes how your keyframe animation moves.

You can choose from the following easing options:

  • Ease (Default)
  • Linear
  • Ease In
  • Ease Out
  • Ease In Out
  • Cubic Bezier

# Setting a custom Cubic Bezier easing value

If you select the Cubic Bezier easing option, you'll need to paste in a valid CSS cubic-bezier value (eg. cubic-bezier(0.65,0.05,0.36,1);). You can generate a custom cubic beizer curve, by using a site like https://easings.co/ (opens new window), or any other website service that you prefer to help to generate custom CSS cubic-bezier curves.

Follow along with our video tutorial

If you need a hand with this, please follow our step-by-step video tutorial (opens new window) showing you how to add custom cubic bezier easing in your custom animations using Bannerify.

# Setting the animation origin point

By default, the origin for all of your custom animation will be set to Center and Center for the X/Y axis, but you can customize these by clicking on the Animation Origin Point select input options, where you can set Top, Center or Bottom for the vertical axis, and Left, Center or Right for the horizontal axis.

Changing the animation origin will affect where the animation is "pinned" for the layer; for example, setting the origin to Top and Left would become the point for your layer at which a rotation animation is hinged on, or the point of your layer that could be scaled in/out from and to.

# Saving your new custom animation

To save your new animation, give your animation a name by filling in the New Custom Animation Name input text field, then click the Add New Animation

Custom animations will only be saved/available to the current Figma file

Saving an animation makes it available to any page inside your current Figma file; however, your saved animations won't show up if you run Bannerify inside a completely different/new Figma file, as the animations are saved directly to the Figma file and can't be transferred to another file. You will need to re-create any new animations in any new Figma files; alternatively, you could setup a new page in the current Figma file, where your saved custom animations from this Figma file will still be available to use.

# Using your saved custom animations

Once you've saved at least one custom animation, you will be able to use them in your banners by clicking on the entry animations and exit animations select boxes in your layers timelines; you will see a new group in the select box options called Custom Animations, where you'll be able to see all of the custom animations that you've saved.

Bulk applying custom animations

As with other preset animations, you can also apply your custom animation in bulk by using the bulk apply feature.

# Updating your saved animations

To update a custom animation that you've previously saved, choose the animation you'd like to update from the Your Saved Animations select box; this will load up your saved animation and its keyframes into the custom animation panel.

Once you've chosen the saved animation, you can edit your keyframes and properties as needed. Once you're happy with the updates, click the Update Saved Animations button to save the changes and override the previous animation keyframes.

Please note, updating a saved animation will automatically apply the updated keyframes to any layers in your banners that was already using the custom animation you've just updated.

Create a new animation based on a saved animation

If you want to load in a saved animation and modify it, but not "override" the saved version, you can create a new animation from it by entering in a New Custom Animation Name and clicking the Add New Animation button.

# Deleting your saved animations

To delete an animation, select any option under Your Saved Animations to load in the animation, then click on the Delete Saved Animation button to delete your saved animation.

Deleting a saved animation will permanently delete it and remove it from your layers

When you delete any of your saved animations, it will be permanently removed from Your Saved Animations list. Any layers in your banners that were using the deleted custom animation will be changed back to having no animation applied.

# Exporting your banners to HTML

Once you're happy with your banners and would like to export them to HTML, you can click the Export to HTML button in the Bannerify header. This will open the HTML export settings.

# Including or excluding banners in your export

By default, all of the top level layers in your Figma file that are loaded into Bannerify as banners will be included in your export; if you would like to exclude any banners from being included (without re-loading the selected banners in), you can toggle the Include Banner in Export switch in any banner's timeline header to "off"; this will hide that banner's timeline and also exclude it from being added to any exports.

There are two ways to add URL links to your HTML banner exports in Bannerify; one is to include an <a> link tag around the entire banner, and the other is to add clickable links to individual layers in your timeline.

# Adding a clickable URL to the entire banner

To add a link around your entire banner, you can paste a link into the URL field inside of the export settings panel. This will automatically wrap your entire banner inside of an <a> tag, which has an href set to the URL that you specified in the input field.

# Adding a clickable URL to a specific timeline layer

If you need to make a certain timeline layer clickable, you can do this by clicking on that layer in your Figma canvas, then adding an Open link interaction under the native Figma Prototype panel. Pasting your link into the URL field of the Figma interaction will automatically include an onclick="window.open('https://yourwebsitelink.com', '_blank')" attribute to that element in your HTML banner export.

Only applies to layers visible in your Bannerify timeline

Please note that this will only be applied to layers that are visible in your Figma timeline. By default, this means direct child layers of your banner frame; you can optionally include nested layers via the plugin, and then apply a prototype link interaction to those nested layers, if desired, too.

Only applies to HTML exports

Please note that this will only apply to all HTML export options (except for the Vanilla HTML/JavaScript (HTML <canvas>) option), and won't have any effect on GIF or video exports from the plugin.

# Preview Page

When you export any HTML banners, Bannerify will automatically include an index.html preview page. This file loads in all of your exported banners on the same page, and lays them out in a grid where you can see them all at the same time. It's perfect for uploading and sharing a preview of all your banners to a client or stakeholder on your team.

Preview Page Title

The name of your Figma document will be used as the <title> tag for the exported HTML preview page from Bannerify.

Preview Page Banner Order

The order of your banner frames in the Figma layers panel will be used to order your banners on the preview page.

# Selecting a layout for your preview page

Updating the preview page layout select box option will set the grid style used to position your banners in the generated index.html preview page. You can change this by selecting a different option in the select box.

# Masonry Layout Grid

The masonry layout mode option will automatically figure out the best layout to fit all of your banners. This can be a good option for a large banner set.

# Centered Layout Grid

The centered layout mode option will vertically align and horitzontally center all of the banners. This can be a good option for smaller banner sets.

Preview screen in the plugin is just an indicator

Please note that the layout shown visually in the iMac preview above this select box is just an indication of how the layout might look at a certain window size; you'll be able to see how it looks on your own screen when you open your exported index.html preview page.

# Enabling "Dark Mode" on your preview page

Enabling the Dark Mode setting will set a dark theme/background to your generated index.html preview page. You can enable this setting if your banner designs work better against a darker background.

# Automatically upload preview page to a Netlify URL

If you would like to host the preview page of all your banners online (rather than just included locally in the exported .zip file), you can enable the Upload Preview Page URL to Netlify toggle, then paste in your Netlify personal access token (opens new window) to connect Bannerify and create a new Netlify site for the current Figma page.

You can optionally click on the Change site name link to update the auto-generated subdomain name from Netlify to something more personalized, and then click the Refresh icon button in Figma after saving it in Netlify to show the updated URL.

After you click the Export Banners button, you will see confirmation of the Netlify preview page being uploaded, along with a link to view it, and another link to the Netlify settings page to manage the site.

# Adding a branded header to your preview page

If you're showing your index.html preview page to clients or third party stakeholders, you can add some custom HTML and CSS to apply your own branding or custom header to the page. Any HTML you add will be

Custom HTML

Any code added to the Custom HTML field will be injected directly after the <body> tag in the generated index.html page. You can add anything here, like a custom header, or something as simple as an <img> tag linking to your company logo.

Custom CSS

Any code added to the Custom CSS field will be injected into a custom <style> tag (so you don't need to add your own <style> tag in your input) in the index.html page. This can be used to style the Custom HTML you've added.

# Adding a 1px black border to all banners

Enabling the 1px border option will automatically include a border: 1px solid black border to the CSS of all of your banners. This can be helpful for certain advertising platforms that prefer (or require) you to include a 1px black border to your banners.

# Adding a preloader animations to all banners

Enabling the preloader option will automatically include a preloader to the HTML of all of your banners. This loading animation will be displayed until all of the banner's images have loaded in the web browser.

# Adding custom CSS classes to layers

You can optionally include your own custom CSS class names to any layer by clicking any layer's Settings icon button in the main timeline to open the layer settings, and typing/pasting the custom CSS class names you would like to be included on that layer in its HTML export.

Bulk applying custom CSS classes

As with other layer settings, you can also apply your custom CSS classes to layers in bulk by using the bulk apply feature.

# Playback Options

# Setting the number of times to play through banners

Setting this option will specify how many times you would like the banner timeline on all of your banners to play through from start to end. The default option is 1, which means that your banners will play through the animation timeline from start to end once.

You can change this number by entering a higher number into the number input field, like 6, for example. This would ensure that the timeline animation for all of your banners are played through six times from start to end.

Infinitely Looping Banners

You can repeat the animation timeline to play on repeat forever in all of your banners by enabling the Infinitely loop all banners option.

# Image Options

# Including a backup.jpg for all banners

Enabling the Include a "backup.jpg" for all banners toggle will automatically export your frames from Figma as a @1x JPG and be included in each banner folder as a backup.jpg file. This can be helpful for certain advertising platforms that prefer (or require) you to include a backup image.

Specifying a maximum size in kilobytes (kb) will automatically optimize the backup.jpg image file to be under your specified limit. If you don't specify a size limit for your backup image, it will automatically default to 200kb (you also can set a higher limit, if needed).

Hiding layers from your backup images

If you have different content layers transitioning in and out at different points in your banner animation, you will likely want to hide some of those from appearing in the your backup.jpg file. Enabling the Hide in backup.jpg toggle for any layer in its settings panel will ensure it doesn't get included in the backup image for that banner.

You can also show or hide elements from your backup.jpg file in bulk by using the bulk apply feature.

# Rendering banner images @2x retina

Enabling the Render banner images @2x retina toggle option will automatically export any JPG and PNG images at retina (@2x) resolution. This will give you sharper looking images in your banners, but will also increase the file sizes of any JPG and PNG images.

# Overriding image export format

Bannerify will automatically detect the optimal export format for each layer's image, but you can override this by clicking any layer's Settings icon button in the main timeline to open the layer settings, where you can specify forcing the layer to be exported as a JPG, PNG or SVG.

Alternatively, you can override this to set the export format of any layer to JPG or PNG by adding your own export setting.

# Setting a maximum file size target for each banner

Enabling the Maximum file size target for each banner option will allow you to specify a maximum size in kilobytes (kb) for each banner; the plugin will automatically optimize the image assets to be under your specified limit. If you don't specify a size limit with the compression option enabled, it will automatically default to 150kb, which is the size limit (per banner) imposed by Google Ads.

Exporting WebP images instead of JPG/PNG

You can optionally use WebP compression by enabling the Use WebP toggle switch. Enabling the the Use WebP toggle will automatically compress/convert any of JPG/PNG images into Google's WebP (opens new window) format instead; which is designed to have a better image:quality ratio.

Please check the WebP browser support (opens new window) to ensure that using this feature aligns with the browsers you're supporting with your banner ads.

Any animated GIF files will not be included in the target file size

Please note, due to GIFs being large in file size by default and not highly compressible, any maximum file size targets will not include any animated GIFs that are included in your HTML banner export.

# Code Output Settings

# Standard HTML export options

This will export your banners to vanilla HTML, without clickTags.

For any of the Standard HTML export options, you have the option to add a URL that will be injected automatically to each banner as an <a> tag.

Add a hyperlink using Figma's Prototype feature

If you'd prefer to set the URL per banner, you can select your banner frame, then click on the Prototype tab in Figma, then add an On click interaction, and specify a link (eg. https://example.com) in the Open link action. This will automatically include an <a> tag with that URL in your HTML banner export.

# Advertising platform export options

This will export your banners to platform specific HTML/Javascript, with clickTags.

Minified code exports

To optimize file sizes, Bannerify will minifies all the code that's exported by default, and will save out a single .html file per banner. If you need your code to be more readable and/or split out into separate .html, .css, .js files, you can turn off the Minified toggle in the code export options.

# Include individual .zip files for each banner

Enabling the Include individual .zip files for each banner toggle will include an additional folder called _zips in your exported file. The _zips folder will contain individual zip files for each of the banners that you've exported. This can be useful and time saving if your advertising platform requires you to upload a zip file for each banner.

Optionally include backup.jpg from zips

If you want the backup.jpg image file to be included inside each zip, enabling the Add "backup.jpg" to individual zip files toggle will ensure that backup.jpg images are included inside your individual zips. If this toggle is disabled while individually zipping your banners, and you've also enabled the Include a "backup.jpg" for all banners toggle, all of your backup images will also be included in a _backups folder inside the root directory of the main Bannerify exported .zip file.

# Inject custom HTML/CSS/Javascript code

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></style> tag, or adding custom Javascript code inside new a <script></script> tag.

# Starting the HTML export process

Once you're happy with all of your export settings, you can click the Export Banners button at the bottom of the export panel to begin exporting your banners from Figma to HTML.

# Downloading the final HTML .zip file

After Bannerify has finished processing your banners, you'll be shown a confirmation message; you can download your .zip file containing your exported banners by clicking the Download your .zip file button.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Opening your HTML .zip file

After you've downloaded your .zip file from Figma to your computer, you can open your file explorer to the directory where it was saved. Double clicking on the exported .zip file will unzip the contents and let you use your banners however you like.

# Exporting your banners to GIF/Video

Once you're happy with your banners and would like to export them to GIF, WebM, MP4 or animated WebP file you can click the Export to GIF/Video button in the Bannerify header. This will open the GIF/Video export settings.

Including or excluding banners in your export

By default, all of the frames in your Figma file that are loaded into Bannerify as banners will be included in your export; if you would like to exclude any banners from being included, you can toggle the Export switch in any banner's timeline header to "off"; this will hide that banner's timeline and also exclude it from being added to any exports.

# Configuring GIF/Video export settings

Flagging transparent backgrounds for GIFs

By default, your GIF exports won't include transparent backgrounds. If your GIF does require transparency, please add the word transparent anywhere in your banner (parent Figma frame) layer name.

# Infinitely loop playback (for GIFs)

Enabling the infinitely loop playback option will export GIFs that continuously loop their animation timeline forever. If you disable this setting, your GIFs will play through their animation timeline once, and then freeze on the final frame of the animation. This option only applies to GIF exports.

# Frames Per Second

You can change the framerate of your GIF/video exports by using the Frames Per Second select box options. You can select from the FPS options below:

  • 60 FPS (Ludicrous Mode)
  • 30 FPS (Ultra Smooth)
  • 24 FPS (Smooth)
  • 18 FPS (Less Smooth)
  • 12 FPS (Least Smooth)
  • 6 FPS (Jittery)

Higher FPS will take longer to render

Please note that more frames will take longer to export and ouput larger file sizes. For example, exporting a 5 second timeline at 24 FPS will render out 120 frames per banner.

# Lossless or lossy compression (for GIFs)

By default, GIFs are exported with Lossless compression, which means that the file size is kept low without any noticeable quality loss. If you require even smaller GIFs (at the expensive of some quality loss), you can enable Lossy compression instead, and adjust the custom compression quality slider to your needs.

Setting advanced dithering options

If you know what you're doing, you can customise the type of dithering (opens new window) that's used in your GIF export by changing the image dithering dropdown selector option in the GIF export settings panel.

# Enabling "Dark Mode" on your preview page

When you export any GIF/Video banners, Bannerify will automatically include an index.html preview page. This file loads in all of your exported banners on the same page, and lays them out in a grid where you can see them all at the same time. It's perfect for uploading and sharing a preview of all your banners to a client or stakeholder on your team.

Enabling the Dark Mode setting will set a dark theme/background to your generated index.html preview page. You can enable this setting if your banner designs work better against a darker background.

# Exporting to GIF

After you've clicked the Export to GIF/Video and configured your export settings, you can click the Export GIF button at the bottom of the export panel to begin exporting your banners from Figma to GIF. This will export your animated banners to GIF (opens new window) files.

GIFs are automatically optimized

GIF exports will automatically be optimized to get the best quality at the lowest file size.

# Exporting to MP4 Video

After you've clicked the Export to GIF/Video and configured your export settings, you can click the Export MP4 button at the bottom of the export panel to begin exporting your banners from Figma to MP4. This will export your animated banners to h264 (opens new window) encoded MP4 (opens new window) videos.

Browser Support

Due to browser compatibility issues, MP4 videos can only be exported using Chrome (opens new window) or the Figma Desktop App (opens new window).

MP4s are automatically optimized

MP4 video exports will automatically be optimized to get the best quality at the lowest file size.

# Adding an audio track to MP4 video exports

Before exporting your MP4 video, you can optionally include an .mp3 audio file to your exported videos by dragging and dropping an .mp3 file from your computer (you can download .mp3 music files from a site like Pixabay (opens new window)) into the Bannerify export settings. Then you can click the Export MP4 button at the bottom of the export panel to begin exporting your banners from Figma to MP4 with the audio track automatically included.

Alternatively, if you've already embedded a video URL into one of your layers and would prefer to use the audio from that video, you can enable the Use audio from embedded video toggle, and this will automatically include the audio from the video on your banner's timeline layer.

Browser Support

Due to browser compatibility issues, MP4 videos can only be exported using Chrome (opens new window) or the Figma Desktop App (opens new window).

# Exporting to WebM Video

After you've clicked the Export to GIF/Video and configured your export settings, you can click the Export WebM button at the bottom of the export panel to begin exporting your banners from Figma to WebM. This will export your animated banners to WebM (opens new window) videos.

Browser Support

Due to browser compatibility issues, WebM videos can only be exported using Chrome (opens new window) or the Figma Desktop App (opens new window).

WebMs are automatically optimized

WebM video exports will automatically be optimized to get the best quality at the lowest file size.

# Exporting to animated WebP image

After you've clicked the Export to GIF/Video and configured your export settings, you can click the Export WebP button at the bottom of the export panel to begin exporting your banners from Figma to animated WebP images. This will export your animated banners to animated WebP (opens new window) image files.

Browser Support

Due to browser compatibility issues, WebP videos can only be exported using Chrome (opens new window) or the Figma Desktop App (opens new window).

# Downloading the final GIF/video .zip file

After Bannerify has finished processing your banners, you'll be shown a confirmation message; you can download your .zip file containing your exported banners by clicking the Download your .zip file button.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Opening your GIF/Video .zip file

After you've downloaded your .zip file from Figma to your computer, you can open your file explorer to the directory where it was saved. Double clicking on the exported .zip file will unzip the contents and let you use your banners however you like.

← Troubleshooting Bannerify →