Типы токенов

SXL Studio поддерживает 39 типов токенов. Тип задаётся полем $type; при экспорте токен становится переменной Figma, стилем Figma или остаётся внутренним: такие токены участвуют в Apply, генерации композиций и коде, но сами в Figma не экспортируются.

Выбирайте тип по тому, что хотите получить в Figma: переиспользуемую переменную для цветов, размеров, строк и флагов, общий стиль для градиентов, теней, типографики и сеток, или внутренний контракт для рамок, переходов, композиций и произвольных данных.

#Как создать токен

В визуальном редакторе файла над списком токенов есть панель типов: Color, Gradient, Images, Fill, Opacity, Dimension и кнопка + со всеми остальными типами. Меню + сгруппировано в семь разделов и имеет поиск по типу.

Меню Add token: группы Styles, Dimension, Borders и начало Effects.

Группы Effects и Typography.

Группы Animation и Other.

Каждый тип открывает свою форму: имя, значение с подсказкой формата, описание, а для переменных ещё scopes, code syntax и флаг Hide from publishing. Подробности по каждой группе на её странице.

#Цели экспорта

#Какой тумблер экспорта отвечает за тип

В окне Export to Figma типы включаются группами. Если тип не экспортируется, проверьте соответствующий переключатель.

#Типы по группам

Семь групп меню Add token. В каждой строке минимальный пример $value.

Styles

Dimension

Borders

Effects

Typography

Animation

Other

Токен custom, как и любой незнакомый $type, остаётся редактируемым. При экспорте плагин смотрит на форму значения: цвет в HEX становится переменной Color, число или математика переменной Number, true/false переменной Boolean, строка переменной String, а объект, похожий на типографику, тень, градиент или сетку, соответствующим стилем. Значение, которое ни на что не похоже, остаётся в JSON и в Figma не экспортируется; плагин сообщит об этом в результате экспорта.

#Примеры составных значений

Typography:

{
  "$type": "typography",
  "$value": { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 500, "lineHeight": 1.5, "letterSpacing": "0px" }
}

Shadow, несколько слоёв:

{
  "$type": "shadow",
  "$value": [
    { "offsetX": 0, "offsetY": 1, "blur": 2, "spread": 0, "color": "#0000001F" },
    { "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "#00000029" }
  ]
}

Gradient:

{ "$type": "gradient", "$value": "linear-gradient(135deg, #635BFF 0%, #A78BFA 100%)" }

Grid:

{ "$type": "grid", "$value": { "pattern": "grid", "sectionSize": 8 } }

Fill, несколько слоёв:

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

#Scopes по умолчанию

Переменные получают scope Figma по умолчанию, его можно изменить в форме токена или через figma.scopes. Типы-переменные, которых нет в таблице, получают все scopes. У boolean, duration, cubicBezier и easing scopes нет вовсе.

Подробнее: Scopes и Code Syntax.

#Наследование и алиасы типов

Группа может объявить $type один раз, все токены внутри его наследуют:

{
  "spacing": {
    "$type": "spacing",
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" }
  }
}

Старые и альтернативные имена типов приводятся к каноническим:

В рабочих файлах используйте канонические имена. Полная таблица на странице JSON-формат токенов.

#Страницы групп

• Color, Gradient, Image, Fill, Opacity
• Dimension, Number, Sizing, Spacing
• Border, Border Width, Border Radius, Stroke Style
• Типографика и текстовые токены
• Shadow, Blur, Glass, Effects
• Duration, Cubic Bezier, Easing, Transition
• String, Boolean, Grid, Template, Custom
• Composition
• Scopes и Code Syntax