Figma: Opacity Aliasing for Color Variables
FigmaFigma added the ability to alias opacity directly on a linked color variable inside the variables modal, without having to detach the color from its library source. Designers can now set opacity on a color variable using a number variable, with scoping specific to color use cases, making it far easier to build disabled states, overlays, and scrims that stay connected to the design system. The update closes a multi-year feature request from design-systems teams who previously had to detach variables or duplicate tokens just to vary transparency.
Key Takeaways
- Opacity can now be aliased directly on a linked color variable, so a translucent state no longer requires detaching the color from its library source.
- The update lets teams drive opacity with a dedicated number variable, effectively tokenizing transparency the same way colors and spacing are tokenized.
- It directly resolves a multi-year, high-volume feature request from design-systems teams, visible in years of Figma Forum threads asking for exactly this capability.
- Common UI states like disabled buttons, overlays, and scrims can now be built as true aliases of a base color rather than as separate hardcoded swatches.
- Because opacity aliases stay linked to the source variable, updating a brand color upstream now automatically propagates to every transparent variant built from it.
- The change reduces variable/token bloat in large design systems, since teams no longer need to duplicate a color variable purely to hold a different opacity level.
Opacity Now Works With Linked Color Variables
Figma updated its variables modal so that opacity can be applied on top of any color variable without breaking the variable's link back to the library. Previously, designers who wanted a translucent version of a brand color, for a disabled button, a modal overlay, or a hover scrim, had two unsatisfying options: detach the color from its source variable and hardcode a new value, or create a completely separate duplicate variable just to hold the transparent version. Both approaches silently drifted design systems out of sync whenever the base color changed upstream.
Alias Opacity Without Detaching
The core of the update lets a designer alias opacity on a color variable while the underlying color stays bound to its library reference. If a brand color updates centrally, every aliased, semi-transparent version built from it now updates automatically instead of requiring manual rework across every file that used the old workaround.
Number-Variable-Driven Opacity
Figma also added support for setting opacity on a color variable using a number variable, with scoping rules that specifically apply to color variable contexts. This means opacity itself can be tokenized and reused, for example, a single "disabled-opacity" number variable can drive the transparency of many different color tokens at once, rather than each opacity value being set independently per color.
Why It Matters for Design Systems
The feature targets one of the most common structural pain points in production design systems: representing state variations (disabled, overlay, scrim, hover) as opacity modifiers of a base color rather than as entirely separate hardcoded swatches. Design system maintainers can now encode these relationships directly as variables, keeping token counts lower and keeping every state visually and structurally tied to its source color. Figma frames this as a way to update opacity "at scale" since a single upstream color or opacity-variable change now propagates everywhere it is aliased, instead of requiring a file-by-file sweep.