Web Design » Figma » How Do You Do Hover State in Figma?

How Do You Do Hover State in Figma?

Last updated on September 29, 2022 @ 12:27 am

Hover state is one of the most important parts of any user interface. It’s what allows users to interact with elements on a screen without having to click them.

Figma makes it easy to add hover states to your designs with the help of its built-in interactions. Here’s how you do it:

1. Select the element you want to add a hover state to.

2. In the right sidebar, click on the “Interactions” tab.

3. Click on the “Add Hover State” button.

4. In the resulting dialog box, select the desired trigger (e.g., “On Mouse Over”) and action (e., “Change Opacity”) from the drop-down menus.

5. Click on the “OK” button to save your changes.

And that’s all there is to it!

Note:
You can also add hover states to groups and frames by selecting them in the left sidebar and then following the same steps as above.

Conclusion

How Do You Do Hover State in Figma? is by selecting the element you want to add a hover state to, clicking on the “Interactions” tab in the right sidebar, clicking on the “Add Hover State” button, selecting the desired trigger and action from the drop-down menus, and clicking on the “OK” button to save your changes.

PRO TIP: If you are not familiar with Figma, we do not recommend that you attempt to use the hover state feature. This could result in unwanted changes to your design.
Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.