Figma finally handles opacity at scale in variables

A number variable to control opacity, finally without breaking the link with the library

Figma just added a feature that looks modest on paper, but genuinely changes daily life for any team maintaining a serious design system: the ability to control opacity at scale, directly in the variables modal, without ever detaching a color from its library.

In practice, three things become possible:

• Alias a color opacity while keeping that color linked to your library, instead of having to detach it and adjust opacity by hand.
• Define a color variable opacity through a number variable, and scope these number variables specifically for use within colors.
• Update in one go the opacity used for disabled states, overlays, scrims, and all those semi-transparent layers that fill a modern interface.

Why this small detail mattered so much

If you have ever built a fairly dense Figma library, you know the problem: every opacity variation of the same color ended up becoming a full-blown color of its own, or worse, a detached layer living its own life away from the design system. A disabled button at 40% opacity, an overlay at 60%, a scrim at 80%: without a native solution, each case turned into a fixed, unsynced color that had to be manually reworked every time a brand shade changed.

With this update, opacity becomes a token in its own right, on par with color or spacing. It can be edited once, at the source, and instantly propagate everywhere it is used.

A very concrete use case: disabled states, overlays, scrims

Take a system with as few as five primary colors, each with three opacity levels to handle disabled states, highlights, and overlaid backgrounds. Without this feature, that potentially means fifteen colors to maintain separately. With a single number variable scoped for opacity, one value is enough to control transparency across the entire palette, regardless of the base color.

This is exactly the kind of detail that, on a product project with several dozen screens, saves hours of maintenance and prevents visual inconsistencies that are hard to spot with the naked eye.

{{webdesign}}

Mazette.co's take: a discreet improvement that fixes a real point of friction

At Mazette.co, Figma is our everyday working tool, whether we are building product interfaces or preparing designs that will later ship on Webflow. And on this kind of update, our view is simple: it is exactly the kind of improvement we were waiting for without necessarily asking for it out loud.

Opacity management was a fairly frustrating blind spot in Figma variables. We got by with workarounds: duplicated layers, custom colors for each state, little tricks passed from one designer to another within the team. Nothing blocking, but a real drag on the scalability of a design system, especially on projects with lots of interface states (complex forms, dashboards, rich interactive components).

What we particularly like here is the underlying logic: treating opacity as a scoped number variable, following the exact same model as color or spacing tokens. This fits a trend we have been noticing across several Figma releases: turning the design system into a genuine structured data system, where every visual property becomes a controllable parameter rather than a value fixed by hand.

For our clients, the benefit is very concrete: less time spent maintaining component libraries, less risk of inconsistency between different states of the same component, and a better ability to evolve a brand guideline without rebuilding everything. It is the kind of gain that is invisible to the end user, but that we feel directly in the speed and reliability of our deliverables.

Just one caveat: this feature arrives a bit late compared to needs that have existed in product teams for a long time. But better late than never, and the implementation seems thoughtful enough to fit naturally into existing workflows without disrupting everything.

If you are working on a design system that is starting to show its limits, or preparing to move your mockups into a live site, now is a good time to take stock. Check out our method or contact us to talk it through.