---
url: "/bannerify/tutorials/add-hover-animations-to-your-figma-banner-designs.md"
description: "This tutorial shows how to install the Bannerify Figma plugin, load banner frames, add hover animation states to individual layers, and export the result as production-ready HTML and CSS. It also demonstrates previewing the hover effects in a browser and applying the same hover settings to multiple layers by bulk apply or copy and paste."
---

# Add hover animations to your Figma banner designs

> This tutorial shows how to install the Bannerify Figma plugin, load banner frames, add hover animation states to individual layers, and export the result as production-ready HTML and CSS. It also demonstrates previewing the hover effects in a browser and applying the same hover settings to multiple layers by bulk apply or copy and paste.

[← Back to Bannerify Video Tutorials](/bannerify/tutorials)

[Embedded media](https://www.youtube-nocookie.com/embed/dOdeG78NlSw)

## What this video covers

This tutorial shows how to install the Bannerify Figma plugin, load banner frames, add hover animation states to individual layers, and export the result as production-ready HTML and CSS. It also demonstrates previewing the hover effects in a browser and applying the same hover settings to multiple layers by bulk apply or copy and paste.

## Things you'll need

- Figma installed
- Bannerify installed from the Figma Community

## Steps

1. Install Bannerify from the Figma Community plugins tab.
2. Open your Figma file, right-click, go to Plugins, and launch Bannerify.
3. Select the banner frames you want to load, then click Load selected banners.
4. Choose a layer such as CTA or Logo, turn on Add Hover, and pick a hover animation like Grow, Rotation, Bounce-in, Skew, or Wobble.
5. Adjust the hover animation speed and optionally enable Loop for continuous playback while hovering.
6. Click Export to HTML, choose the output settings, optionally add a click tag, then click Export Banner and download the .zip file.
7. Unzip the export, open index.html or the banners folder in a browser to preview the animations; use bulk application or Copy and Paste to reuse hover settings on other layers.

## Useful links

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=dOdeG78NlSw)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-add-hover-animations-to-html-banners-in-figma-using-bannerify)
- [Read: Adding hover animation states to layers](/bannerify/animation/hover)
- [Next: Add masked animations to Figma banners](/bannerify/tutorials/add-masked-animations-to-figma-banners)
- [Open Bannerify in the Figma Community](https://www.figma.com/community/plugin/796124491692147799)