SXL Studio
Tokens

Dimension

Типы токенов группы Dimension: Dimension, Number, Sizing, Spacing — числовые форматы, математика, дефолтные scopes и примеры.

Overview

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

$typeЭкспортируется какДефолтный scopeТипичное применение
dimensionПеременная (FLOAT)ALL_SCOPESУниверсальные размеры
numberПеременная (FLOAT)ALL_SCOPESБезразмерные числа
spacingПеременная (FLOAT)GAPGap / padding
sizingПеременная (FLOAT)WIDTH_HEIGHTWidth / height

Общий числовой синтаксис

Все четыре типа принимают одинаковые формы значения:

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

Примечание Для токенов FLOAT (кроме opacity и duration) значение % при экспорте переменной конвертируется через remBase. Где нужно точное число — используйте явный px.

Dimension

Универсальный числовой тип — используйте, когда значение является длиной, но не относится конкретно к spacing или sizing.

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

Gap'ы, паддинги и отступы. Дефолтный scope GAP держит их вне полей ширины/высоты в Figma.

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

Sizing

Размеры компонентов и элементов. Дефолтный scope WIDTH_HEIGHT.

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

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

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 }
  }
}

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