# Using Bannerify

# Designing your banners in Figma

# Structuring your Figma frames

Bannerify works by looking through all of your top level frames in the active Figma page and using each one as its own banner. The direct child layers of each frame are used as the 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 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 if you run Bannerify inside of an empty Figma page.

# Starting with banners you've already designed

# Refreshing your layers 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, you can click the Refresh icon in the Bannerify header menu to refresh your layers and make them show up in the Bannerify timeline and real-time previews.

# Setting a 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.

Using Gradient Backgrounds

To use gradient backgrounds, you can fill a full background Rectangle layer at the bottom of your frame's layers.

# 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.

# 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.

# 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").

# 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 animations

While the banner preview next to your timeline will update whenever an animation or timeline change is made, you can also replay any of your banner animations at any time by clicking on the play icon/button in the header of your banner preview.

# 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.

# 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 (from 3 seconds to 15 seconds) 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.

# 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.

# 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.

# 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.

# 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.

# 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 backup image option 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.

Backup images will export the frame as it appears in Figma

The backup.jpg that is exported by selecting this setting is simply an export of the Figma frame itself (as if you were to manually export the frame from Figma). This means that everything visible in the frame on your Figma page will be included in the image, including any overlapping elements used for entry/exit animations.

# Using Retina @2x Images

Enabling the retina image 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.

# Compressing images

Enabling the image compression option will compress any JPG and PNG images used in your banners. By dragging the Image Quality slider left and right from 0-100 (Lowest - Best), you can specify the quality of the image. Moving the slider closer to 100 will result in better quality images, but larger file sizes. Moving the slider closer to 0 will result in worse quality images, but also smaller file sizes.

# 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.

# Advertising platform export options

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

# 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.

# 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 or MP4, you can click the Export to GIF/Video button in the Bannerify header. This will open the GIF/Video export settings.

# Configuring GIF/Video export settings

# 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.

# Image Quality

By dragging the Image Quality slider left and right from 0-100 (Lowest - Best), you can specify the quality of the GIF/video exports. Moving the slider closer to 100 will result in better quality GIF/video exports, but larger file sizes. Moving the slider closer to 0 will result in worse quality GIF/video exports, but also smaller file sizes.

# 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 files.

# 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 encoded MP4 videos.

Browser Support

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

# 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 videos.

Browser Support

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

# 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.