SXL Studio
Tokens

Animation

Типы токенов группы Animation: Duration, Cubic Bezier, Transition — выверенные форматы значений и практические motion-паттерны.

Overview

Motion-токены. Все три — внутренние (хранят данные анимации для Apply / Generate / Code; не экспортируются как отдельная переменная или стиль).

Figma поддерживает переменные Timing и Easing в интерфейсе Motion. Однако публичный Figma Plugin API сейчас предоставляет только типы BOOLEAN, COLOR, FLOAT и STRING, поэтому Community-плагин не может создать нативные Timing- или Easing-переменные. SXL сохраняет эти motion-значения в JSON и не подменяет их вводящими в заблуждение FLOAT или STRING. Нативный экспорт можно будет добавить, когда Figma откроет эти типы в публичном API.

$typeЗначение одной строкой
durationВремя (ms / s / число)
cubicBezierМассив [x1, y1, x2, y2] или cubic-bezier(...)
transitionShorthand-строка или объект (duration, delay, easing)

Duration

Значение времени, используемое переходами и анимацией.

Принимаемое $valueПример
Миллисекунды"200ms"
Секунды"0.2s"
Число200
Алиас / математика"{duration.base} * 2"
JSON
{ "duration": { "$type": "duration", "fast": { "$value": "120ms" }, "base": { "$value": "200ms" }, "slow": { "$value": "320ms" } } }

Cubic Bezier

Easing-кривая.

Принимаемое $valueПример
Массив из 4 чисел[0.4, 0, 0.2, 1]
Строковый массив"[0.4, 0, 0.2, 1]"
cubic-bezier(...)"cubic-bezier(0.2, 0, 0, 1)"
Алиас"{cubicBezier.standard}"
JSON
{ "cubicBezier": { "$type": "cubicBezier", "standard": { "$value": [0.4, 0, 0.2, 1] }, "emphasized": { "$value": [0.2, 0, 0, 1] } } }

Transition

Композитный motion-контракт. Пишите shorthand-строку, объект или алиас (массивы недопустимы как корень).

Ключи объекта:

КлючТипПримечания
durationчисло / строка / алиасДлительность
delayчисло / строка / алиасЗадержка старта
easingстрока / алиасПресет-ключевое слово, cubic-bezier(...) или spring(...)

Пресеты easing: linear, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, gentle, quick, bouncy, slow (плюс cubic-bezier(...) и spring(...)).

JSON
{
  "transition": {
    "$type": "transition",
    "default": { "$value": { "duration": "200ms", "delay": "0ms", "easing": "ease-in-out" } },
    "emphasized": { "$value": { "duration": "{duration.slow}", "delay": "0ms", "easing": "cubic-bezier(0.2, 0, 0, 1)" } },
    "spring": { "$value": { "duration": "260ms", "delay": "0ms", "easing": "spring(1, 170, 26, 0)" } }
  }
}

Примечание Это transition-токен (переиспользуемый motion-контракт). Прототип-взаимодействия внутри компонента (триггеры вроде on-hover, анимации вроде smart-animate) настраиваются в файле composition — см. Composition · Transitions.

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

JSON
{
  "duration": { "$type": "duration", "base": { "$value": "200ms" }, "slow": { "$value": "320ms" } },
  "cubicBezier": { "$type": "cubicBezier", "standard": { "$value": [0.4, 0, 0.2, 1] } },
  "transition": {
    "$type": "transition",
    "default": { "$value": { "duration": "{duration.base}", "easing": "ease-in-out" } }
  }
}

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