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.
A few small improvements to variables, the biggest being the ability to copy and paste (but not move) variables across collections and show their values on hover. Other updates improve the authoring experience by adding new variables under selection, tabbing through fields, and resizing columns. See a video demo from Chad Bergman or read the release notes.
These improvements are very welcome, but after a year of using variables, I still rely on a mix of random plugins for most organizational tasks. My not-so-short wishlist for Config 2025: moving variables between collections and libraries, seeing where they’re used, replacing one variable with another, detecting unused variables, reviewing deleted variables still in use, and suggesting variables based on the value. Alright, 2026 might be a better target.
A fully redesigned eyedropper for UI3 now supports color variables and styles! Rotate between color formats with the Tab key — previously, that could have been changed only in the color panel. Switch between picking the raw color value or a variable/style with a Shift key or creating and applying a new color variable/style by using the shortcut Command-Shift. See an in-depth demo from Ana.
This update is near and dear to my heart, as I talked about color formats and working around a lack of support for styles in an eyedropper back in 2023 at Config. Love that both features are now so straightforward to use!
Molly points to an unobvious benefit of using variables instead of styles for colors — de-scoping, or setting groups of colors to only appear as fill/stroke options for certain types of objects.
Luis Ouriach: “If you’re working in a team with either multiple brands, multiple platforms, multiple densities, or perhaps all of the above you may be stuck trying to figure out how to structure your system/s in Figma. Here are some loose thoughts on how I’d go about approaching the problem.”