SXL Studio
Tokens

Effects

Типы токенов группы Effects: Shadow, Backdrop Blur, Blur, Glass, Effects — выверенные JSON-формы, ключи слоёв и production-примеры.

Overview

Каждый тип этой группы экспортируется как effect-стиль Figma.

$typeЗначение одной строкой
shadowОдин объект тени или массив слоёв-теней
backdrop-blurРадиус размытия (число/единица) или { "blur": … }
blurРадиус размытия (число/единица) или { "blur": … }
glassОбъект glass (свет, преломление, глубина, …)
effectsСмешанный массив слоёв shadow + blur

Shadow

Один объект тени или массив слоёв (каждый слой — одна тень).

Ключи слоя shadow:

КлючЗначения
typedropShadow, innerShadow (Figma DROP_SHADOW / INNER_SHADOW тоже принимаются)
colorСтрока цвета или алиас
offsetXЧисло / строка с единицей (алиас x)
offsetYЧисло / строка с единицей (алиас y)
blurЧисло / строка с единицей
spreadЧисло / строка с единицей
JSON
{
  "$type": "shadow",
  "$value": [
    { "type": "dropShadow", "offsetX": 0, "offsetY": 1, "blur": 2, "spread": 0, "color": "#0000001F" },
    { "type": "dropShadow", "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "#00000029" }
  ]
}

Backdrop Blur

Размытие за слоем. Принимает число, строку с единицей или { "blur": … }.

JSON
{ "$type": "backdrop-blur", "$value": "12px" }
JSON
{ "$type": "backdrop-blur", "$value": { "blur": 12 } }

Blur

Размытие слоя. Те же формы, что и backdrop blur.

JSON
{ "$type": "blur", "$value": "4px" }

Glass

Объект эффекта glass / liquid-glass. Все ключи опциональны.

КлючТип
visibleboolean
radiusчисло / строка
depthчисло / строка
refractionчисло / строка
dispersionчисло / строка
lightAngleчисло / строка
lightIntensityчисло / строка
JSON
{
  "$type": "glass",
  "$value": { "radius": 12, "depth": 8, "refraction": 0.2, "lightAngle": 135, "lightIntensity": 0.6 }
}

Effects (комбинированный)

Смешанный массив, который может содержать и shadow-, и blur-слои в одном effect-стиле.

Значения type слоя: dropShadow, innerShadow, layerBlur, backgroundBlur (Figma DROP_SHADOW / INNER_SHADOW / LAYER_BLUR / BACKGROUND_BLUR тоже принимаются).

Blur-слои используют radius; shadow-слои — offsetX / offsetY / blur / spread / color.

JSON
{
  "$type": "effects",
  "$value": [
    { "type": "dropShadow", "offsetX": 0, "offsetY": 2, "blur": 8, "spread": 0, "color": "#00000033" },
    { "type": "backgroundBlur", "radius": 12 }
  ]
}

Полный пример

JSON
{
  "shadow": {
    "$type": "shadow",
    "sm": { "$value": [{ "type": "dropShadow", "offsetX": 0, "offsetY": 1, "blur": 2, "color": "#0000001F" }] },
    "lg": {
      "$value": [
        { "type": "dropShadow", "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "#00000029" }
      ]
    }
  },
  "blur": { "$type": "blur", "card": { "$value": "8px" } },
  "glass": { "$type": "glass", "panel": { "$value": { "radius": 12, "depth": 8, "refraction": 0.2 } } }
}

Связанные страницы