SXL Studio
Tokens

Типы токенов

Полная карта всех 38 типов токенов SXL Studio: во что каждый экспортируется в Figma, форма значения, JSON-примеры, дефолтные scopes и алиасы.

Overview

SXL Studio поддерживает 38 канонических типов токенов. Каждый тип объявляется через $type (DTCG- и легаси-алиасы нормализуются автоматически) и при экспорте становится переменной Figma, стилем Figma или остаётся внутренним (используется в Apply / Generate / Code, сам по себе не экспортируется).

Цель экспортаКол-воВо что превращается
Переменная Figma17Переменная в коллекции (COLOR / FLOAT / STRING / BOOLEAN)
Стиль Figma10Локальный стиль (Paint / Effect / Text / Grid)
Внутренние / редакт.11Логика плагина или рендер; напрямую не экспортируется

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

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

ЦельТипы
Переменная — COLORcolor
Переменная — FLOATopacity, dimension, number, spacing, sizing, borderWidth, borderRadius, fontSize, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing
Переменная — STRINGfontFamily, fontWeight, text
Переменная — BOOLEANboolean
Стиль — Paintgradient, img, fill
Стиль — Effectshadow, backdrop-blur, blur, glass, effects
Стиль — Texttypography
Стиль — Gridgrid
Внутренние / редакт.border, strokeStyle, fontStyle, textCase, textDecoration, transition, duration, cubicBezier, template, composition, custom

Типы токенов по группам

Это семь групп из меню Create token. Каждая строка показывает, во что тип экспортируется, и минимальный пример $value.

Styles

$typeЭкспортируется какПример $value
colorПеременная (COLOR)"#635BFF" или { "r": 0.4, "g": 0.36, "b": 1 }
gradientСтиль Paint"linear-gradient(90deg, #635BFF, #A78BFA)"
imgСтиль Paint"url(https://…/cover.png)"
fillСтиль Paint[{ "type": "solid", "color": "#635BFF" }]
opacityПеременная (FLOAT)0.6

Dimension

$typeЭкспортируется какПример $value
dimensionПеременная (FLOAT)"16px"
numberПеременная (FLOAT)8
spacingПеременная (FLOAT)"16px"
sizingПеременная (FLOAT)"240px"

Borders

$typeЭкспортируется какПример $value
borderВнутренний{ "color": "#E7EAF1", "width": "1px", "style": "solid" }
borderWidthПеременная (FLOAT)"1px"
borderRadiusПеременная (FLOAT)"8px"
strokeStyleВнутренний{ "dashPattern": [4, 4] }

Effects

$typeЭкспортируется какПример $value
shadowСтиль Effect[{ "offsetX": 0, "offsetY": 2, "blur": 8, "color": "#00000033" }]
backdrop-blurСтиль Effect"8px"
blurСтиль Effect"4px"
glassСтиль Effect{ "blur": 12, "opacity": 0.6 }
effectsСтиль Effect[{ "type": "DROP_SHADOW", "x": 0, "y": 2, "blur": 8, "color": "#00000033" }]

Typography

$typeЭкспортируется какПример $value
typographyСтиль Text{ "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 500, "lineHeight": "24px" }
fontFamilyПеременная (STRING)"Inter"
fontWeightПеременная (STRING)500
fontStyleВнутренний"italic"
fontSizeПеременная (FLOAT)"16px"
lineHeightПеременная (FLOAT)"24px"
letterSpacingПеременная (FLOAT)"0.5px"
paragraphIndentПеременная (FLOAT)"8px"
paragraphSpacingПеременная (FLOAT)"12px"
textCaseВнутренний"uppercase"
textDecorationВнутренний"underline"

Animation

$typeЭкспортируется какПример $value
transitionВнутренний"on-hover smart-animate 200ms ease-out"
durationВнутренний"200ms"
cubicBezierВнутренний"[0.4, 0, 0.2, 1]"

Other

$typeЭкспортируется какПример $value
gridСтиль Grid{ "pattern": "grid", "sectionSize": 8 }
booleanПеременная (BOOLEAN)true
textПеременная (STRING)"Checkout"
templateВнутреннийобъект-определение template
compositionВнутреннийобъект-определение composition
customВнутренний (или вывод)любое JSON-значение

Примечание custom (или чистый проектный $type, например "baseUnit") остаётся редактируемым. При экспорте SXL выводит безопасную цель из формы $value (#112233 → color, числа → number, булевы → boolean, CSS-градиенты → paint); значения, которые нельзя вывести безопасно, остаются opaque.

Примеры композитных значений

Объектные и массивные типы стоит увидеть целиком.

Typography:

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

Shadow (массив слоёв):

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

Gradient:

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

Grid:

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

Fill (многослойный):

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

Дефолтные scopes

Простые типы-переменные получают разумный scope Figma по умолчанию (его можно переопределить через figma.scopes). Типы не из списка по умолчанию получают ALL_SCOPES.

$typeДефолтный scope
colorALL_FILLS, STROKE_COLOR, EFFECT_COLOR
sizingWIDTH_HEIGHT
spacingGAP
borderRadiusCORNER_RADIUS
borderWidthSTROKE_FLOAT
opacityOPACITY
fontFamilyFONT_FAMILY
fontWeightFONT_STYLE
fontSizeFONT_SIZE
lineHeightLINE_HEIGHT
letterSpacingLETTER_SPACING
paragraphSpacingPARAGRAPH_SPACING
paragraphIndentPARAGRAPH_INDENT
dimension, number, text, booleanALL_SCOPES

Полное поведение scope и фильтрация: Scopes & Code Syntax.

Наследование и алиасы

Группа может объявить $type один раз — каждый дочерний токен его наследует.

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

Легаси- и множественные значения $type нормализуются к каноническому ключу:

Сырой $typeКанонический
stringtext
sizesizing
spacespacing
fontSizes / fontWeights / fontStyles …fontSize / fontWeight / fontStyle
borderRadiiborderRadius
boxShadowshadow
backgroundBlur / backdropBlur / background-blurbackdrop-blur
layerBlurblur

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

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