After speaking with one of Figma’s Technical Quality Specialists, it is an issue with out-of-sync libraries. It may be due to using the Tokens Studio plugin and syncing tokens with Figma but in any case, I have had to manually go through every component and make sure that all of the variables are correct. In some cases, the variable was linked to a previous version.
To identify the issue these were my steps:
-
Create a section, give it a background variable to access the modes on the layer and provide it with the mode that has the issue (in my case, Dark mode).
-
Bring in the component, or UI that has the issue and you should immediately see the components that are problematic (in my case, TextInput backgrounds)
- In the below screenshot, you can see that when selecting background/component/default in the selection colours panel, the variable is not highlighted in the library pop-out because it is not in the current version. All I have to do is connect it (at the UI or component source) to the correct variable and the issue is resolved.
As you can see, the issue is now resolved and the TextInput now looks correct in dark mode.
I agree with @Paul65 that it would be good if Figma could better indicate where variables are linked to a library that is no longer available (i.e. an older version) as this was very hard to identify. Further to that, I don’t really understand why modes that have issues are greyed out because setting the mode on the section and then dragging UI in is a hacky workaround. I think it would be good if modes were never greyed out so we could see where the issues are and with an indicator on the issues, it would be easy to fix.