DEV Community 👩‍💻👨‍💻

Cover image for Figma: Hover Effect by Swapping Overlays

Figma: Hover Effect by Swapping Overlays

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.

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

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

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

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

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

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

Interaction on 'sign out' tab

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

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

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

Thanks for your reading and time. I really appreciate it!

Top comments (3)

Collapse
 
francoisaudic profile image
francoisaudic

Does it work on keyboard focus also ?

Collapse
 
yuridevat profile image
𝕁𝕦𝕝𝕚𝕒 👩🏻‍💻 Author

Hey Francois!

To interact with the prototype, Figma is explaining the triggers in detail in the article Prototype triggers.

I found out that they are currently working on an accessible mode, which is currently in beta version. I tried it out and it was partially working.

I could not find something specific for keyboard users only, therefore I submitted a question on how to do so if possible. I keep you updated when I receive an answer.

Collapse
 
francoisaudic profile image
francoisaudic

It's Good that they are working on accessibility, even for the prototyping.
Accessibility needs to go from the conception to the final product.

🤔 Did you know?

 
🌚 You can turn on dark mode in Settings