Animation

Motion-токены описывают длительность и кривые анимации. duration, cubicBezier и easing экспортируются в переменные Figma типов Timing и Easing, которые Figma использует в прототипах и анимациях. transition остаётся внутренним: это составное описание перехода для генерации кода.

У переменных Timing и Easing нет scopes, поэтому в форме токена секции Scopes нет. Ссылки допустимы только внутри своего типа: Timing на Timing, Easing на Easing, при этом cubicBezier и easing взаимозаменяемы.

В окне Export to Figma за эти типы отвечают переключатели Variables → Timing и Easing, включённые по умолчанию. Apply к слоям для motion-токенов не применяется: их место в переменных Figma и в коде.

#Duration

Длительность перехода или анимации.

Форма Create duration: имя, значение с подсказкой формата, описание и Code Syntax.

В редакторе число без единицы дополняется ms автоматически. Отрицательные значения не принимаются. Формула считается в миллисекундах: ссылки на duration и числа читаются как ms, литералы 0.5s переводятся в миллисекунды; результат не может быть отрицательным.

Figma хранит Timing в секундах: "200ms" при экспорте становится 0.2, при импорте из Figma возвращается как "200ms".

{ "duration": { "$type": "duration", "fast": { "$value": "120ms" }, "base": { "$value": "200ms" }, "slow": { "$value": "320ms" } } }

#Cubic Bezier

Кривая ускорения в виде четырёх чисел.

Первое и третье числа, x1 и x2, должны быть в диапазоне от 0 до 1, как и в CSS. Форма создания показывает кривую в интерактивном превью.

{ "cubicBezier": { "$type": "cubicBezier", "standard": { "$value": [0.4, 0, 0.2, 1] }, "emphasized": { "$value": [0.2, 0, 0, 1] } } }

#Easing

Переменная Figma Easing в любой из трёх форм: пресет, своя кривая или пружина.

Написание ease-in-and-out тоже принимается. Пресеты соответствуют встроенным кривым Figma и в CSS превращаются в эквивалентные cubic-bezier.

{
  "easing": {
    "$type": "easing",
    "standard": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)" },
    "enter": { "$value": "ease-out" },
    "playful": { "$value": "spring(0.4)" }
  }
}

При импорте из Figma своя кривая возвращается токеном cubicBezier, а пресеты и пружины токеном easing.

#Transition

Составное описание перехода для кода: длительность, задержка и кривая. Пишите объект или ссылку на другой transition.

Форма создания содержит поля Delay, Duration и Curve со списком пресетов и превью пружины.

{
  "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-токен описывает переиспользуемый переход для кода. Взаимодействия прототипа внутри компонента, например on-hover и smart-animate, задаются в файле композиции: см. Composition.

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

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

#Если что-то не работает

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

• Типы токенов
• JSON-формат токенов
• Composition