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

Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.

Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.

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

This one is a more practical and hands-on guide to Figma variables, with detailed instructions on implementing, organizing, applying modes, publishing to the library, and transferring them to code.

Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.

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.

Mini-series showing how to use variables for advanced prototyping on a few example projects by the Design Pilot YouTube channel.

A new video from Lauren with a deep dive on when to use variants vs. variables with modes.

The second guide introduces the concept of ​“container queries”, which are slowly gaining adoption in CSS and will fundamentally change the way we approach responsive design. Christine compares the current approach of using media query breakpoints with container queries and investigates how to imitate them with the current Figma features.

Two new articles in the UX Collective from Christine Vallaure, who graciously shared free ​“friend links” with Figmalion readers. The first one explores a new approach to creating responsive designs with variables and modes, whereby components automatically adapt to the screen size they are placed on and only resize within the provided breakpoints. In this case, variables automate which component gets displayed and set stops at certain minimum and maximum points to stay inside your breakpoint range. I had no idea that string variables can be used to select a variant of the component 🤯

Luis shows that if your styles have multi-mode variables as their values, Swap Libraries still works for managing theme swapping in a multi-brand setup.

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 few improvements to variables: 1) in addition to scoping number variables, you can now also scope color variables, 2) select multiple variables with Shift or Cmd for the bulk edit, 3) code syntax for defining different names for multiple platforms, and 4) modes for instance sublayers. Variables are still in beta and it’s great to see how fast the team iterates on them.

“In this Study Hall, learn how to apply the use of variables in your prototypes with the assistance of variable modes and conditional logic to create a more realistic shopping cart prototype that uses real math.”

Ridd interviews Luis Ouriach about using variables for his Deep Dives podcast. ​“Luis goes deep into strategies based on team size, provides naming guidance, and even breaks down how he thinks about structuring libraries with variables in Figma. Lastly, Luis shares a behind-the-scenes of his journey as a designer advocate and even gives a unique prediction for how AI will take shape inside of Figma.”

According to Corey Lee, the copy-pasting of collections is coming soon!

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.