SXL Studio
Tokens

Other

Типы токенов группы Other: Grid, Boolean, String (text), Template, Composition, Custom — выверенные формы значений, ключи и сценарии применения.

Overview

$typeЭкспортируется какЗначение одной строкой
gridGrid-стильОдин объект grid или массив grid'ов
booleanПеременная (BOOLEAN)true / false (строковые литералы принимаются)
textПеременная (STRING)Любая строка
templateВнутренний (apply)Style-пресет (объект) или template-файл
compositionВнутренний (apply)Определение компонента (см. Composition)
customВнутренний (или вывод)Любое JSON-значение

Grid

Layout-сетки фрейма. Экспортируются как grid-стиль. Один объект или массив определений сетки.

КлючЗначения
patterncolumns, rows, grid
countЧисло (для columns / rows)
sectionSizeРазмер ячейки / дорожки (число / строка)
gutterSizeGutter (число / строка)
alignmentMIN, MAX, CENTER, STRETCH
offsetСмещение (число / строка)
JSON
{
  "grid": {
    "$type": "grid",
    "desktop": {
      "$value": { "pattern": "columns", "count": 12, "gutterSize": 24, "alignment": "STRETCH", "offset": 0 }
    },
    "editor": {
      "$value": [
        { "pattern": "columns", "count": 12, "gutterSize": 24, "alignment": "STRETCH" },
        { "pattern": "rows", "sectionSize": 8, "gutterSize": 8, "alignment": "MIN" }
      ]
    }
  }
}

Примечание Layout-сетки применяются только к фрейм-подобным нодам.

Boolean

Экспортируется как переменная BOOLEAN. Дефолтный scope ALL_SCOPES.

Принимаемое $valueРезолвится в
true / falseкак есть
"on" / "off"true / false
"yes" / "no"true / false
"1" / "0"true / false
Алиасцель
JSON
{ "flags": { "$type": "boolean", "compact": { "$value": false }, "beta": { "$value": true } } }

String (text)

Простые строковые константы. Экспортируется как переменная STRING. Дефолтный scope ALL_SCOPES.

JSON
{ "label": { "$type": "text", "cta": { "$value": "Get started" }, "currency": { "$value": "USD" } } }

Template

Style-пресет для workflow Apply Template (применяется напрямую, не экспортируется). Поддерживаются две формы.

1) DTCG-токен — $value является style-объектом:

JSON
{
  "template": {
    "$type": "template",
    "card-default": {
      "$value": {
        "direction": "column",
        "widthType": "fill",
        "padding": "16 16",
        "gap": 8,
        "borderRadius": 12,
        "background": "{color.surface.base}",
        "boxShadow": "{shadow.card}"
      }
    }
  }
}

2) Template-файл — корневой объект с name + вариантами styles:

JSON
{
  "$type": "template",
  "name": "Card",
  "styles": {
    "default": { "direction": "column", "padding": "16 16", "borderRadius": 12, "background": "{color.surface.base}" },
    "compact": { "direction": "column", "padding": "12 12", "borderRadius": 10, "background": "{color.surface.base}" }
  }
}

Ключи стилей template те же, что и в composition styles. Частые по группам:

ГруппаКлючи
Layoutdirection, justifyContent, alignItems, gap, padding, overflow
РазмерwidthType, heightType, width, height, minWidth, maxWidth, minHeight, maxHeight
Позицияposition, top, right, bottom, left, x, y, alignSelf, rotate
Фон и цветbackground, fill, color
Границыborder, borderColor, borderWidth, borderRadius, strokeAlign
ЭффектыboxShadow, effects, backgroundBlur, layerBlur, glass, opacity
ТипографикаfontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textCase, textDecoration

Точные значения каждого ключа задокументированы на Composition · Styles, где тот же контракт стилей описан полностью.

Composition

composition описывает Figma-компонент в виде JSON (structure, props, styles и не только). У него собственный полный контракт — см. Composition.

JSON
{ "$type": "composition", "name": "WButton", "structure": { "tag": "FRAME", "class": "root" }, "styles": { ".root": {} } }

Custom

custom (или чистый проектный $type, например "baseUnit") хранит любое JSON-значение и остаётся редактируемым в SXL Studio.

JSON
{ "meta": { "$type": "custom", "gridUnit": { "$value": 4 }, "config": { "$value": { "spacingScale": 1.5 } } } }

При Export Variables & Styles SXL выводит безопасную цель из формы $value: #112233 → color, числа → number, булевы → boolean, CSS-градиенты → paint. Значения, которые нельзя вывести безопасно, остаются opaque/внутренними.

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