Subscribe to my newsletter and...
Get a free chapter of my book.
I regularly share the updates on new design tutorials, tricks & news. You may expect also to get notified about my tools announcements. No spam!
Get free chapter + join newsletter
Figma
May 15, 2023
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. 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.
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.
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.
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:
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!
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!