Convert Styles to Variables for Libraries in use

[Dominique_Hogenboom]

Hi!

We’ve got multiple libraries in use by a bunch of designers, all relying on (color) styles currently. We’d love to convert these styles to variables, but it seems like there is no built-in option to accomplish this task. The main challenge we face is not the manual creation of variables from the existing styles (since we use Token Studio for that), but rather the absence of a way to maintain the link between the color style and the variable we intend to replace it with.

If we create variables and remove the color styles, it breaks all the color styles in every design file, leaving only HEX values behind. Without any connection between styles and variables, designers would need to manually reestablish the link for each design. Given that we are a large company with numerous designers working within the same design system, this process seems unfeasible.

If anyone has a solution to convert styles to variables while keeping the link intact across all design files using the library, please let us know!

[Anna_Stevenson]

we have been using this plugin to help convert styles to variables. https://www.figma.com/community/plugin/1253585487427690087

[Bart_Van_Hecke]

I’m having the exact same issue as @Dominique_Hogenboom in my organization. Spent years perfecting the design system everybody uses, built around styles and components. I see the enormous added value variables can bring and I fully support the move towards development so I love to dig in to variables but I honestly don’t see the point in keeping my styles anymore (except for storing multiple values like gradient colours). At this point it feels I will spend a lot of time reorganizing the files to listen to variables instead (I have at least 5 multi-paged design files depending on my design system). So I’m not fully capturing Figma’s vision ons this. Found another valuable topic on it that deals with the same issue:

Color Variables VS Styles - Are Styles worth using for color anymore?

I really like that idea of utilizing styles in the next chain of an atomic structure, holding multiple variables like you said. I think that could be really cool to see. Cause yea, at this point, and I’m just thinking in terms of colors, choosing between a style and a variable seems either redundant (if you do both) or just a matter of preference. Though I do think that it’s only variables that can leverage the “modes” layer of functionality, which is a solid justification for their use. I also …

Would like to have the view of @Figma_Support on this.

ps @Anna_Stevenson The plugin you mention works wonderfully well but make styles redundant as well

[Dominique_Hogenboom]

Thanks! I tried it out but it doesn’t seem to work as well when working with libraries. The design files that use that library do transform from styles > variables, but once I make a change to a certain variable in the library and push it again, the change isn’t visible in the design file. The variable is still there but seems to be disconnected from the library somehow. Did you guys face this issue as well, or are you working only locally with variables?