SXL Studio
Tokens

Dimension

Типы токенов группы Dimension: Dimension, Number, Sizing, Spacing. Единицы, проценты и rem, математика, scopes по умолчанию и как эти токены применяются к слоям.

Группа Dimension содержит числовые шкалы для отступов и размеров. Все четыре типа экспортируются как переменные Figma Number и отличаются только scope по умолчанию.

$typeScope по умолчаниюДля чего
dimensionВсе scopesУниверсальные длины
numberВсе scopesБезразмерные числа: множители, коэффициенты
spacingGapОтступы и паддинги
sizingWidth and heightРазмеры элементов

В окне Export to Figma за них отвечает переключатель Variables → Number.

Форма Create Dimension: значение с подсказкой единиц, описание, Scopes и Code Syntax.

Формы значения

ФормаПример
Число16, 1.5, -2
Строка с единицей"16px", "1.5rem", "2em", "50%"
Ссылка"{spacing.md}"
Математика со ссылками"{spacing.sm} * 2", "round({size.base} / 3, 2)"
Объект DTCG{ "value": 24, "unit": "px" }

Единицы rem и em пересчитываются в пиксели через базовый размер remBase из config.json, по умолчанию 16. Проценты для этих типов тоже считаются от remBase: "50%" при базе 16 даст 8. Если нужно точное число, указывайте px.

В математике доступны +, -, *, /, скобки и функции round, floor, ceil, trunc, min, max, clamp. В редакторе запятая в числе автоматически заменяется точкой.

Dimension

Универсальная длина, когда значение не относится именно к отступам или размерам.

JSON
{ "$type": "dimension", "$value": "16px" }

Number

Безразмерные числа: множители, счётчики, коэффициенты, множители line-height.

JSON
{ "$type": "number", "$value": 8 }
JSON
{ "spacing": { "$type": "number", "base": { "$value": 4 }, "scale": { "$value": "{spacing.base} * 1.5" } } }

Spacing

Отступы, паддинги и промежутки. Scope Gap скрывает такие переменные из полей ширины и высоты в Figma.

JSON
{
  "spacing": {
    "$type": "spacing",
    "xs": { "$value": "4px" },
    "sm": { "$value": "8px" },
    "md": { "$value": "{spacing.sm} * 2" }
  }
}

Sizing

Размеры компонентов и элементов. Scope Width and height.

JSON
{
  "sizing": {
    "$type": "sizing",
    "control-sm": { "$value": "32px" },
    "control-md": { "$value": "40px" }
  }
}

Ссылки между типами

Ссылаться можно не только на свой тип: dimension принимает ссылки на dimension и number, spacing на spacing, number и dimension, sizing на sizing, number и dimension. Ссылка на токен другой природы, например на цвет, даст ошибку валидации в редакторе.

Как применяются к слоям

Кнопка Apply Tokens привязывает переменные к свойствам слоя по имени токена: ширина и высота, gap, паддинги, радиус скругления, толщина обводки. Какое свойство получит токен, определяет его имя и тип: sizing идёт в размеры, spacing в отступы и gap, borderRadius в скругления. Подробнее о привязках: Apply Tokens.

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

JSON
{
  "spacing": {
    "$type": "spacing",
    "base": { "$value": "4px" },
    "sm": { "$value": "{spacing.base} * 2" },
    "md": { "$value": "{spacing.base} * 4" }
  },
  "sizing": {
    "$type": "sizing",
    "icon": { "$value": "20px" },
    "control": { "$value": "40px" }
  },
  "ratio": {
    "$type": "number",
    "golden": { "$value": 1.618 }
  }
}

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