Last updated
Was this helpful?
Last updated
Was this helpful?
Opacity Tokens define the transparency of a layer, or how opaque it appears.
Opacity Tokens define a layer's opacity. In Figma, they can be applied to any design element that supports reduced opacity.
For example, you might have a Button that changes opacity when hovered over.
You could create two Opacity tokens:
button.opacity.default with a value of 1 (fully opaque)
button.opacity.hover with a value of 0.8 (slightly transparent)
Then, apply the Opacity Tokens to the background container layer of each variation of the Button design.
An Opacity Token can define any level of transparency from fully opaque to fully transparent. The values range from:
1 (layer is fully opaque)
0 (layer is fully transparent)
Any decimal value between 0 and 1 can be used to set varying levels of transparency.
When trying to reference another Token as the Value for an Opacity Token, you will see Tokens in the dropdown list that are:
Living in Token Sets that are currently active.
In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
The same = opacity
You can apply an Opacity Token to change the transparency value of any design element and all of its children layers.
With one or more elements selected in Figma, click on the name of your chosen Opacity Token in the Plugin to apply its value instantly.
When transforming Opacity Tokens, there are specific configurations to be aware of.
For Opacity Token values entered in percentages, the SD-transforms package converts the value from % to number between 0 and 1 -> ts/opacity.
Mentioned in this doc:
None yet!
Values entered less than 1% are resolving to 1% in Figma
Ex: 0.1% will resolve to 1%
Including an Opacity Token in the value of a Color Token produces unexpected results.
We may want to avoid using Opacity Tokens in Color Token values as Figma assigns the Opacity value to layer transparency and not a color modifier.
When Exporting Color Tokens with Opacity Tokens referenced in the value as Color Variables, the Variable is not created as expected.
Likely related to issue 1822 above.
None yet
Opacity is not yet an official token type in the W3C DTCG specifications, but there is mention of a Percentage/radio type under consideration ()
Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.
→
SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -
Design in Figma -
MDN Web Docs -
Tokens Studio Plugin GitHub -
Opacity issue: some values are wrongly rounded in Figma
Referencing a (base+opacity) and adding another opacity to that, doesn't give the correct result
Using Opacity in Tokens Creates Blank Variable
💌 Visit to contribute or subscribe to updates.
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
💡 Something to share?
Once a Token has been applied, it will remain attached until you manually remove it.
However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.
For example {token.name.here}
Jump to the guide on Token Values with References by selecting the card below to learn more.
