A solid roundup of the design systems resources from one of the most respected conferences.

A new video in the Introduction to design systems course by Figma explains design tokens.

Designer Advocate Ana Boyer shares some common questions, answers, and resources that she came across when learning about design systems, tokens, and variables.

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.”

Great article getting into the nitty gritty details of tokens — why the design community had to invent them, where the influence came from, what problem they solved, how they were adopted by the design tools, and why all of that is happening now. “Design tokens are the first time in a lot of years that designers get to step up in the abstraction tower, and think in terms of meaning and purpose rather than concrete hard-coded values. This is a big cultural shift — but an inevitable one.”

In this video, Sam walks through the features in the Tokens Studio plugin for Figma that allow the creation of variables that are synced to design tokens.

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.

Carly Ayres from Figma sat down with the people working across design systems tooling both inside and outside Figma to understand what the rise of tokens and features like variables mean for the future of design systems.

Intuit is the parent company for products such as Quickbooks, TurboTax, Mint, Mailchimp, and Credit Karma. Intuit Design System (IDS) is used as a foundational system that other multidimensional design systems are built on top of. Nate Baldwin wrote about creating a design token taxonomy for it: “Token names are how design tokens are referenced and identified by consumers. But at the core, a “name” is more of an ordered representation of a catalog system and API. This catalog system and API is also known as a token taxonomy. Building a clear taxonomy assisted us in appropriately and consistently classifying tokens, as well as providing a scalable and predictable naming convention for consumers.”

Continuing with taxonomy, check out this discussion about naming tokens for a toggle switch UI element. Don’t miss the insight from Ryhan on how Figma approached this in their UI2 design system.

Good thread by W3C’s Design Tokens Community Group on Figma variables, and how they differ from the spec. Great to see that Figma is actively collaborating with the community group on adding modes to the specification, and already built sample plugins for importing and exporting DTCG-compliant JSON files. (BTW, if you ever wondered what the variables icon was based on — now you know.)

“159 variables across 13 modes, totaling 1,843 values” — cheers to the Figma API!

Cool to see how Atlassian has already rolled out the variables support to their massive Components and Design Tokens libraries.

I was wondering what variables mean for Tokens Studio. Turns out the new version 1.37 already supports them, and the founder is very excited: “…this removes the need for the plugin to do all the heavy lifting itself. Applying design tokens should not be a plugin's job, and I'm looking forward to Figma supporting even more token types and values!” Jan also answers some questions in this short video.

A starting point in help articles about variables: “Variables in Figma store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.”

Speaking of help articles, in Figma Beta Features you can see that additional variable types (images and typography), properties (strokes, effects, opacity), and extended collections (Enterprise-only) are coming later this year.

An interactive playground designed to help you get started with variables. These playgrounds are the best step-by-step guides to new Figma features.

An in-depth session by Designer Advocate Luis Ouriach and Design Systems PM Jacob Miller on how you can level up your design system in Figma for better scalability, theming, and more using variables.