Opacity
Refer to the Figma Guide for how to apply Opacity to an item in Figma.
Utility Modules
Opacity
Opacity tokens set the opacity (or transparency) of an item in increments of 10%.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.opacity-opacity | u-opacity(opacity) | @include u-opacity(0) |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| opacity | False | None | 0.24 KB | 1.3 KB |
Class name
Estimated computed value
.opacity-0
0.0
.opacity-10
0.1
.opacity-20
0.2
.opacity-30
0.3
.opacity-40
0.4
.opacity-50
0.5
.opacity-60
0.6
.opacity-70
0.7
.opacity-80
0.8
.opacity-90
0.9
.opacity-100
1.0