How to make a hover effect in Figma

Figma allows users to design and customize many features. One of the features you can use to improve the user experience is the hover effect. The hover effect on buttons means you’ll see a different layout when you move the cursor over to it. This effect itself can vary, from a standard one that changes colors to more complicated methods like changing the border or lights.

Continue reading to learn how to add a hover effect to your components in Figma.

Create hover effect on buttons

You can set a hover effect if you want your component to have a particular interaction and transition when you hover over it. The simplest result you can create is to change the color of the button to make it stand out and click. This is how you can create a hover effect on a button component:

1. Make the button.
   
2. Duplicate it and move it out of the frame.
   
3. Change the color of the duplicate button.
   
4. Create components by right-clicking and selecting “Create Component” from the menu, or by pressing “Ctrl + Alt + K” on your keyboard.
   
5. Click the “Prototype” tab in the sidebar.
   
6. Connect the two button components.
   
7. From the “Interaction details” drop-down menu, select “While scrolling.”
   
8. Click the “Open Overlay” option in the same menu and set the overlay to “Manual.”
   

When the user hovers over the original button, it will be replaced by one with a different color. You can also change the text displayed on the button in a similar way.

You will have to repeat this for each button.

Create hover effect on button borders

Another way to use the hover effect on button components is to create a border that changes when you hover over the button. Here you will know how you can do it:

1. Create a button with any text inside.
   
2. Double it.
   
3. Add the stroke to the duplicate, remove the fill, and change the color.
   
4. Click the “Prototype” tab in the sidebar.
   
5. Connect the two button components.
   
6. From the “Interaction details” drop-down menu, select “While scrolling.”
   

Now when you preview the button effect and hover over it, the colored borders will appear.

Using the Anima plugin in Figma

Another way to add a hover effect in Figma is by using an Anima code layout tool. This plugin has unique features that you can implement when creating websites, app icons, or other web components in Figma. You just need to choose which component you want to animate and adjust the settings accordingly. Here’s how to do this:

1. Choose the component.
   
2. Open the Anima plugin.
   
3. Tap the “Hover Effect” option.
   
4. Choose the effect (grow, shrink, glow in shadow and more).
   
5. Customize animation effects like “Duration” or “Curve.”
   
6. Tap the “Preview” button to see the effects.
   
7. Click “Save.”
   

Another feature of the Anime plugin is that you can customize the CSS transition. With it, you can take control of the animation speed and adjust its settings to your preferences or make them more natural.

Take advantage of Figma’s hover effect feature

Whether you are a professional designer or a beginner, you have many features in Figma to create unique designs and animations for your components, icons, and objects. The hover effect allows you to change the text or add highlights, different colors, different borders, and more. Knowing how to create these effects is of utmost importance in making your first website interactive and giving it a personal touch.