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 color 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
variables, 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 review 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.
Everything 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 variable 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.