Dimension

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

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

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

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

Единицы rem и em пересчитываются в пиксели через базовый размер remBase из config.json, по умолчанию 16. Он задаётся в окне экспорта, поле rem base: числом или ссылкой на числовой токен ({core.font.base}); рядом со ссылкой показано её значение. Такой токен сам не может зависеть от rem, em или процентов, а если ссылка не разрешается, экспорт останавливается до любых изменений с названием токена. Проценты для этих типов тоже считаются от remBase: "50%" при базе 16 даст 8. Если нужно точное число, указывайте px.

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

#Единицы и запись чисел

Регистр единиц не важен: 10PT и 10pt — одно и то же. Те же правила действуют внутри формул: 10pt + 2px, {a} * 1,5. Внутри скобок функции запятая разделяет аргументы, поэтому min(1,5) — это два аргумента, 1 и 5; дробные числа в функциях пишите через точку.

Единицы, которые нельзя перевести в пиксели, — vw, vh, vmin, vmax, ch, ex, fr, а также deg там, где ожидается длина, — и неправильно записанные числа, например 12abc или 1,234,567, не экспортируются: токен пропускается с причиной в отчёте, соседние токены экспортируются.

#Dimension

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

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

#Number

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

{ "$type": "number", "$value": 8 }

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

#Spacing

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

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

#Sizing

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

{
  "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.

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

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

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

• Типы токенов
• JSON-формат токенов
• Scopes и Code Syntax
• Border, Border Width, Border Radius, Stroke Style