Styles

Группа Styles содержит цвета, заливки и прозрачность. color и opacity экспортируются как переменные Figma, gradient, img и fill как стили заливки.

В окне Export to Figma цвета включаются переключателем Variables → Color, прозрачность переключателем Variables → Number, градиенты переключателем Styles → Gradient, а fill и img переключателем Styles → Fill.

#Color

Переменная Figma Color. Scopes по умолчанию: All fills, Stroke color, Effect color.

Форма Create Color: значение с образцом цвета, описание, секции Color Modifier, Scopes и Code Syntax, флаг Hide from publishing.

{ "$type": "color", "$value": "#635BFF" }

RGB-объекты принимают числовое поле a, а объекты с цветовым пространством — числовое alpha. Ссылки на токены в этих полях не поддерживаются и могут быть проигнорированы при нормализации. Используйте одиночный шаг figma.modify типа alpha или ссылку на базовый объектный токен в inline-выражении. Поддерживаются значения colorSpace: srgb, display-p3, hsl, lch, oklch; это не полная поддержка цветового стандарта DTCG. Отдельный объект { "hex": "#635BFF" } не принимается: используйте строку "#635BFF".

Не поддерживаются lab(), oklab(), hwb(), процентные каналы RGB, процентная светлота OKLCH, currentColor, CSS var() / calc() / color-mix() и другие пространства color().

#Модификаторы цвета

Модификатор выводит цвет из другого: осветляет, затемняет, меняет прозрачность или смешивает. В форме токена откройте секцию Color Modifier и нажмите Add Color Modifier: у каждого шага есть метод, цветовое пространство и величина, а результат виден в живом превью. Шаги применяются по порядку.

Секция Scopes: All Scopes, All Fills, Frame Fill, Shape Fill, Text Fill, Stroke Color, Effect Color.

Шаг модификатора: метод Lighten, пространство OKLCH, величина.

В JSON модификаторы записываются в $extensions.figma.modify:

{
  "$type": "color",
  "$value": "{color.brand.primary}",
  "$extensions": {
    "figma.modify": [
      { "type": "lighten", "value": 0.12, "space": "oklch" },
      { "type": "alpha", "value": 0.6 }
    ]
  }
}

Пространство p3 в модификаторах не поддерживается; при этом литеральный цвет в записи color(display-p3 …) принимается.

#Цвет с переменной прозрачности

Ссылку на прозрачность можно записать прямо в $value цветового токена; figma.modify необязателен. Export пробует сохранить ссылку на исходный цвет, если она задана, и ссылку на прозрачность в ячейках Figma. Существующий одиночный модификатор alpha использует тот же путь экспорта. Ссылка на цвет с литеральной alpha сохраняет ссылку на цвет; литеральный цвет с литеральной alpha остаётся обычным RGBA.

{ "$type": "color", "$value": "rgba({color.brand.primary}, {opacity.overlay})" }

Поддерживаются позиции alpha в прежней сокращённой записи цвета (через запятую, пробел или /), rgb / rgba, hsl / hsla, lch, oklch и color(srgb …) / color(display-p3 …):

{ "$type": "color", "$value": "rgb(0 0 0 / {opacity.overlay})" }

Например, rgba(0, 0, 0, {opacity.overlay}), hsl(210 50% 40% / {opacity.overlay}), oklch(0.7 0.1 30 / {opacity.overlay}) и color(display-p3 0.2 0.3 0.4 / {opacity.overlay}) принимают ссылку на прозрачность без расширения. Это не добавляет ссылки в отдельных каналах цвета или CSS var() / calc() / color-mix().

Один дополнительный модификатор alpha заменяет inline-прозрачность и сохраняет ссылку на исходный цвет. Другие модификаторы и цепочки из нескольких шагов по-прежнему применяются по порядку и экспортируются вычисленным цветом. Alpha заменяет прозрачность исходного цвета, а не умножается на неё.

Для нативной ссылки на цвет с отдельной прозрачностью базовая переменная должна быть полностью непрозрачной. Если исходный цвет уже содержит прозрачность, проверенная версия Figma блокирует её переопределение и использует alpha базового цвета. Для рабочей пары ссылок используйте базовый цвет с непрозрачностью 100% и отдельный токен прозрачности. Выражения с литеральным цветом могут заменять собственную alpha без этого ограничения.

Если база непрозрачна не полностью или её alpha нельзя проверить, Export записывает вычисленный цвет и предупреждает о недоступности связей цвета и прозрачности. Существующая составная ячейка сохраняется с предупреждением, если нельзя подтвердить, что это неизменённая запись плагина. Если позднее сделать связанный базовый цвет полупрозрачным в Figma, отдельная прозрачность может перестать учитываться сразу; повторите экспорт, чтобы проверить ячейку по токену.

Доступность нативных ячеек зависит от Plugin API Figma в вашей сессии. Если Figma отклоняет запись, например с сообщением «Composed color variable values are not supported», плагин экспортирует обычный цвет с уже применённой прозрачностью, как и в предыдущих версиях, так что переменная выглядит правильно, но не ссылается на исходный цвет и переменную прозрачности. В отчёте экспорта появляется одна сводная строка: сколько таких переменных, причина и список с подсказкой для каждой, например testColor ("base" @ the variable "alpha"). Чтобы получить ссылки, откройте переменную в панели Variables и выберите цвет и переменную прозрачности вручную. Заданную вручную ячейку плагин сохраняет при следующих экспортах, в том числе у обычного цветового токена без модификаторов, а если токен разойдётся с ней, предупредит. Как только Figma откроет запись, тот же JSON начнёт экспортироваться со ссылками без изменений.

Ячейка прозрачности в Figma хранит проценты, поэтому ссылайтесь на токен типа opacity: он экспортируется как 65 для значения 0.65. Если сослаться на обычный number со значением от 0 до 1, Figma прочитала бы его как 0.65%. В этом случае плагин оставляет ссылку на цвет, считает прозрачность литералом и выводит предупреждение, как сделать переменную привязываемой.

Чтобы переменная предлагалась в ячейке прозрачности цвета, у неё должен быть scope Color Opacity. Новая переменная получает все scopes, а если вы ограничиваете их через figma.scopes, добавьте значение COLOR_OPACITY (в форме токена это пункт Color Opacity).

{
  "$type": "color",
  "$value": "{color.brand.primary}",
  "$extensions": { "figma.modify": [{ "type": "alpha", "value": "{opacity.overlay}" }] }
}

#Gradient

Стиль заливки с градиентом. Пишите CSS-градиент, ссылку или объект.

Поддерживаются linear-gradient с углом (135deg, 0.25turn) или направлением (to right), radial-gradient с формой, размером и позицией (circle 60% at 25% 75%), conic-gradient с началом и центром (from 90deg at 50% 50%), а также angular-gradient и diamond-gradient в терминах Figma. Повторяющиеся градиенты repeating-* раскладываются на стопы по всему боксу: цикл в процентах (#000 0%, #fff 25%) повторяется ровно, а цикл, который не делит бокс нацело, обрезается у края с предупреждением. Позиции стопов принимаются в процентах, долях 0..1 и пикселях (пиксели масштабируются по самой длинной длине), двойные позиции #000 0% 50% дают резкую границу. Цвета стопов могут быть ссылками на цветовые токены: тогда в стиле Figma они будут привязаны к переменным. Угол и позиции стопов тоже могут быть ссылками ("{gradient.angle}deg", "{stop.mid}%"), но Figma не умеет привязывать их к переменным, поэтому при экспорте подставляется текущее значение и в отчёт попадает предупреждение.

{
  "$type": "gradient",
  "$value": {
    "type": "linear",
    "angle": 135,
    "stops": [
      { "position": 0, "color": "{color.brand.primary}" },
      { "position": 1, "color": "#A78BFA" }
    ]
  }
}

#Image

Стиль заливки с изображением.

scaleMode: FILL, FIT, CROP, TILE. Изображение загружается по адресу в момент экспорта, поэтому адрес должен быть доступен с вашего компьютера.

{ "$type": "img", "$value": { "url": "https://…/cover.png", "scaleMode": "FILL" } }

#Fill

Самый гибкий тип заливки: один слой или стопка слоёв. В стиле Figma первый слой массива оказывается верхним.

В форме Create Fill слои добавляются кнопкой Add layer, у каждого есть прозрачность, режим наложения и переключатель видимости; у изображений и видео можно выбрать ассет из Database и режим масштабирования; порядок меняется перетаскиванием.

{
  "$type": "fill",
  "$value": [
    { "type": "image", "url": "https://…/photo.jpg", "scaleMode": "FILL", "opacity": 0.7 },
    { "type": "solid", "color": "#00000029" }
  ]
}

#Opacity

Переменная Figma Number со scope Opacity.

0.6 и "60%" означают одно и то же, выбирайте запись, которая читается лучше. Плагин сам приводит значение к форме, которую ожидает Figma для переменной и для слоя. В редакторе запятая в числе заменяется точкой.

{ "$type": "opacity", "$value": 0.6 }

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

• Типы токенов
• JSON-формат токенов
• Scopes и Code Syntax
• Dimension, Number, Sizing, Spacing
• Shadow, Blur, Glass, Effects