Figma: Hover Effect by Swapping Overlays
Tags: design, tutorial, ux, figma
Published: 2022-08-13 19:25:00

Lately I've had to work with Figma a lot at work. As I get to know the tool and its functionality better every day, I've found that you can do some really cool stuff now, as opposed to a year and a half ago when I used Figma a few times.

In this tutorial, I want to show you how to create a hover effect using swapping overlays. The basis will be a logged in page with navigation bar, where when you tap on the user icon, an overlay opens and you can choose to change your settings or log out.

{% embed https://youtu.be/wGCE7uBfaHQ %}

I'm starting with a desktop frame, since the hover effect is triggered when using a mouse. I'm keeping the style simple. I'm assuming you already know some basics of Figma.

## Setup

I have created a simple layout with a header, a navigation bar and a home page. In the navigation bar we can see the image of the user profile to which we want to add an action later.

You can see all the frames and components created on the left side in the sidebar, which is called pages in Figma.

![Project setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oq0t9yysmpu3hsr4qhgt.png)

**For the hover effect**
When we click on the profile picture, a modal appears where we can choose between `edit profile` and `sign out`. On both tabs we want the hover effect. So I created the modal's component and two instances of it, one with the gray background for the hover effect on `edit profile` and one on `sign out`.

![Component and two instances](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r68dso2l8vaw1e5s3inz.png)

**Endpoints**
I created another modal that displays a form where the user data can be updated. I also created a frame that will be displayed when the user logs out.

## Prototyping

If you click the prototype tab on the right side of Figma, you can add actions to the frames and components you create.

![Final prototype setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4p28kgm7qatfbbkh6ni.png)

**Click on user profile image**
When we click on the user profile image in the navigation bar, a modal should appear where we can select what should happen next.
If we click on the profile image and add an interaction with the values of the `on click` action, it should show `open overlay` and the `settings` component.

Additional settings for the overlay can be selected. I choose to manually position the overlay under the profile image, with a darker background under the overlay and that it closes automatically when a user clicks outside the overlay.

![Interaction on profile picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8syktnybdp5cb4rskku.png)

**Hover effect on tabs in modal**
To add interaction on the two tabs, we select the first tab `edit profile` and use the state `while hovering`. We now want the overlay to be swapped with the overlay that has the hover state.

![Interaction on 'edit profile' tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh7y74v0gg3mqd5k5b6q.png)

Repeat this process with the `sign out` selection on the original component.

![Interaction on 'sign out' tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22kh1jkztjkd74ywc4yb.png)

We also want to have the hover effect on the swapped overlay from the other tab, so we need to add the interaction on each instance as well.

![Interaction within instances](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdwp127xto3fr75rpm7e.png)

**Navigate on overlay**
It is also possible to open an overlay when you are already on an overlay. We want to open the `update profile` modal when we click on the `edit profile` tab. For this we add an interaction `on click` that opens the `update profile` overlay.

![Navigate to logged out frame](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n2ard1nf1xtrs5g8f05.png)

For an `on click` interaction on the `sign out` tab, use "navigate to" and select the "logged out" endpoint frame, as the entire frame is to be changed.

## Conclusion

It's super awesome how interactive Figma is compared to the day I started using it. It makes the experience pretty awesome and realistic, which makes it easier for developers to translate the design into code.


---
![Thank you](https://docs.google.com/uc?export=download&id=166Ecq6uBl61U14OUlkHOHIBv2ArKoumJ)

_Thanks for your reading and time. I really appreciate it!_