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?