Backing color styles with variables

Hey everyone. Today we're going to take a look at backing our color styles with variables to make it easier to begin using the color variable type in our libraries and design files. Here I have this world peas design, and if I select it, we can see that it is using color styles from our styles library, as well as the components within it are also using some of those styles. So we actually want to go to our style library, and this is where we're going to create variables to match each of our colo

r styles. Ultimately, we want to create those color variable types, and then we want to go in to each color style and update the property to use the variable instead of this hex value. Now we could do this manually, or there's a plugin in the community that we can use to help us. So I'm going to go to the resources menu and I'm going to look for the styles to variables converter plugin. Once I run this, it's going to automatically create variables for all of these styles in a new collection. So

if I now open the local variables, we can see that all of these color styles have been converted over to variables, and the groupings are also carried over to groups in the variables. Now, maybe for in the variables, I want to eliminate those groups and just see them all up. So I'm going to select all of them in Ungroup to see all of my variables here, and maybe I also want to rename this collection to just be colors. Awesome. Now, we would normally want to update the color styles to use those v

ariables, but by running that plugin, it's already updated them for us. So we now have all of our color styles backed by color variables. So from here I can go ahead and publish this library and we can see we're adding that new variable collection with all of the variables. And we're also updating all of the styles. So once I publish that out, we can go to our downstream libraries and accept those updates. In this example, we're just going to go into this sample component library where we'll rev

iew the changes and we'll accept those updated styles. From here, we'll also want to publish out our component library, so that way the add product file gets the updates. Now, once all of the downstream libraries have been published any product design files will get the update prompt right here, and we can see all of the components have been updated as well as any of the color styles that we're using right here in this file. So by updating all we noticed nothing has changed in the design. Everyt

hing is still intact, and if I click into this header, it's still using the color style. Our components are still using their styles, but here's where I could start to detach styles to expose the variables attached to them. So with the header selected here, I'm just going to go and detach that fill and we can see it's now using the color white variable. So we could also do this for our components. We could go into the library, select all, and we could manually detach each style. At the same time

, we could also use a plugin like destroyer where we might want to run this and just hit destroy all color styles, and we can now see we're just using the variables for all of our components here. I'll publish this update once again, and from here we can now see that in our product, once we accept those updates, our components are now all using the variables. So by having your color styles backed with variables, you can then go back and detach styles and instantly start using those color variabl

e types. This will make it a lot easier as you transition over eventually being able to just delete those styles from your style library and publish an update after you've had plenty of time for folks to accept updates in their consuming files. I hope that this will help you out. Check out the variables playground file if you haven't duplicated it yet to learn even more about how to use variables in Figma.