Figma Adds Transparency Management Through Tokens: How It Simplifies Design Systems

On September 3, Figma released the Control opacity at scale update. Transparency can now be changed massively in the Variables window: the color remains tied to the library, and its opacity can be specified by a separate numerical variable. The news looks small, but for a mature design system it is a useful change. Transparency ceases to be a random number in a layer property and becomes a manageable token—just like color, indentation, or radius.

What exactly appeared

• You can save alias to color from the library and separately assign transparency to it;
• opacity color variable can be associated with number variable and limited to its scope for color variables;
• One variable change applies to dependent states - for example, disabled, overlay and scrim. In the documentation, Figma explains that number variables can already control opacity in color variables and layers. Values below 0 are reduced to 0%, and above 100 to 100%.

  Why this is important for the product team

  Normally neutral color and its transparent versions begin to live by separate local values: one gray for text, another for disabled, the third for scrim . When changing the base color or theme, such copies easily diverge.

  Now the scheme can be expressed explicitly: color/neutral/900 + opacity/disabled → the color of the disabled state. If the library updates the base color, the link is not broken; if the transparency rule changes, it can be fixed in a single token.

  What the update doesn't do

  This is not an automatic availability guarantee or synchronization with production CSS. Semi-transparent color looks different on different backgrounds, and the contrast depends on the final layer, not the name of the token. After the migration, you still need to check the key screens and contrast, and in the code design system - the corresponding bundle with CSS tokens.

  How to implement without chaos

  1. Collect repetitive opacity values from components: disabled, hover, pressed, overlay, scrim. Select semantic tokens like opacity/disabled and opacity/scrim instead of multiplying black-32, black-48 and similar visual copies. Link them to color variables first in a single library or feature command.
  2. Test light and dark themes, states on real background and matching tokens in the code. Practical conclusion: the update does not change the visual language by itself, but removes one frequent source of drift between components. For teams with a large library, this is a good reason to rethink opaque “magic percentages” and turn them into negotiated rules.

     Sources

     • Figma Release Notes - Control opacity at scale, September 3, 2026
     Figma Help Center - Variables, collections, and modes
  >>