Effects

Каждый тип этой группы экспортируется в стиль эффектов Figma и может применяться к слоям кнопкой Apply Tokens.

В окне Export to Figma за них отвечают переключатели Styles → Shadow, Blur (оба вида размытия), Glass и Effects.

#Shadow

Одна тень или массив теней. В стиле Figma первый элемент массива оказывается верхним слоем.

Ссылки в color, offsetX, offsetY, blur и spread становятся привязками переменных внутри стиля. Тень можно записать и одной строкой в стиле CSS: "0 2px 8px #0003".

{
  "$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": "{color.shadow.strong}" }
  ]
}

Используйте ключи offsetX и offsetY: короткие x и y понимает только Apply к слою, а при экспорте стиля они читаются как ноль.

#Backdrop Blur и Blur

Размытие фона за слоем и размытие самого слоя. Принимают число, строку с единицей или объект.

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

{ "$type": "blur", "$value": { "radius": 4 } }

Объект поддерживает прогрессивное размытие теми же ключами, что и слой в effects: "blurType": "progressive", startRadius, startOffset, endOffset, а также "visible": false. Ссылка в радиусе становится привязкой переменной. Форма редактирования размытия показывает радиус, прогрессивное размытие и видимость; простое значение сохраняется строкой, как раньше.

#Glass

Эффект стекла. Все ключи необязательны, у каждого есть значение по умолчанию.

{
  "$type": "glass",
  "$value": { "radius": 12, "depth": 8, "refraction": 0.2, "lightAngle": 135, "lightIntensity": 0.6 }
}

Форма Create Glass содержит поля Light Intensity, Light Angle, Refraction, Depth, Dispersion и Frost Radius. При Apply к слою стекло добавляется или обновляется, остальные эффекты слоя сохраняются.

#Effects

Массив слоёв разных видов в одном стиле. Первый элемент массива становится верхним слоем.

Смещения прогрессивного размытия задаются в долях от 0 до 1 любым из способов: { "x": 0, "y": 1 }, [0, 1] или "0 1". Константы Figma в верхнем регистре, например DROP_SHADOW, тоже принимаются. Неизвестный вид слоя останавливает экспорт стиля с ошибкой.

Переменные привязываются только к полям теней и к радиусу размытия. Ссылки в слоях шума, текстуры, стекла, а также стартовый радиус прогрессивного размытия при экспорте заменяются значениями, о чём плагин предупредит в результате экспорта с указанием токена, слоя и поля. Параметры шейдера передаются как есть.

{
  "$type": "effects",
  "$value": [
    { "type": "backgroundBlur", "radius": 24, "blurType": "progressive", "startRadius": 0, "startOffset": { "x": 0, "y": 0 }, "endOffset": { "x": 0, "y": 1 } },
    { "type": "noise", "noiseType": "duotone", "color": "#000000", "secondaryColor": "#ffffff", "noiseSize": 2, "density": 0.4 },
    { "type": "texture", "noiseSize": 1, "radius": 2, "clipToShape": true }
  ]
}

{
  "$type": "effects",
  "$value": [
    { "type": "dropShadow", "offsetX": 0, "offsetY": 2, "blur": 8, "spread": 0, "color": "{color.shadow.soft}" },
    { "type": "backgroundBlur", "radius": 12 }
  ]
}

Форма Create Effects собирает слои списком: у каждого выбирается тип, для размытия есть флажок Progressive blur с полями Start radius и смещений, для шума поля Noise type, Color, Secondary color, Noise size, Density и Opacity, для шейдера поля Shader id и Properties.

При импорте из Figma стили эффектов возвращаются в такие же слои: стиль из одних теней становится токеном shadow, стиль из разных видов эффектов токеном effects.

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

{
  "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 } } }
}

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

• Типы токенов
• JSON-формат токенов
• Color, Gradient, Image, Fill, Opacity