Skip to main content
Solved

Best way to swap applied styles with variables


Freddy

Hey, I’m stoked to see variables in Figma and immediately recreated our color style system as variables (the Styles-to-Variables-Converter Plugin worked like a charme).

So far so good, but how do I swap the applied styles with the new variables in my component libraries? Do I have to go through each page and swap them manually? Like so:

Is there a way to swap applied styles with variables for an entire file?

Any help is highly appreciated, thanks in advance!

Best answer by ivan_guidea

There is now the “Apply variables” plugin, which handles the styles to variables swap:

Figma
View original
This topic has been closed for replies.

5 replies

mfelix
Figmate
  • Figmate
  • 20 replies
  • July 5, 2023

Hi @Freddy,

While a few plugins currently allow you to convert styles into variables, I can confirm you will have to manually assign these new variables to the right elements/layers if you want to fully swap them from styles to variables. There is currently no automatized way to do this (just yet).


Kevin_Simpson

I was able to change a Color Style to refer to the Variable, to change all instances of it in my design system. For example, in this image, I clicked on the canvas, edited the settings for my “Primary” color, clicked on the color box under Properties, clicked on the Libraries tab, then selected the variable (to replace the original hex code for that style).

I am just beginning this process, so I don’t know how robust this approach is yet, but for now it means that I only have to change all of the styles themselves (rather than instances of them across all pages).

Later I expect I’ll have to update the components themselves to refer to variables, but in the meantime this allows me to switch between themes (light, dark), etc.


ivan_guidea

There is now the “Apply variables” plugin, which handles the styles to variables swap:

Figma

djv
Figmate
  • Community Support
  • 4774 replies
  • March 7, 2024

Thanks for sharing, @ivan_guidea!


  • 4 replies
  • April 18, 2024

That is indeed a quick and effective solution. Thanks a lot for sharing.


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