![]() To add interaction on the two tabs, we select the first tab edit profile and use the state while hovering. 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. 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.Īdditional settings for the overlay can be selected. 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 you click the prototype tab on the right side of Figma, you can add actions to the frames and components you create. I also created a frame that will be displayed when the user logs out. I created another modal that displays a form where the user data can be updated. 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. When we click on the profile picture, a modal appears where we can choose between edit profile and sign out. You can see all the frames and components created on the left side in the sidebar, which is called pages in Figma. In the navigation bar we can see the image of the user profile to which we want to add an action later. I have created a simple layout with a header, a navigation bar and a home page. I'm assuming you already know some basics of Figma. I'm starting with a desktop frame, since the hover effect is triggered when using a mouse. 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. In this tutorial, I want to show you how to create a hover effect using swapping overlays. 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. Lately I've had to work with Figma a lot at work.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |