All Collections
Designer's Guide to Anima
How To Create Hover Effects In Figma
How To Create Hover Effects In Figma

Enhance your site with interactive, eye-catching hover effects and entrance animations using Anima

Andres Raul Leon Bal avatar
Written by Andres Raul Leon Bal
Updated over a week ago

A Hover Effect happens when a visitor hovers their mouse over a specific element and the element responds with transition effects. In this guide, we will show you how to create beautiful and eye-catching hover effects by using the Anima plugin within Figma!

Creating a Hover Effect in Figma:

  1. Select the layer(s) you want to add the effect to

  2. In the Anima plugin, choose Hover Effects

  3. Select the desired effect, or enter your own CSS transition

    • Hover effects include 'change color', 'grow', 'shadow', 'rotate' and more πŸš€!

  4. You can hover over the preview to see how it will look πŸ‘ŒπŸΌ

  5. Click Save

  6. Preview and Sync the file with Anima or go back to the main menu to add more effects

See it in action!

  • Preview Live Website: [Open]

  • Don't forget to preview or sync your design with Anima in order to see the hover effects come to life!

πŸ’‘ Tip: Anima's Entrance Animations can be used the same way as hover effects! Simply select which element you want to apply the animation to and then customize the settings according to your preferences.

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?