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

Joey Banks with a deep dive on applying and organizing variables in Figma: “…if there’s one thing I’ve learned about variables, it’s that nearly every team takes a slightly different approach when it comes to creating and keeping them organized in Figma. I’d love to recap the many ways I use variables within the components and libraries I make, as well as some of the techniques and decision frameworks that have helped me most, and share with you how I approach creating and keeping them all organized, too.”

Tailwind Sync is a free plugin for Figma that synchronizes variables to Tailwind code, enhancing the design-to-dev handoff with speed, consistency, and scalability.

The Foundation generates Figma spacing, color, and typography variables based on Tailwind CSS’s utilities, ensuring consistency across your design and code.