Figma Support Forum

Shortcut for creating hovers & click/tap states

I spent much of yesterday creating hover states for links and buttons in my prototype. For me, hover states are one of the major use cases for interactive components. Part of this process was pretty clunky and unnecessarily time consuming - would it be possible to add something like a variant preset or style to make this quicker? Here’s what I’m running into and what I’m thinking would work nicely:

My current process:

  • Create Component
  • Add variant
  • Rename “Property 1” to “Hover”
  • Set value for state 1 (False)
  • Set value for state 2 (True)
  • Make the necessary design changes for the hover state
  • In Prototype, add interaction for hover

Technically, I don’t need to spend all that effort renaming the properties and values, but I think it is a necessary practice, as with creating good variable names in code.

What I’d like to do is one of the following:

  • Create component
  • Add hover variant and get the property, values and interaction already set up
  • Make the necessary design changes to the hover state

image

[Edit] Same as above for click/tap states. There are probably a few other basic interactions where a shortcut would be very helpful.