My Created Styles in Variables

I’ve got all my styles created already that I use. How can I use those already created styles in my variables without having to got get the hex code of each and make it again. This would mean i need to update the variable whenever i update my style as well.

So yeah, any way of using my styles within my variables?

5 Likes

Hey!

I’m also trying to figure this out. I’ve got +100 styles on my DS, with descriptions in each one of them. Recreating them now as variables would be a nightmare. Does anyone know how to use styles library to create variables?

Hi! I saw Figma mentioned this on Reddit - they have a beta plugin called “styles to variables” which does exactly what you need, but it’s only provided as a Javascript file which you need to install manually. So it’s definitely something they’ve considered, but it doesn’t seem ready for prime time (I certainly wouldn’t want to install it myself!)

If you want to take a look it’s here on Github - GitHub - figma/plugin-samples: 🔌 Sample Figma plugins. (in the folder “styles-to-variables”).

1 Like

By now there are a few plugins on the market that convert color styles into variables, each with several thousand users.

One of them was even featured in a video tutorial Backing color styles with variables on the official Figma Youtube channel.

I found a few others by typing in “to variables” in the Figma plugin searchbar.

DISCLAIMER: I’m not affiliated with any of these plugins. I haven’t even tried out any of them.