Turning varients into "States"

[J_Yun1]

I LOVE the interactive components. But the whole logic is still a bit archaic.

Can we have a feature where we can just assign the most used “states” on a single component, like “Default, hover, focus, active,etc”?

Currently, you have to create multiple variants, name the property for each "State = Default, Hover, Focus, etc) then rig them up to create a simple microinteraction that is essentially consistent throughout the entire component library.

I’m so excited that I don’t have to create an entirely new screen just to rig up a simple hover state on a single button, but I still have to create at least 2 different buttons in my master component in order to turn on the “hover” function. Multiply that to X number of different components that need hover states, then multiply that again with X number of components that need focus state, and so on. Currently, my master button component contains 126 buttons. This could be reduced to 24 if I could just assign a few states in a single button.

This also solves the issue that the button you want to rig to trigger another action has to be done on the “Hover” button, not the actual button because the logic “Changes to” changes the actual element instead of just showing a different state of the same element.

Not to be that guy, but Adobe XD actually got this logic dialed back when I was using it 4 years ago.

Figma, PLEASE consider adding this feature. It’ll speed up the process for A LOT of people.

[Eric]

This is a legit “concern” you need make unnecessary excessive components because things are “connected/recognized” by size. It makes “sticker sheets/component libraries” bloated.

This is more/less the same fundamental issue as the size adapted interactive components. I would guess when they solution that for interactive components, it will apply to this as well.