New to Anima? Start by Installing the Anima plugin for Figma 🙌
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 using the Anima plugin within Figma!
Adding Hover Effects Within Figma Components:
Figma's Interactive Components feature allows the addition of interactions between component variants. Here's how to use this feature:
Design Your Variants: Within Figma, create variants of your component, one for its default state and others for its hover state(s).
Configure Interactivity: Navigate to the 'Prototype' tab in Figma. Link the default variant to its hover state variant, selecting 'While hovering' as the trigger for this interaction.
Fine-tune the Transition: Customize the transition settings to ensure a smooth effect that aligns with your design's aesthetic.
Download the code: Anima converts Figma interactions into code. Open the Anima plugin, Select the screen, and click 'Get code' to get
HTML/CSS/JSX code.
Adding Hover Effect in Figma Without Using Components:
In addition to using Figma's Interactive Components, Anima offers another pathway for integrating hover effects. Here's how to leverage this feature:
Choose the layer/group you wish to apply the hover effect to.
Open the Anima plugin and click on Hover Effects.
Fine-tune the Transition: Select the desired effect or enter your own custom CSS.
Anima offers a variety of preset effects, such as
color changes,fade in/out,rotate,grow,moveand more.Customize the CSS value, duration, and curve.
Save your changes
Preview to see how it looks 👌🏼
Sync the file to Anima or return to add additional effects.
Share or Download code: You can now share a live preview of your design or download the screen's HTML/CSS/JSX code.
Try it on your own for free!
😎 Get involved in our Anima Community Forum!
New to Anima?
Learn More