Introducing Styles to Variables

This was probably one of the features that the designers were waiting for the most, and it's now available for everyone to try (in beta). Variables are obviously another name for design tokens — and maybe a less confusing one, more closely related to the engineering term "variable."

Now comes the question about the usage of variables: are they intended to be used in addition to styles? In replacement? A mix of both? From what I understood from the talk of Luis Ouriach and Jacob Miller, variables are not intended to replace local styles but instead bring dynamic values to them by being bonded together, making styles a sort of receptacle of variables.

That said, creating variables that match all color styles created by you and your team in Figma could take a couple of minutes... to a few hours if you have multiple modes, products, and/or brands.

A Figma plugin to the rescue

In parallel with the Variables feature launch, the Figma Plugin API was updated to provide methods to interact with variables.

After playing with this feature on my personal website Figma file for a few minutes the day after the conference, I immediately thought that a plugin would allow me to go way faster in adopting this new feature — and that I may not be the only one who might need it.

This was my first time creating a Figma plugin and my first real experience with TypeScript. I know this kind of utility tool often comes with a lot of possibilities and questions, and you might end up shipping it in weeks instead of days — or not shipping it at all. So, I told myself to only spend an afternoon on it, submit it, and not touch it before it gets approved.

I managed to get a first version working in a few hours the day after the Config, with a UI that displays all the color styles that can be converted and a simple button — no real error management or fancy features. That was the initial version of the plugin.

I remember having a call with Luc Chaissac at the end of that day. I was so excited to show him what I built! I quickly created a video to share on Twitter, and I didn't touch it for three days — as I promised myself, I wanted to enjoy my trip to Lisbon to see my best friend Hassan this weekend.

It gained some traction on Twitter and got approved by the Figma team on Monday. I was so happy to see something that I built myself in a few hours that helped so many people. Being able to give back to the community is really rewarding.

In the following days, I added support for transparent modes, automated creation of modes, and some error management. It was my first time having to handle a changelog, great feeling!

Have fun!

The Styles to Variables plugin allows you to automatically convert your local styles into variables. You can use it for free on Figma Community. It is now only compatible with colors (both solid and transparent, not gradients). It is capable of creating modes automatically based on the first level of grouping in your local styles.

Edit August 8, 2023: the plugin is now capable of binding styles back to variables once created, compatible with dark mode, and compatible with Pro, Org, and Enterprise limits on the number of modes available.

What's next?

Well, as the plugin is compatible with the only variable type that can match local styles (Number, Boolean, and String aren't for now), I'll spend more time on handling errors, improving performance, and preparing for the next update from Figma on Variables. I can’t wait to see how they will handle Text and Effect Styles.