Opacity is one of the easiest parts of a design system to get wrong. Teams hard-code values on layers, duplicate the same 64% scrim three different ways, and lose the connection between what designers see in Figma and what agents or code consume later.
Figma's opacity variables fix that. Instead of treating transparency as a one-off layer property, you define semantic opacity roles your system can reuse: disabled states, muted text, hover overlays, scrims, and full opacity for primary surfaces.
Why opacity belongs in your token stack
Most mature systems already separate color, spacing, and typography into tokens. Opacity often stays informal: a designer picks 0.48 for disabled text because it looks right on one screen, then another designer uses 0.5 on the next component.
That drift compounds when agents start building UI. If opacity isn't named and structured, the model guesses. You get hover states that feel slightly off, scrims that don't match modal behavior, and disabled states that vary by surface.
Opacity variables give you the same contract color tokens do: a shared vocabulary with predictable meaning.
What to define first
Start with semantic roles, not raw percentages:
- Disabled — elements that can't be interacted with
- Muted — secondary labels, helper text, metadata
- Hover / pressed overlays — subtle interaction feedback on surfaces
- Scrim — modal and drawer backdrops
- Full — default opaque surfaces
Map each role to a primitive scale if you need one, but designers and agents should reach for the semantic name first.
Connecting Figma to code and agents
The point of structuring opacity in Figma isn't Figma alone. It's making the system legible everywhere else: CSS custom properties, component APIs, documentation, and agent instructions.
When opacity lives in variables with clear names, you can export it alongside color and spacing, reference it in component specs, and test whether agents apply the right transparency in generated UI.
That's the foundation of an AI-ready design system: not just pretty variables in Figma, but machine-readable intent your whole stack can follow.
If you want help structuring tokens for agents, the AI Ready Design System Workshop covers the full framework.