“Templates built with Variable modes now work seamlessly when published to Buzz. This gives your marketing teams more flexibility to toggle between your brand modes like colors, campaigns, markets, and more — all while staying on brand. When they open a template published with variables, they’ll see a new Variable switcher in the menu to easily change modes.”
With variables now supporting extended collections, Luis Ouriach put together structure recommendations for multi-brand systems.
Also fun to see how Figma uses extended collection for its own multi-brand system.
More Variable modes for people on Pro and Org plans. Instead of 4 modes, Pro plans now offer 10 and Org plans 20.
Molly shares examples of when to reach for “inverse” color tokens and why to avoid just going with “white”.
Mr. Biscuit explains the process of building a parametric button in Figma using the Variable Visualizer plugin.
“If a variable or style name gets cut off in the picker, you can now hover over it to see the full name.”
The new Variables modal got search and filter capabilities and now opens edge-to-edge for better visibility.
Socrates vibe-coded a plugin that parses Tailwind CSS variables from tweakcn and imports them into Figma. No hassle, no aliasing — just variables named aligned with code.
The new plugin automatically turns your entire Tailwind token set into native Figma variables and styles.
Molly shares a tip from Brad Frost’s new course on reusing “core tokens” across multiple brands.
In her blog post, Alice Packard explores innovative applications of Figma variables beyond traditional light and dark modes. She outlines 11 use cases — including validation styling, asset availability, breakpoints, brand themes, seasonal promotions, subscription levels, loyalty statuses, authentication states, interface density, contrast settings, and levels of fidelity — demonstrating how variables can enhance design systems by enabling dynamic UI adjustments and improving collaboration between designers and developers.
Advanced search and rename features for variables.
This one is a big “finally” for me! BRB, I have some library cleanup to do.
Turn complex variable relationships into an intuitive visual map to see and manage all your variables on one infinite canvas. Watch the demo video.
Ridd shows an advanced way of using variables to simplify prototyping and save a bunch of screens.
Luis Ouriach built a plugin for copying or exporting your Figma variables into CSS variables format.
A new plugin for variable management is currently in free beta. “Effortlessly visualize, organize, and optimize your variables and nodes with various features designed to supercharge your workflow.” See the in-depth feature list by the author.
Dev Mode users can now see variables used in gradients. Binding variables to gradients was also added to the plugin API so plugin developers can offer variables support out-of-the-box.
Dev Mode now suggests variables when the value matches a style, color, or size, even if it wasn’t specified in the design. The new color picker also moved in this direction, and now I want this principle to be applied whenever my values overlap with a style or variable. It should be easier both for designers and developers to use the right primitives.
Selecting a variable in Dev Mode now opens a pop-up panel that includes values, properties, aliases, collection information, and more. There is also a new view for all the variable collections used in the file. Watch a demo of all the new features.
Component properties can now be bound to variables, unlocking the ability to use translation strings in props. Learn how to bind them together in this video by Chad Bergman or this thread by Jacob Miller.