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!
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).
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.
Thanks for sharing, @ivan_guidea!
That is indeed a quick and effective solution. Thanks a lot for sharing.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
