Mark Steinruck shows how to scope variables for certain components to appear unchanged in light and dark modes.

Niko shares how advanced prototyping came from a vision in June 2022 to reality at Config 2023. The team had to ship variables, multiple actions, expressions, and conditionals simultaneously to make it happen. This release is a huge achievement and the team should be celebrated for it.

Three different methods of building an interactive Tab Group with variables, presented with their pros and cons.

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

Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).

Joey Banks spent a lot of time after Config adjusting component libraries to use the new Figma features. In this issue of Baseline, he dives deep into variables and wrote an epic guide on what they are, how he is using them, and a few shortcuts to help make workflows and creation more efficient. My favorite tip on using the number variables: ​“With your cursor inside an input, tap the equal = key on your keyboard to launch the variable list quickly, or hold Shift + click. To remove a variable, click into the input and tap Backspace twice.” (Note that the = shortcut may go away in the future.)

This part of his conclusion brought back the topic of usability vs. visibility started by component properties: ​“One thing I still find to be a little challenging within this new way of building and viewing components in Figma is that so much of the previous on-canvas visual representation is now absent using variables. Previously, if there were two density sizes used or if a layer was toggled as hidden within a particular situation, that was easy to see, as we had to build it out as a visual variant. With variables, much of that information, such as sizing, booleans, and color adjustments, is all within the Variables modal and not on the canvas.”

A new plugin by Jan Toman: ​“Export variables from one file and import them to another. It’s great for migrating libraries, or when you downloaded a library from the community and you’d like to import variables to your existing design system.”

A game of jeopardy powered by Figma variables! Change all the questions and answers with variables and play a custom game with your team. Made by Elizabeth Lin.

Miggi covers the different ways that variables can be added when creating prototypes, and how you can use them to make them more dynamic and with fewer frames. We cover all of the currently available variable types: booleans, numbers, strings, colors, and even discuss how to bind string variables to interactive components.

MDS experiments with swapping variant instances between modes using boolean variables, and Johan Netzler suggests an alternative solution.

Vijay Verma with a quick video tutorial on how to create a functional loader with variables and conditions.

Realistic typing is finally possible in Figma prototypes using variables.

While Will was working on Figma-OS, Willy Wu from Figma was also building his own version with a Figma plugin to help compile small C programs using ELVM. Don’t miss a thread on his journey.

A deep dive into variables by Thalion.

Occasionally someone builds something in Figma that just melts my brain: ​“Figma-OS is the first Turing-complete 8‑bit computer built using Figma prototyping tools. Figma-OS has state-of-the-art specs with 512 bits of RAM, 16 bytes program memory, 10 Hz clock speed, and a MISC instruction set of 16 OPCODEs.” See the thread from Will DePue on how it works.

Vijay Verma won’t miss a chance to build something fun with a new Figma feature. Here, he made a fun personalized avatars constructor using different combinations of components and variables.

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

Luis shares good tips and thoughts on using, naming, and organizing color variables, as well as setting up modes for themes. Additionally, he summed up all of the above into a Variable starter kit on the Figma Community.

Find Variables plugin by Daniel Destefanis helps you find what variables are being used in your file and easily select the layers using them.

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.