Skip to main content
Solved

"While hovering" state for variable is not working


Mona_Li

Jun-23-2023 13-47-38

I created a small demo for the icon hovering state which will change color and show a tooltip on hover. But when I was using the variables to control this, it seems like the “While hovering” state is not working properly and it will never change back to the original state anymore.
wondering whether it’s a bug? shouldn’t the variables change back to the default states when the cursor is no longer there?

(also I’m not able to use the “mouse out” together with “while hovering”, wonder how others deal with this)

Best answer by dvaliao

Hey All, thanks for the feedback and sorry for the delayed reply!

We checked with our Prototyping team and this is currently the expected behavior.

For “while hovering” interactions with variables, we don’t save the previous value of the parameter to go back to, because that would add complexity in determining what that previous value should be. For some cases it’s simple, but if many interactions have occurred, it’s a bit harder.

As a workaround, we recommend implementing with mouse in and mouse out actions. The mouse in would set the variable as shown, and the mouse out would manually specify the value you want it go to after hover.

View original
This topic has been closed for comments

36 replies

Matty_Piotrowski

This happens with me too. Whenever I add some variable logic or conditional, it removes the hover interaction.


Adam_Christiansen_c

same here. it behaves the same as “mouse enter”. and gets especially funky if you have logic to change its appearance like +4 to it’s height while hovering. it’ll grow each time you hover with no return to its not hovered state.


Peter_Uithoven

I’ve been adding a mouse leave in a lot of cases to then revert the change. Annoying, but works fine.


Jonas24
  • 1 reply
  • June 29, 2023

same here. It would be fantastic to change a variable just on hover. Thanks


Gabriela_Sanders

Same. Not working, just keeps the hover state.


Bonnie2
  • 1 reply
  • July 5, 2023

Same +333333333.
working… !!! Intermittent!!!


Vincent.lapert

Same problem here. With mouth enter and leave too ! It doesn’t work with variables 😕


Amy_Gardner

I have this same issue, tried both ‘while hovering’ as well as mouse enter/leave and more often than not, it stays in the hover state.


Same. Trying to change a text variable when hovering on various components. Prototype doesn’t make the switch. Tried mouse enter and mouse leave, no help


Erik20
  • 1 reply
  • August 10, 2023

Same. I have an interesting hook though. I have a table with rows. I have the background color of each row bound to a variable for the color…

var: row-1 value: #ffffff
var: row-2 value: #CCCCCC

I have the variable switch on mouse-enter:

row1.onMouseEnter.setVariable.row-1 = #somelightbluecolor
row1.onMouseOut.setVariable.row-1 = #ffffff

Strange thing is, it will only work for the last defined row. It will change all the rows to the light blue color on mouse enter but will only switch back to white on the last defined mouse action.


Antony5
  • New Member
  • 3 replies
  • August 17, 2023

Same issue here. Would be fantastic to have it work since I have many buttons in my design system and would hate to create 300 variants just for hover interaction for each button.


  • 2 replies
  • August 20, 2023

I am having the same issue. With mouse enter / mouse leave - the hover state sticks. When I try to use hover to set the variable, nothing happens. Just wonky all around. 😦


  • 1 reply
  • August 21, 2023

Same here, although I am 100% it worked the first time I previewed the animation. After that I can’t get it to work anymore: while hovering doesn’t do anything for me, mouse leave don’t set the collar variable to the value I want, so I couldn’t find a way around this.


Frost
  • 1 reply
  • August 28, 2023

I have the same problem. Almost all pages stopped hovering buttons in variations


sararas
  • 4 replies
  • September 6, 2023

Same for me: the interactions only work on the last item I configure.


  • 3 replies
  • September 12, 2023

I’m getting something very similar. I try to update a string variable for a tooltip on mouseEnter, and the show the tooltip onHover, but the onHover function doesn’t work (unless I remove the variable part)


Ivan_jangoux

Same thing here still. Any news of when this will be fixed?


vdekkernl
  • New Participant
  • 49 replies
  • November 6, 2023

This is my first time creating hover states with variables. In my case nothing changes at all, when I hover the element with the cursor.

I put the interaction on a multi-variant component and created different variables for the default and hover state. Which I then select the hover variable. I do not get it. If it is possible to configure this, then it should work that way, right?


Neil_Roose

Agree, mind-blowing that something as basic as this doesn’t work. But glad to lean it’s not just me.

Edit: I could’ve sworn this used to work. So many things in Figma seem to be broken now and tasks generally take me a lot longer than they did a couple of years ago. I’m actually scared about taking on large freelance UI projects for fear of having a nervous breakdown due to missing deadlines or looking incompetent because of all these bugs.

Figma/Adobe — fix this now.


Same for me. Seems such a basic thing not to have


Ilakkiaselvan_Subbiah

So many people facing issue and still not fixed, too bad.


sararas
  • 4 replies
  • February 6, 2024

Last year when I submitted this Support reached out to me and I sent a video of the behavior. They confirmed it was a defect - but it seems like it’s not been fixed yet.


Roman_Pohorecki

I just tried this feature and hover-off does not remove the variable. Please fix, it would save a ton of variants in a component file.


Ioana_Ionescu

Same problem here. When a state changes using variables the state remains on hover. Really annoying 😕


dvaliao
Figmate
  • Community Support
  • 4661 replies
  • Answer
  • March 13, 2024

Hey All, thanks for the feedback and sorry for the delayed reply!

We checked with our Prototyping team and this is currently the expected behavior.

For “while hovering” interactions with variables, we don’t save the previous value of the parameter to go back to, because that would add complexity in determining what that previous value should be. For some cases it’s simple, but if many interactions have occurred, it’s a bit harder.

As a workaround, we recommend implementing with mouse in and mouse out actions. The mouse in would set the variable as shown, and the mouse out would manually specify the value you want it go to after hover.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings