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 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!

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.

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.

Zigma connects your design system to the production code, directly syncing design variables from Figma into your GitHub projects. Made by the NextUI team.

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

Loren Baxter shares at Sneak Peek how to use Figma variables to design a dynamically colored UI for light and dark modes.

A big update to the Tokens Studio plugin introduces W3C DTCG format support, new variables exporting experience, using variables inside styles, typography tokens, and more.

The Styles Organizer plugin now supports all types of styles and variables, so it got a new name. This is one of my most used plugins for managing a design system and maintaining style consistency inside Figma files.

An incredible plugin made by Chen Chen that helps manage and synchronize variable changes. It works as a Git client for variables, letting you track changes, save and restore versions, generate a changelog, export variables to CSS, or sync to GitHub. I bet this plugin will soon become a staple of all design system teams.

A new version of the Style Setuper plugin that makes setting up text and color styles a breeze now creates text styles using type variables, so changing your font properties is very easy.

A widget that makes all your local variables and styles visible. You can narrow down the list to a specific collection or type.

Luis shows where styles and variables can be used in the Figma UI.

Luis on the power of efficient aliasing when building typographic styles from primitives.

Double Glitch made a new tutorial on creating a real working parallax effect in Figma. Don’t miss the Community file as well! 

Jacob Miller shares two variables tips to avoid the most common problems: 1) ​“Never create a mode that shouldn’t be set at the page level” (read more about inheriting a context), and 2) ​“Never publish a variable that users shouldn’t consume” (see why component-scoped variables can 10x the number of variables you ship). Don’t miss discussions in replies.