---
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.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)
- [Browse Bannerify tutorial docs](https://docs.hypermatic.com/bannerify/tutorials)