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.
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.
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.
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.
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.
Repeat this process with the sign out selection on the original component.
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.
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.
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.
Thanks for your reading and time. I really appreciate it!
Top comments (3)
Does it work on keyboard focus also ?
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.
It's Good that they are working on accessibility, even for the prototyping.
Accessibility needs to go from the conception to the final product.