Skip to main content
Question

Convert Styles to Variables for Libraries in use

D

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!

Lilito
1 person likes this
  • Lilito
    Lilito

3 replies

Anna_Stevenson

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

D
1 person likes this
  • D
    Dominique_Hogenboom
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:

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

Ella_Forte1
D
2 people like this
  • Ella_Forte1
    Ella_Forte1
  • D
    Dominique_Hogenboom
D

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?

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings