Motion

Источник: ds-docs/component-contracts/foundations/motion.md

Источник значений: коллекция motion-tokens файла Astra DS (37 переменных), выгрузка плагином 03.09.2026 · id сверены с tokens/variable-ids.json. Источник смысла: раздел Figma «Motion Tokens», прочитан REST API 30.07.2026. Только факты. Находки и открытые вопросы — в конце.

Значения ниже взяты из файла, а не из tokens/motion.tokens.json: экспорт устарел. Двадцать три токена из 37 записаны в нём под id, которых в файле уже нет, а у остальных разошлась запись значений. Подробности — в находках.

Зачем анимация

«Анимация в интерфейсе — это изменение визуальных элементов во времени: перемещение, масштабирование, исчезновение. Она улучшает восприятие процессов и естественность взаимодействия.»


Информирование	Демонстрация причинно-следственных связей	Появление уведомления
Навигационная поддержка	Указание направления действий	Изменение расположения элементов
Подтверждение действия	Визуальная индикация успеха	Возврат кнопки в исходное состояние
Эмоциональное восприятие	Живость продукта, характер бренда	—

«В Astra Design System анимация описывается через токены и паттерны, чтобы быть предсказуемой и согласованной.»

Как токены лежат в файле

Одна коллекция motion-tokens, режим value, 37 переменных пятью группами. Типы — не только числа:


`duration`	19	`TIMING`	секунды: `0.06`, `0.2`, `2`
`easing`	4	`EASING`	тип кривой плюс четыре коэффициента
`scale`	6	`FLOAT`	проценты: `95`, `104`
`opacity`	3	`FLOAT`	проценты: `0`, `50`, `100`
`distance`	5	`STRING`	строки: `100vh`, `-100vw`

TIMING и EASING — отдельные типы переменных Figma для анимации, а не числа. В экспорт DTCG они не переносятся как есть: там длительности стали строками «60ms», кривые — строками cubic-bezier(…).

1. Примитивные токены

«Токены базовых значений, не привязанные к сценариям.»

duration

Используются и для длительности, и для задержки.


`duration-3xs`	0.06 с	60 мс	`40025248:3484`
`duration-xxs`	0.08 с	80 мс	`40025248:3485`
`duration-xs`	0.12 с	120 мс	`40025248:3486`
`duration-s`	0.16 с	160 мс	`40025248:3487`
`duration-m`	0.2 с	200 мс	`40025248:3488`
`duration-l`	0.24 с	240 мс	`40025248:3489`
`duration-xl`	0.28 с	280 мс	`40025248:3490`
`duration-xxl`	0.3 с	300 мс	`40025248:3491`
`duration-3xl`	0.32 с	320 мс	`40025248:3492`
`duration-4xl`	0.4 с	400 мс	`40025248:3493`
`duration-5xl`	0.48 с	480 мс	`40025248:3494`
`duration-6xl`	0.56 с	560 мс	`40025248:3495`
`duration-7xl`	0.6 с	600 мс	`40025248:3496`
`duration-8xl`	0.64 с	640 мс	`40025248:3497`
`duration-9xl`	0.8 с	800 мс	`40025248:3498`
`duration-10xl`	0.93 с	930 мс	`40025248:3499`
`duration-11xl`	1 с	1000 мс	`40025248:3500`
`duration-12xl`	1.2 с	1200 мс	`40025248:3501`
`duration-20xl`	2 с	2000 мс	`40025248:3502`

Как выбирать длительность

Данные Nielsen Norman Group, из раздела Figma:


Микро-обратная связь: нажатие, наведение, ripple	100–200 мс	`duration-xs` (120), `duration-s` (160), `duration-m` (200)	«Почти мгновенно, укладывается в порог „прямой манипуляции“ ≈0,1 с»
Обычные переходы, модалки, лист → деталь	200–300 мс	`duration-m` (200) … `duration-xxl` (300)	«Рекомендуемый диапазон для заметных, но не „длинных“ изменений»
Крупные и дальние перемещения, большие экраны	300–400 мс	`duration-xxl` (300) … `duration-4xl` (400)	Длительность растёт с дистанцией и размером экрана

Поправки на устройство: планшет ≈ +30 %, часы ≈ −30 %.

easing


`easing-standard`	`EASE_IN_AND_OUT`	(0.42, 0, 0.58, 1)	`ease-in-out`	`40025248:3077`
`easing-accelerate`	`EASE_IN`	(0.42, 0, 1, 1)	`ease-in`	`40025248:3481`
`easing-decelerate`	`EASE_OUT`	(0, 0, 0.58, 1)	`ease-out`	`40025248:3482`
`easing-emphasized`	`EASE_IN_AND_OUT`	(0.42, 0, 0.58, 1)	`ease-in-out`	`40025248:3483`

Тип кривой в файле задан не только коэффициентами: у переменной есть и собственный тип (EASE_IN, EASE_OUT, EASE_IN_AND_OUT), который совпадает с коэффициентами.

scale


`scale-null`	0	0	`84262:10731`
`scale-s`	80	0.8	`83934:27113`
`scale-m`	90	0.9	`83934:27112`
`scale-press`	95	0.95	`81012:3555`
`scale-default`	100	1	`83956:18387`
`scale-emphasize`	104	1.04	`81012:3556`

scale-null — полное сжатие при появлении и исчезновении, scale-press — нажатие, scale-emphasize — акцент, «дыхание».

opacity


`opacity-hidden`	0	0	`81012:3558`
`opacity-veil`	50	0.5	`81012:3559`
`opacity-visible`	100	1	`81012:3560`

opacity-veil — полупрозрачная подложка под шторками и модалками.

distance

«Токены передвижения анимации; также в компонентах может использоваться токены space для небольших перемещений значений.»


`distance-viewport-bottom 1`	`100vh`	`83934:27115`
`distance-viewport-left`	`-100vw`	`83934:27143`
`distance-viewport-top`	`-100vh`	`84262:10728`
`distance-viewport-right`	`100vw`	`84262:10729`
`distance-viewport-default`	`0`	`84262:10730`

В разделе Figma показан ещё числовой ряд distance-1…distance-8 (4, 8, 12, 16, 24, 32), полностью повторяющий шкалу space. В файле таких переменных нет — ни в motion-tokens, ни в space. Для реализации использовать space-*, пока владелец не заведёт отдельную шкалу.

2. Семантические токены

«Композиционные токены анимации представляют собой заранее определённые шаблоны движения, составленные из базовых примитивов. Они не указывают конкретные значения, а ссылаются на основные токены, объединяя их в логически завершённые сценарии.»

Каждый описывается набором полей: Delay · Duration · Ease · Scale · Opacity · Move X · Move Y · Rotation. Незаданные поля означают «не участвует в анимации».


`motion-state-layer-press`	«Обычное нажатие на компоненты»	`duration-l` (240 мс)	`easing-standard`	—
`motion-scale-press`	«Уменьшение при нажатии»	`duration-xxl` (300 мс)	`easing-standard`	`scale-press` (95)
`motion-skeleton-collapse`	«Токены анимации для перехода изменений»	`duration-m` (200 мс)	`easing-standard`	—

Состав снят по видимым слоям doc-компонентов: поля Delay, Opacity, Move X/Y, Rotation в этих токенах скрыты, то есть не заданы.

Переменных с именем motion-* в файле нет. Композит существует только как договорённость из документации: ни в коллекции, ни в экспорте его не найти, и в коде он разворачивается в примитивы вручную.

Категория «интерфейсные токены» — для сценариев вроде привлечения внимания — заявлена в документации, но ни одного токена в ней не заведено.

Как анимация доезжает до кода

Своего места у анимации в Figma нет: токен в Prototype не проставишь, и DevMode его не покажет. Раздел признаёт это прямо и предлагает обходные пути.


Дизайнер	аннотации Figma (клавиша Y) с тегом «Интерактивность»	имена токенов написаны рядом с экраном словами
Дизайнер	jitter.com для сложных случаев	ролик, по которому разработчик считывает движение
Дизайнер	готовый шаблон раздела для показа интерактивных компонентов	одинаковая подача у всех
Разработчик	DevMode, раздел List	видны скорость и тип перехода, но не имя токена

Собрана библиотека анимированных компонентов: Checkbox, Switch, Radio Button, Basic Dialog, Image Dialog, Bottom Sheet. Правило раздела для дизайнера: «указывайте значения из токенов; если указываете значение, которого в токенах нет, — имейте в виду, что идёте на это сознательно».

Переходы между страницами описаны отдельно: flow-motion.

Находки

Экспорт motion.tokens.json устарел целиком по анимации. Все 19 duration-* и все 4 easing-* записаны в нём под id, которых в файле нет: переменные пересозданы (нынешние id начинаются на 40025248:). Из 37 токенов экспорт совпадает с файлом по id только у 14 — это scale, opacity и distance.
easing-accelerate в экспорте другой, чем в файле. В файле EASE_IN с кривой (0.42, 0, 1, 1) — это CSS ease-in. В экспорте записано (0.25, 0.1, 0.25, 1), то есть CSS ease. Прежняя версия этого документа повторяла экспорт; верно значение файла.
scale и opacity в файле — проценты, в экспорте — доли. В файле scale-press = 95, в экспорте 0.95. Ни в имени, ни в типе это не отражено: FLOAT и там, и там.
easing-emphasized численно равен easing-standard — обе кривые (0.42, 0, 0.58, 1), и тип у обеих EASE_IN_AND_OUT. Акцентная кривая пока не отличается от стандартной.
distance-viewport-bottom 1 — имя с лишним хвостом. В файле переменная называется с пробелом и единицей на конце, в экспорте — без. Id тот же, значит переименовали в файле.
Ни у одной переменной нет codeSyntax и описания. Имена для кода не заданы.
Контракт компонента анимацию не записывает. В словаре узла полей движения нет; взаимодействие описывается разделом interaction, но длительность и кривая в него не входят.

Открытые вопросы


Q-001	Ряда `distance-1`…`distance-8` нет в файле, хотя он показан в документации Figma	Либо завести шкалу, либо убрать её из доки и предписать `space-*`	Владелец токенов
Q-002	`easing-emphasized` численно равен `easing-standard`	Задать отличную кривую либо убрать токен	Владелец токенов
Q-003	В композитных токенах поля `Delay`, `Opacity`, `Move X/Y`, `Rotation` скрыты — неясно, «не задано» или «не решено»	Подтвердить: скрытое поле = не участвует в анимации	Владелец DS
Q-004	Категория «интерфейсные токены» пуста	Наполнить либо убрать до появления сценариев	Владелец DS
Q-005	Композитных токенов три — покрытие сценариев неполное: нет появления шторок. Переходы страниц с тех пор нашлись отдельным разделом — flow-motion, но и там токенов в файле нет	Дополнить под реальные паттерны	Владелец DS
Q-006	Композитных токенов нет ни в файле, ни в экспорте — в коде их нельзя получить как переменную	Завести переменными либо явно зафиксировать разворачивание в примитивы	Владелец токенов
Q-007	Экспорт устарел: 23 токена под несуществующими id, `easing-accelerate` с другой кривой	Пересобрать `motion.tokens.json` из файла	Владелец токенов
Q-008	`scale` и `opacity` хранятся процентами, а экспортируются долями	Договориться об одной записи и починить ту сторону, которая расходится	Владелец токенов

Источник

Значения: коллекция motion-tokens файла Astra DS, выгрузка плагином 03.09.2026; полный список с id — tokens/variable-ids.json.
Смысл и рекомендации: раздел Figma «Motion Tokens» 81005:5427, фреймы Motion primitive tokens 81005:5452, Motion semantic tokens 81032:3289. Прочитано REST API 30.07.2026; состав композитных токенов определён по видимым слоям doc-компонентов.
Процессы дизайнера и разработчика сняты с рамок «Дизайнеру» и «Разработчику» того же раздела 07.09.2026. Развёрнутый разбор переходов с паттернами мобильного банка остался в прежней базе: ../reference/guidelines/flow-motion.md; здешняя выжимка — flow-motion.

См. также: effect, space, README.