Styles
Типы токенов группы Styles: Color, Gradient, Image, Fill, Opacity — принимаемые формы значений, ключи, модификаторы и поведение экспорта с примерами.
Overview
Группа Styles содержит paint-подобные типы и прозрачность. color и opacity экспортируются как переменные Figma; gradient, img и fill — как paint-стили.
$type | Экспортируется как | Значение одной строкой |
|---|---|---|
color | Переменная (COLOR) | Строка hex / rgb / hsl / color(), или { r,g,b,a } |
gradient | Paint-стиль | CSS-градиент, алиас или объект градиента |
img | Paint-стиль | URL изображения или объект изображения |
fill | Paint-стиль | Один paint или массив paint-слоёв |
opacity | Переменная (FLOAT) | 0–1, строка % или алиас |
Color
Экспортируется как переменная COLOR. Дефолтные scopes: ALL_FILLS, STROKE_COLOR, EFFECT_COLOR.
Принимаемое $value | Пример |
|---|---|
| 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)" |
Объект (каналы 0–1) | { "r": 0.39, "g": 0.36, "b": 1, "a": 1 } |
| Алиас | "{color.brand.primary}" |
{ "$type": "color", "$value": "#635BFF" }
Модификаторы цвета — вывести цвет из другого через $extensions.figma.modify:
| Поле | Значения |
|---|---|
type | lighten, darken, alpha, mix |
value | Величина 0–1 |
space | srgb, hsl, lch, oklch, p3 (по умолчанию oklch) |
color | Целевой цвет — обязателен для mix |
{
"$type": "color",
"$value": "{color.brand.primary}",
"$extensions": {
"figma.modify": [
{ "type": "lighten", "value": 0.12, "space": "oklch" },
{ "type": "alpha", "value": 0.6 }
]
}
}
Gradient
Экспортируется как paint-стиль. Пишите CSS-градиент, алиас или объект градиента.
Принимаемое $value | Пример |
|---|---|
| CSS-градиент строкой | "linear-gradient(135deg, #635BFF 0%, #A78BFA 100%)" |
| Алиас | "{gradient.brand}" |
| Объект градиента | см. ключи ниже |
Поддерживаемые CSS-функции: linear-gradient, radial-gradient, angular-gradient (conic), diamond-gradient.
Ключи объекта градиента:
| Ключ | Значения |
|---|---|
type | linear, radial, angular, diamond |
angle | Число, градусы (для linear) |
stops | Массив { "position": 0–1, "color": "#…" } |
gradientTransform | Опциональная матрица трансформации Figma |
{
"$type": "gradient",
"$value": {
"type": "linear",
"angle": 135,
"stops": [
{ "position": 0, "color": "#635BFF" },
{ "position": 1, "color": "#A78BFA" }
]
}
}
Image (img)
Экспортируется как paint-стиль с image-paint.
Принимаемое $value | Пример |
|---|---|
| URL строкой | "https://…/cover.png" или "url(https://…/cover.png)" |
| Объект изображения | { "url": "https://…", "scaleMode": "FILL", "opacity": 1 } |
| Алиас | "{img.cover}" |
scaleMode: FILL, FIT, CROP, TILE.
{ "$type": "img", "$value": { "url": "https://…/cover.png", "scaleMode": "FILL" } }
Fill
fill — самый гибкий paint-тип: один paint или стек paint-слоёв (порядок снизу вверх, последний — сверху). Экспортируется как paint-стиль.
Принимаемое $value | Пример |
|---|---|
| Строка color / gradient / image | "#635BFF", "linear-gradient(…)" |
| Объект одного слоя | { "type": "solid", "color": "#635BFF" } |
| Массив слоёв | см. пример |
| Алиас | "{fill.card}" |
Ключи слоя fill:
| Ключ | Значения |
|---|---|
type | solid, gradient, image |
color | Строка цвета (для solid) |
gradient | Объект градиента (для gradient) |
url / imageUrl | URL изображения (для image) |
scaleMode | FILL, FIT, CROP, TILE (для image) |
opacity | 0–1 |
blendMode | Blend-режим Figma (напр. NORMAL, MULTIPLY) |
visible | true / false |
{
"$type": "fill",
"$value": [
{ "type": "image", "url": "https://…/photo.jpg", "scaleMode": "FILL", "opacity": 0.7 },
{ "type": "solid", "color": "#00000029" }
]
}
Opacity
Экспортируется как переменная FLOAT. Дефолтный scope: OPACITY.
Принимаемое $value | Пример |
|---|---|
Число 0–1 | 0.6 |
| Строка процентов | "60%" |
| Алиас / математика | "{opacity.disabled}", "{opacity.base} * 0.5" |
0.6 и "60%" резолвятся в одно и то же значение (0.6) — выбирайте, что читается лучше в вашей системе. Переменная всегда хранится как float 0–1.
{ "$type": "opacity", "$value": 0.6 }
{ "$type": "opacity", "$value": "60%" }