Styles to Variables Converter

About this plugin

This plugin takes your color styles and converts them into new Figma variables, reflecting their structure, names and descriptions.

Local library

If you use your library locally only (in the same file), after running the plugin, you can safely delete all converted styles – layers that were using these styles will now have a variable bound to them.

Published library

In order to safely remove styles using published library, you should do it in 5 steps:

1. Use plugin (it will preserve styles but with references to the newly created variables).
2. Publish the library (with styles that now refer to variables instead of hex values).
3. Update files with new styles (the styles will still be applied to layers, but now with bound variables; depending on the design operations, you may need to wait a few weeks until every current file is updated).
4. Remove styles from the library.
5. Publish library (for unknown reasons, I found this step unnecessary, but I would still recommend doing it).

How it works:

1. Getting all local styles that are convertible (single, solid fills)
2. Creating new variables based on gotten styles
3. Binding variables back to styles definition

Keep in mind, that not every "color" style could be converted to variable. Styles with multiple fills, gradients, images, and videos won't be converted, so don't delete them after conversion.

Watch out for duplicate style names because while styles can have duplicate names, variables are still required to have unique names – the plugin skips such duplicates.

Since variables cannot use some characters (., $, {, }) in their name, they are replaced with underscores (_). In some cases it might result in additional duplicates that will be skipped.

Hopefully, this plugin will save you some time. I would greatly appreciate your feedback.