5 Steps to Create Incredible Hover Effect in Figma

5 Steps to Create Incredible Hover Effect in Figma

In this tutorial, we will be learning how to create an interactive button in Figma, but not a standard hover interaction. We will create a unique effect that will blow the minds of your users. The final effect will look like this:

By the end of this tutorial, you will have a good understanding of how to push the Figma interactive component feature to its limits. Let's get started!

Creating a hover highlight effect

For this tutorial, I assume you are already familiar with Figma Components, Variants & Interactive Components basics. If you feel that you need to learn more about mentioned features, feel free to read the following articles first:

1. Prepare the basic setup

All you need to achieve the hover highlight effect is two components. The first is the "Highlight element", and the second is the button itself.

2 components
Two components need for the tutorial

2. Create Highlight component variants

For the highlight element, you need to prepare two small variants. Make them small. This means they should have a size between 4x4 and 8x8.

One component is for the default state, and the second is for hover. The default variant should be fully transparent, so it won't be visible when there is no interaction with a button. The hover variant needs to have a blurred layer. Try to set the blur to about 16pt.

You may also experiment with layer blending, like Overlay - but this is optional. Think of this hover variant as the highlighted pixel.

3. Add hover interaction to highlight

Now switch the tab in the right Figma panel to "Prototype". In this mode, you are able to connect components within variants groups with a specific interaction.

Connect the default variant of the highlight element with the hover variant. Select "while hovering" interaction, then choose "dissolve" animation type, and set the duration between 500-800ms.

highlight component composition
Highlight element interactive component setup

4. Apply highlight component to button

Ok, now you have a single highlight element that is already interactive on hover—time to place this component's instances inside the button. Place them in a row without any additional spacing. Then duplicate the row multiple times. They will create a kind of interactive grid.

highlight elements placed in button component
Highlight elements grid in button component

5. Create button instance & preview prototype

That's it! Place the button component in the prototype, and see the magic happens. You may experiment with some additional elements that will interact on hover, pressed, etc.

hovering button

There is more you can do!

The button that highlights itself while you hover over its content already looks impressive. However, let me show you the kind of bonus you may prepare to make your prototype stand out. Obviously, you may explore more possibilities, but this effect will amaze your audience.

Create light reflection

The bonus tips will show you how to prepare a light reflection on top of a button.

Prepare button component structure

The secret is that the reflection is a special component within a button. There is also the next layer, "Button Fill," that imitates the fill of the frame, so the reflection becomes the stroke of the component...

1. Create reflection component variants

This is how the reflection component looks like. It is a variant group with a sequence of reflections.

Basically, all reflections are just ovals with the radial gradient as a fill. Here is the preview:

Reflection variants

Reflection is an oval

2. Apply interactions to the reflection component

The reflection is an interactive component. Every element is connected with the "After delay" property, so the animation runs automatically. To make the animation feel more natural, I have added more delay after the reflection goes through the entire element.

Here is the preview of all connections:

3. Add a reflection component inside of a button

Now, as mentioned - the reflection component is used as the background. To make it feel like a button stroke, an additional "fill" layer is needed. Add this layer on top, like other button elements.

Launch prototype

That's all! Super simple steps, results with impressive effect. Launch your prototype and delight yourself with amazing button animation.

Extend the idea

There is always an area to explore more possibilities. Creativity is our limit. For instance, you may try to imitate two light sources, light direction etc. Can't wait to see what you will create!

Two light sources for reflection

Video tutorial

If you prefer to watch the entire process of creating this effect, I have recorded a quick tutorial. It's live on YouTube. Feel free to watch it:

Summing up

In this tutorial, we learned how to create the unique button animation & hover effect. By using simple tricks, variants & prototyping properties, we created an engaging, interactive design.

If you're interested in learning more about Figma and its many capabilities, check out my other tutorials and articles. Don't forget to subscribe to the newsletter to stay up-to-date on the latest Figma news and tips!

Thanks for reading!