Skip to main content

It simply does not work as it is supposed to.


Figma loses track of which variable is the “latest” version across multiple files, Especially if you have your colors separated from your components in some way. And when that happens doesn’t allow you to switch modes, it is simply greyed out.


If there is a single variable in a page/section/frame/group/layer that isn’t the “latest”, Figma refuses to let you switch modes. There is no indication of which variable is outdated, you simply have to re-apply every variable manually. Hidden layers (like in booleans) also cause the issue, so you have to dig hard in the layers panel to find it in case there’s an old layer that someone hid at some point. This can be extremely frustrating and time consuming, and it is faster to simply switch out the colors manually.


Sometimes modes also appear to not work for no apparent reason. Here I have a sketch where “dark mode” works, but if I copy and paste the file into the source file of the variables themselves, it no longer wants to switch modes. There is no apparent reason as to why:


modes

OMG that looks a nightmare, are you sure you have setup the variables correctly? Maybe the Adobe effect is happening here? Figma seems to be going down hill in performance for the past couple of months now, but no one seem to be talking about it?

Hey Isaac, thanks for reaching out!


This definitely doesn’t seem right. Is this happening in a specific file or in all files? Any difference in browser or using the desktop app? Are you able to share a link to your file(s), so we can take a closer look?

It’s happening across files and libraries. In the desktop app. There’s another discussion about it here which you may have seen: Unable to switch variable modes - #28 by Isaac_Fagerli


I can send you a link to a file.

The hidden layer is such a pain, there are so many manual work required to get the mode switching to work, it’s probably easier for me to set two set of color token to switch between light and dark mode. Is it possible for Figma to bypass hidden layer when doing mode switching. A lot of hidden layers are embedded in the nested component itself and it’s not easy to change them e.g. for icons

Thanks for the additional context!


Since variables is currently in open beta. We’ll continue to add more features and polish the experience during this time. To be completely transparent, for the time being, you may experience bugs and/or performance issues during this time, but we’re proactively looking for ways to improve current beta features and hope to positively evolve during this beta period.


The best way to help out the Variables team is by submitting a bug report directly to them: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374


Be sure to use your Figma account email, include a link to the affected file(s), and share it with support-share@figma.com, so they can take a closer look.

@Isaac_Fagerli This happened to me and I was able to find a fix. Hopefully it’s the same issue you’re having.


Here’s what was going on:



  • I have a base design system file that has all our color variables and web components

  • I have a native design system file that references variables and components from the base system.

  • I set up variables for light and dark modes in the base file and applied them to everything in both files. All was great. I was riding high.

  • I set up a third color mode called “Blueprint.” (I assume for the same purpose as your mid-fi.)

  • When I published and updated the native DS file, half the screens worked, the others were greyed out. I was grumpy.


The fix:



  • The problem seemed to be coming from components in the native DS file that were using components from the base file.

  • I published the variables updates in the base DS file.

  • I reviewed/updated the base DS file itself to use the new color variable updates.

  • I published the base file again (this time including any components referenced by the native DS file).

  • I reviewed/updated the native DS file and everything worked.


Hope that’s of some help. The double publish step was not intuitive, but hopefully it works for you.

I am dealing with this issue now and it is an incredible tedious job of trial and error in regards to updating styles in any library that references the modes. Which when you want your modes to be at the top level of your design system, becomes a big problem.


Without complicating how to fix this, it would at least be nice if Figma could tell me why the option is greyed out. If I could target the individual components that are causing a new mode to not be selectable then at least there’s a clear path to fixing it.

I lost all my variables and collections when switching versions, it didn’t even show me greedy out option, just gone and had to find it the hard way. Very disappointing

Hey Josh, can you expand on your fix? I don’t quite understand what you did. You have a base library file (base design system) and a screens design file (native design system)? Screens design file has components containing other components from the base library file? What updates did you make to the variables in the base file? Thanks!

This topic is also covered here. Probably also listed below in the “New & Unread Topics” section.

hi guys, i have run into this issue the last few days and I’m glad to find that i was not the only one so i want to share this. MAYBE I FOUND THE REASON WHY THIS ISSUE WAS CAUSED IN THE FIRST PLACE

i uploaded the video of my screen from where i switched the theme light to dark and only some of the screens had the dark mode available (active) to click/select from. some screens that have dark mode are greyed out like everyone mentioned.


the reason i found was some of the components i used on the screen were not updated/lost. for example, component A doesn’t exist in the component file anymore that’s why it doesn’t get to update with darkmode.

Reply


Terms & ConditionsCookie settings