Anima

New to Anima? Start by Installing the <a href="https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-vue-css-tailwind" rel="nofollow noopener noreferrer" target="_blank">Anima plugin</a> 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 <a href="https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-vue-css-tailwind" rel="nofollow noopener noreferrer" target="_blank">Anima plugin</a>, Select the screen, and click 'Get code' to get HTML/CSS/JSX code.

1. Design Your Variants: Within Figma, create variants of your component, one for its default state and others for its hover state(s).
2. 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.
3. Fine-tune the Transition: Customize the transition settings to ensure a smooth effect that aligns with your design's aesthetic.
4. Download the code: Anima converts Figma interactions into code. Open the <a href="https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-vue-css-tailwind" rel="nofollow noopener noreferrer" target="_blank">Anima plugin</a>, 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 <code>color changes</code>, <code>fade in/out</code>, <code>rotate</code>, <code>grow</code>, <code>move</code> and more.
- Customize the CSS value, duration, and curve. ​
 How To Create Hover Effects In Figma

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.

1. Choose the layer/group you wish to apply the hover effect to.
2. Open the Anima plugin and click on Hover Effects.
3. Fine-tune the Transition: Select the desired effect or enter your own custom CSS. ​
 - Anima offers a variety of preset effects, such as <code>color changes</code>, <code>fade in/out</code>, <code>rotate</code>, <code>grow</code>, <code>move</code> and more.
 - Customize the CSS value, duration, and curve. ​
 How To Create Hover Effects In Figma
 
4. Save your changes
5. Preview to see how it looks 👌🏼
6. Sync the file to Anima or return to add additional effects.
7. Share or Download code: You can now share a live preview of your design or download the screen's HTML/CSS/JSX code.

___________________________________________________________

😎 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://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://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>.

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

How To Create Hover Effects In Figma

Sign in to Anima

Submit Bug Report

Back to Anima

Log in to Anima

Find answers and get help from Intercom Support and Community Experts

Conversations you've started through the messenger will appear here.

No conversations created by you

Try using different keywords or checking for typos.

No conversations found

Title

This site employs cookies and other technologies that we and our third party vendors use to monitor and record personal information about you and your interactions with the site (including content viewed, cursor movements, screen recordings, and chat contents) for the purposes described in our Cookie Policy. By continuing to visit our site, you agree to our {websiteTermsLink}, {privacyPolicyLink} and {cookiePolicyLink}.

This site uses cookies and similar technologies ("cookies") as strictly necessary for site operation. We and our partners also would like to set additional cookies to enable site performance analytics, functionality, advertising and social media features. See our {cookiePolicyLink} for details. You can change your cookie preferences in our Cookie Settings.

We use cookies to make our site work and also for analytics and advertising purposes. You can enable or disable optional cookies as desired. See our {cookiePolicyLink} for more details.

Advertising cookies are set by our advertising partners to collect information about your use of the site, our communications, and other online services over time and with different browsers and devices. They use this information to show you ads online that they think will interest you and measure the ads' performance. Social media cookies are set by social media platforms to enable you to share content on those platforms, and are capable of tracking information about your activity across other online services for use as described in their privacy policies.

These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.

These cookies are necessary for the website to function and cannot be switched off in our systems.

These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

You have the right to opt out of the sale of your personal information. See our {cookiePolicyLink} for more details about how we use your data.

Your Privacy Choices

We use cookies to enhance your experience. You can customize your cookie preferences below. See our {cookiePolicyLink} for more details.

Cookie Settings

Empty Help Center

Uh oh. That page doesn’t exist.

Home

Search results

Disappointed

Neutral

Smiley

Thinking...

Searching through sources...

Analyzing...

Tickets submitted through the messenger or by a support agent in your conversation will appear here.

No tickets created by you

No tickets found

Track the progress of all tickets related to your company.

Tickets portal.

{assigneeName} needs more information from you

Tickets

No access to tickets portal

Search and ask

Find guides, answers, and references.

Skip the search. Describe what you’re trying to do and get a grounded answer.

Browse articles and guides in this topic.

Create your workspace and invite the people you work with.

Set up your account

Build your first workflow and watch it run end to end.

Ship something

Connect the tools your team already uses to bring data in.

Connect your stack

A quick lap of the product so you know where everything lives.

{appName} in 60 seconds

This prototype demo is aware that you are reading “{title}”. It can point you back to the current article, but a production article-aware Fin contract is still follow-up work.

Prototype article-aware answer

Because you already asked about invitations, this prototype demo can add the follow-up: use the role selector before sending each invite to limit access to the teammate responsibilities.

Prototype role-limiting follow-up

This prototype demo suggests starting with your workspace profile, inviting the team members who need access, and then connecting the integrations you use.

Prototype getting-started answer

In this prototype demo, integrations are configured from workspace settings. Choose the integration, connect the account, and review the enabled permissions.

Prototype integrations answer

In this prototype demo, invite teammates from workspace settings, then choose the access each teammate needs before sending the invitation.

Prototype invite-team answer

This prototype demo does not have a scripted answer for that question yet. Try asking how to invite your team or open a source article. No production Fin API was called.

Prototype answer unavailable

I’ve got this page open. Ask me anything about it and I’ll answer from the docs.

How To Create Hover Effects In Figma

New to Anima? Start by Installing the Anima plugin for Figma 🙌

Adding Hover Effects Within Figma Components:

Adding Hover Effect in Figma Without Using Components:

Try it on your own for free!

😎 Get involved in our Anima Community Forum!

New to Anima?

Learn More