Styles
Styles group token types: Color, Gradient, Image, Fill, Opacity — accepted value shapes, keys, modifiers, and export behavior with examples.
Overview
The Styles group holds the paint-like and opacity token types. color and opacity export as Figma variables; gradient, img, and fill export as paint styles.
$type | Exports as | Value in one line |
|---|---|---|
color | Variable (COLOR) | Hex / rgb / hsl / color() string, or { r,g,b,a } |
gradient | Paint style | CSS gradient string, alias, or gradient object |
img | Paint style | Image URL or image object |
fill | Paint style | One paint or an array of paint layers |
opacity | Variable (FLOAT) | 0–1, a % string, or an alias |
Color
Exported as a COLOR variable. Default scopes: ALL_FILLS, STROKE_COLOR, EFFECT_COLOR.
Accepted $value | Example |
|---|---|
| Hex | "#635BFF", "#635BFF80" |
rgb() / rgba() | "rgba(99, 91, 255, 0.8)" |
hsl() / hsla() | "hsl(244, 100%, 68%)" |
color() | "color(display-p3 0.4 0.36 1)" |
Object (channels 0–1) | { "r": 0.39, "g": 0.36, "b": 1, "a": 1 } |
| Alias | "{color.brand.primary}" |
{ "$type": "color", "$value": "#635BFF" }
Color modifiers — derive a color from another with $extensions.figma.modify:
| Field | Values |
|---|---|
type | lighten, darken, alpha, mix |
value | Amount 0–1 |
space | srgb, hsl, lch, oklch, p3 (default oklch) |
color | Target color — required for mix |
{
"$type": "color",
"$value": "{color.brand.primary}",
"$extensions": {
"figma.modify": [
{ "type": "lighten", "value": 0.12, "space": "oklch" },
{ "type": "alpha", "value": 0.6 }
]
}
}
Gradient
Exported as a paint style. Write a CSS gradient string, an alias, or a gradient object.
Accepted $value | Example |
|---|---|
| CSS gradient string | "linear-gradient(135deg, #635BFF 0%, #A78BFA 100%)" |
| Alias | "{gradient.brand}" |
| Gradient object | see keys below |
Supported CSS functions: linear-gradient, radial-gradient, angular-gradient (conic), diamond-gradient.
Gradient object keys:
| Key | Values |
|---|---|
type | linear, radial, angular, diamond |
angle | Number, degrees (for linear) |
stops | Array of { "position": 0–1, "color": "#…" } |
gradientTransform | Optional Figma transform matrix |
{
"$type": "gradient",
"$value": {
"type": "linear",
"angle": 135,
"stops": [
{ "position": 0, "color": "#635BFF" },
{ "position": 1, "color": "#A78BFA" }
]
}
}
Image (img)
Exported as a paint style with an image paint.
Accepted $value | Example |
|---|---|
| URL string | "https://…/cover.png" or "url(https://…/cover.png)" |
| Image object | { "url": "https://…", "scaleMode": "FILL", "opacity": 1 } |
| Alias | "{img.cover}" |
scaleMode: FILL, FIT, CROP, TILE.
{ "$type": "img", "$value": { "url": "https://…/cover.png", "scaleMode": "FILL" } }
Fill
A fill is the most flexible paint type: a single paint, or a stack of paint layers (bottom-to-top order, last on top). Exported as a paint style.
Accepted $value | Example |
|---|---|
| Color / gradient / image string | "#635BFF", "linear-gradient(…)" |
| Single layer object | { "type": "solid", "color": "#635BFF" } |
| Array of layers | see example |
| Alias | "{fill.card}" |
Fill layer keys:
| Key | Values |
|---|---|
type | solid, gradient, image |
color | Color string (for solid) |
gradient | Gradient object (for gradient) |
url / imageUrl | Image URL (for image) |
scaleMode | FILL, FIT, CROP, TILE (for image) |
opacity | 0–1 |
blendMode | Figma blend mode (e.g. NORMAL, MULTIPLY) |
visible | true / false |
{
"$type": "fill",
"$value": [
{ "type": "image", "url": "https://…/photo.jpg", "scaleMode": "FILL", "opacity": 0.7 },
{ "type": "solid", "color": "#00000029" }
]
}
Opacity
Exported as a FLOAT variable. Default scope: OPACITY.
Accepted $value | Example |
|---|---|
Number 0–1 | 0.6 |
| Percent string | "60%" |
| Alias / math | "{opacity.disabled}", "{opacity.base} * 0.5" |
0.6 and "60%" resolve to the same value (0.6) — pick whichever reads better in your system. The variable is always stored as a 0–1 float.
{ "$type": "opacity", "$value": 0.6 }
{ "$type": "opacity", "$value": "60%" }