Skip to main content
Question

Hover Color Change with Mode Switch with Variables

  • December 12, 2023
  • 3 replies
  • 2141 views

I have color tokens set up via varibles. I have two modes, dark and light. For light mode I’ve set color to change to the ‘light mode hover’ color on mouse enter and that works fine. When I switch the frame to dark mode, I still get the ‘light mode hover’ color on mouse enter. How do I set up the color variable to display the correct hover color for each mode switch? I thought of if function but it doesnt seem to link to the variable modes. Any Ideas? Thanks

This topic has been closed for comments

3 replies

ksn
Figmate
  • Community Support
  • 1644 replies
  • December 12, 2023

Hmm…this one I’m not well-versed in, so I can’t give a confident answer on my end.

If you’re willing, can you file a ticket here, and also share a copy of the file with the modes to support-share@figma.com? https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374


Roxanne_G
  • New Member
  • 21 replies
  • February 2, 2024

ah- I have the same question. With plain older variants I just used to use the “Change to” prototype action and select the hover variant.

Now I want to make a hover event where I change the color variable for fill to its hover mode fill color. In other words, change from Primary-fill:default to Primary-fill:hover on a hover event.


y_toku
Figmate
  • Community Support
  • 2412 replies
  • February 5, 2024

Hi there,

Thanks for the post. Could you reach out directly to the support team with a copy of your file: https://help.figma.com/hc/en-us/requests/new. Our support team will be able to take a closer look.

Please make sure you use the email associated with your Figma account, include links to the file in question, and share access with support-share@figma.com. Don’t worry, inviting us to view your file won’t impact your billing.

Thanks,
Toku


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