Auto merge single color fills with matching color variables

Prior to color variables being introduced all of our design system colors were saved as styles in our shared library. Now with the introduction of color variables, it seems style usage is shifting to be meant for multiple color fills and other more complex fills. For simple, single color fills, Figma recommends we use color variables (this is based on the tooltip in the style picker, but doesn’t seem to be reflected in the official documentation yet).

My team has added all of our design system colors as color variables, but now in the style picker there are two sets of colors, first all of our new color variables, then all of our legacy styles. We’d like to delete the legacy styles so there is just one set of colors for our designers to choose from, however deleting a style detaches all of the instances of that style across text, shapes, frames, etc. So that is not a viable option since all of the existing colors across our teams design files will become out of sync with our design system.

So for the time being it seems we are stuck with duplicates of each color in the style picker. I suppose we could delete the color variables, but that feels like moving backwards and there are already instances of these being used across our teams.

Unless there’s something I’m missing, it seems critical that Figma provides a proper way to decommission legacy single-color styles. As long as there are multiple options in the style picker, designers are likely to use a mix of the new color variables and inadvertently use the legacy color styles, which is going to increasingly exacerbate the problem of having multiple sources of each color across our design files.

It seems like the easiest solution for us would be something like:
When a single-color style is deleted, instead of detaching all of its instances, check to see if there is a color variable with a matching HEX code, then either automatically replace those fills the matching color variable, or ask the user to confirm they’d like to replace.

If this had to be a manual process I think that would also be fine at the library level, as long as the changes are propagated upon publishing. Something like going to the color styles menu, right clicking and having an option in the context menu like “merge with matching color variable”. If there are multiple matching variables, or multiple across different modes, maybe we’d need additional option to specify the intended one?

Just found and tested a viable workaround. It’s not ideal and somewhat tedious, so I still think the above idea should be considered, but wanted to share in case anyone else was having the same problem.

Heres the process:

  1. Add all of your color variables to your library file
  2. In the right side bar go to your color styles in the local styles area.
  3. For each color style, either right click it and click ‘Edit style’, or just click the Edit icon that appears on hover.
    3b. Click on the color fill under Properties to open the Color picker / Style picker panel.
    3c. Switch to the libraries tab at the top of the panel and find the matching color variable. The color style should now be referencing the color variable.
  4. After updating all of your colors, publish your library.
  5. Once published you’ll need to accept the updates on ALL of the files across your organization that use the library. Any files that don’t accept updates before you move on will have all of their color styles detached to plain HEX values.
  6. Once all of your organization’s design files are in sync with your shared library you can delete the legacy color styles. Anything that referenced those styles will now be referencing the color variables.

Im using the Figma desktop app btw. I assume the process is the same or similar enough in the browser version though.