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

As always, Double Glitch is pushing the limits of Figma prototypes — this time by rendering a rectangular cuboid in 3D using variables and advanced prototyping. See his demo on Twitter and thoughts on the intricacies of this project.

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.

Designer Advocate Mal shares a few handy shortcuts that are worth memorizing — quick actions search, hide the layers panel, insert components, and zoom to selection.

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.

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.

Figma, but for architects: ​“Arcol is a design and documentation tool that helps AEC teams create better buildings, faster.” Backed by Dylan Field as one of the investors. (Hat tip to Jon Moore.)

Library with all colors from Radix Colors, an open-source color system for designing beautiful, accessible websites and apps. Also made by Jan using variables and light/​dark modes.

Jan Toman made an unofficial Figma library of variables and styles that use the default Tailwind CSS configuration.

Zander is showing how to quickly create a responsive card grid.

Molly Hellmuth shares five updates you can make with the new min/​max sizing and auto layout wrap that will make a big difference in your designs. Tip #5 on having text grow in both directions is my favorite!

Vijay is building a game using variables with new advanced prototyping features and explains how it works along the way.

Double Glitch made the Space Invaders game and turned Figma into a game engine.

Anthony DiSpezio shares a community file and a quick tutorial for creating a cute blooming flower effect.

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.

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.

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.

Great summary of Brian Chesky’s conversation with Dylan Field on approaching everything at Airbnb through a design lens.