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:
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?
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?
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
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.
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.
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!
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.
