Anima

New to Anima? <a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>

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!

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

In the Anima plugin, choose Hover Effects

Select the desired effect, or enter your own CSS transition 

- Hover effects include 'change color', 'grow', 'shadow', 'rotate' and more 🚀!

You can hover over the preview to see how it will look 👌🏼

<a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Preview</a> and <a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Sync</a> the file with Anima or go back to the main menu to add more effects

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. <a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Preview</a> and <a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Sync</a> the file with Anima or go back to the main menu to add more effects

Preview Live Website: <a href="https://quiet-band-0580.animaapp.io/indi-desktop-1440?r=1&amp;p=iku9Vaz&amp;h=indi-desktop-1440&amp;pages=WyJpbmRpLXRhYmxldC03NjgiLCJpbmRpLWRlc2t0b3AtMTQ0MCIsImluZGktbW9iaWxlLTM3NSJd" rel="nofollow noopener noreferrer" target="_blank">[Open]</a>

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

- Preview Live Website: <a href="https://quiet-band-0580.animaapp.io/indi-desktop-1440?r=1&amp;p=iku9Vaz&amp;h=indi-desktop-1440&amp;pages=WyJpbmRpLXRhYmxldC03NjgiLCJpbmRpLWRlc2t0b3AtMTQ0MCIsImluZGktbW9iaWxlLTM3NSJd" rel="nofollow noopener noreferrer" target="_blank">[Open]</a>
- Don't forget to preview or sync your design with Anima in order to see the hover effects come to life!

___________________________________________________________

Get involved in our <a href="https://forum.animaapp.com/" rel="nofollow noopener noreferrer" target="_blank">Anima Community Forum</a>!

<a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>

Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>

<a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

- <a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>
- Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>
- <a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

<a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2621449/show" rel="nofollow noopener noreferrer" target="_blank">Add Forms and Real Text Inputs to Designs</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

- <a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2621449/show" rel="nofollow noopener noreferrer" target="_blank">Add Forms and Real Text Inputs to Designs</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

How To Create Hover Effects In Figma

New to Anima? Create an account for free!

Creating a Hover Effect in Figma:

See it in action!

New to Anima?

Learn More