Designer Advocate Anthony DiSpezio recommends the best approach for defining variables for theming: primitive variable → semantic variable → semantic style. The core advice is to keep using styles: “Styles represent a group of properties that should be applied to a layer or part of a layer. Variables represent individual values within that style.”

(Years ago, I noticed that when Apple announces a change at WWDC it’s better to go with it even if it doesn’t make sense at the moment — they see the roadmap much further. I wonder if it’s the same case with Figma and styles. At the moment they often feel redundant, but Figma made it very clear that they’re not going anywhere — hopefully something will make it clear soon why it was worth keeping them around.)

“Demystify the synergy between Figma Variables, Figma Styles, and Tokens Studio — a trio of ways composed to develop your design token workflow.”

Luis is rethinking the relationship between variables and styles. The future typography tokens are a great example, but even today this applies to styles with more complicated color fills. TL;DR: “Create variables in a private space, feed them into styles, and publish only styles to consumers.”

Allie Paschal writes about her process of migrating the Native Mobile Design System from using color styles to variables. Pretty cool to see that she already adopted a newly released scoping for color variables. I didn’t realize that some companies may not allow external plugins in Figma, so it’s nice to see that this process is completely manual and self-sufficient.

A preview of the design lint plugin for identifying and fixing issues like missing tokens or styles.

A new plugin from the Tokens Studio: “Already have your variables set up and want to bulk apply them to your work? You can swap styles with variables or apply variables that match raw number values to elements in any file with access to your variables collections!” See also the walkthrough video.

Interested in learning how to migrate from Styles to Variables? Join Luis Ouriach, Akbar Mizra, Jacob Miller from Figma, and Jack Minogue from Ford for a look at approaches you can use to lower the friction of your rollout of variables.

Great help article if you’re still struggling with understanding the difference between variables and styles, or questioning if styles are becoming obsolete.

Great video from Chad on a conversion technique I described above. Recommend watching this video before you embark on a journey to update your color system.

A few new plugins for converting styles to variables came out last week, and I’m still trying to pick a favorite. The best part of Styles to Variables Converter is that after creating variables it updates existing styles to use them, so if you delete or detach styles objects will fall back to variables. A slightly more popular Styles to Variables plugin doesn’t seem to do this yet. I also wish these plugins let me map styles to existing variables, or at least specify a target collection.

Confused by how variables are different from styles? Design Systems Product Manager Jacob Miller explains: “Styles can contain multiple fills as well as blend modes, and that restricts their use case for design-code alignment and where we can apply them. […] Variables are a single value. They’re more atomic. This means we will be able to use color variables anywhere you see a hex code.” This is my favorite way to think about it: “One way to think of it is a style is a CSS class (a group of values), whereas a variable is like a CSS variable.”

Luis keeps digging into different ways of structuring Figma libraries and styles. In this thread, he thinks through naming conventions on styles and explores the pros and cons of more abstract and specific naming conventions.

Luis is experimenting with a different way of managing styles in Figma. He argues that bringing styles a lot closer to their usage makes it easier to understand the context.

Now it’s easier to track changes to components and styles. A new icon shows when styles or instances have changed, lets you accept changes for individual instances or layers, and even shows a before vs. after preview! See a quick demo by Jacob Miller.

Moving styles between files are now easier — now you can just cut and paste them.

I was looking for a plugin to clean up my file and convert all color values to matching color styles, and this plugin got the job done perfectly. Thanks to Dave Kover for the recommendation!

“Associates colors to styles if it finds matching or very similar ones.”

Luis shows how to create styles at rocket speed using batch renaming and the Styler plugin.

People now can be @mentioned in Community comments. FigJam is improved on an iPad (hey, maybe Figma is next?). Style picker lets you select what libraries are enabled. And a few more improvements for admins of Organizations and Teams.