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.

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- (for example, locked-RectangleBackground), which will also ensure no animations are added, and will disable the animations select box in the plugin timeline, too.

Previewing your banner animations in the timeline

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

Click or drag the time ruler above the banners to scrub through the animation. The shared playhead stays aligned with the timing tracks across banners. You can also scrub from a banner header wherever its ruler is shown.

Use +, −, the zoom slider, or a two-finger trackpad pinch over the ruler or timing tracks to zoom from 100% to 1000%. When zoomed in, drag the rounded blue scrollbar handle below the ruler to move left or right. Click Fit to show the entire timeline again. These controls change the view without changing animation timings or export duration. See zooming and scrolling the timeline for the full navigation controls.

For more precise editing, use snapping, layer filters, markers and reusable motion sequences, or loop a work area while adjusting a transition.

Timeline Settings

Click Timeline Settings in the header. The panel opens on General and contains four tabs:

Tab	Controls
General	Timeline length, Magic Delays and Magic Speeds
Timeline Tools	Loop a preview range and add named markers
Motion Sequences	Save and reuse coordinated animations
Sync Timings	Copy timings between banner sizes

Snap, the layer filter, Zoom To Selection and group collapse controls are in Timeline Settings → Timeline Tools.

Review and restore edits

Click History beside the undo/redo arrows to browse your timeline edits. Choose a step to jump backward or forward; Current identifies the active state. New edits made after moving backward replace later history.

Adjusting the timeline length

Open Timeline Settings → General, choose a duration under Total Timeline Length, then click Update Timeline Length. Available durations range from 1 second to 3 minutes. The change applies across your banners; timing ranges that exceed a shorter timeline are adjusted to fit.

You can restore the previous length and timings with Undo, or choose an earlier step in History. See adjusting timeline length.

Adding exit animations

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

Please ensure that any exit animation set on a layer is set to begin after the "entry" animation ends, otherwise this will cause issues with both animations overlapping and having conflicting transitions at the same.

Adjusting animation speeds and timings

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 its 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 timing bar, you can also set your speed and delay values by clicking the second value in your timeline layer, and entering a new number with your keyboard (for example, 1.5) to set the amount of seconds.

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 (for example, "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 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.

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 Selected 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 menu 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 can 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.

Using magic delays and magic speeds

Open Timeline Settings → General and choose a value under Magic Delays or Magic Speeds. Click Apply To All Entry Animations or Apply To All Exit Animations to apply it across your banners.

Magic Delays

Choose a staggered delay from 0.1 to 0.5 seconds. Layers receive successive delay offsets while retaining their animation durations.

Magic Speeds

Choose a duration from 0.1 to 1 second. Start times stay the same unless they must move earlier to fit within the timeline.

Each application is one history step. Use Undo, Redo, or the History panel to move between changes. See Magic Delays and Magic Speeds.