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.

4 Likes

I agree! I switched from Adobe XD to Figma last year for work, and this is one thing I still miss from XD! I love how if you make a hover state of a component it automatically prototypes it for you! It’s soooo nice and such a time saver! I like Figma better in a lot of other ways, but little things about the components make me want to switch back to XD on the daily! @Figma_Support please, please, please take a look at Adobe XD and take all the things we love about it and implement it into Figma! It would save so much time and make me so happy!!

1 Like

As someone who used XD for years, I totally agree. Prototyping common stuff like hover states should require less steps to achieve.

One thing that bugs me too is that I have to copy paste a newly created component to place only an instance of it on the artboard. Creating a component inside an artboard should place the main component somewhere else.