Some color variables display as palettes in the colors dropdown and selecting them applies a nameless white color

My team is experiencing issues with color variables in our design system. Some don’t display right under the Libraries colors tab.

In the screenshot I’ve shown the colors dropdown and have hovered over a color variable. The selected rectangle has that color applied.

In list view, the broken colors are represented by a palette icon.

In grid view, the broken colors are not even displayed.

The biggest issue is that selecting any of the broken colors applies a nameless white color. The name of the color appears as an empty box next to the thumbnail.

An interesting fact is that some of the colors that are represented by the palettes icon still get applied correctly.

Another interesting fact is that different teammates see different broken colors.

This issue is present with new files, as well as existing ones. The library is up to date in those files.

The colors are not broken in our design system file.

This has been an issue for months now. However, when we initially made the switch to color variables, this was not an issue.

Has anyone else experienced any of these issues?

Hi @Matey_Devedzhiev1, Thanks for reaching out and for sharing your screenshot and details. It really help us understand the issue better!

I’ve done a bit of internal exploration, and it seems that there might be something in the network configuration that’s preventing the items from loading correctly.

Here are a few steps you can try:

  • Could you please reach out to your IT admins and have them ensure *.Figma.com has been allow listed through all firewalls. You can find more details here: Adjust your network settings
  • If possible, try connecting via a different network, such as a mobile hotspot, to see if these load?
  • If you are using any VPNs or firewalls, could you try temporarily disabling these to check if these load?
  • Please also check our troubleshooting tips to ensure none of these issues may be blocking these from loading: Troubleshooting checklist

If you’ve tried all the above and still face issues, I recommend contacting our support team here: https://help.figma.com/hc/en-us/requests/new
When reaching out, please provide the following details. So that our support team can take a closer look and test:

  • Use the email linked to your Figma account.
  • Include direct links to the file and any related library files and invite support-share@figma.com to those files with “can edit” permissions (This won’t affect your billing).
  • Please let our support know the troubleshooting steps you have already taken.

I hope these steps help! If anyone in our community has any additional suggestions or tips, please feel free to share here.

Thanks,

1 Like

(post deleted by author)

Thanks for the quick response! All good tips, I’ll keep them in mind. It seems that my colleagues were able to reach you, as well, so I’ll leave it to them. Thanks again and keep being awesome!

Cloud you close this topic now? I don’t seem to have the option to do that anymore. Thanks!