Анимация: процессы для дизайнера и разработчика

Источник: ds-docs/reference/guidelines/animation-tokens.md

Как применять токены анимации на практике и как передавать анимацию между дизайном и кодом. Значения токенов (duration / easing / scale / opacity / distance, композитные токены) — в motion. Связано: flow-motion, README.

Главное правило (из Figma): «Указывайте значения из токенов. Если вы указываете значения, которых нет в токенах, имейте в виду — вы сознательно идёте на этот шаг.»

---

Для дизайнера

Что уже сделано за вас

«На всех компонентах дизайн-системы будут назначены анимации.» То есть для компонентов Astra DS анимацию задавать не нужно — она приходит вместе с компонентом (см. компонентные токены в motion).

Отдельная работа нужна, только если «вы сделали свой продуктовый компонент для Astra Fintech, Fintech UI и хотите сделать интерактивную анимацию в интерфейсе». Ниже — рекомендуемые способы её показать.

Способ 1. Figma → Prototype + аннотации

«Вы можете использовать стандартные средства Figma для показа анимации разработчику. Используйте аннотации (клавиша Y) с тегом „Интерактивность“ для отображения токенов, необходимых для переходов.»

⚠️ Ограничение Figma (из документации): «К сожалению, в Figma нет возможности указания токенов в Prototype для DevMode. Приходится использовать такие методы объяснения.»

То есть: сам переход настраивается в Prototype, а имена токенов передаются текстом в аннотации — иначе разработчик их не увидит.

Способ 2. Jitter

«Для сложных отображений интерактивности можете использовать сервис jitter.com. Есть готовый шаблон для отображения ваших интерактивных компонентов.»

Библиотека примеров

«Собрана библиотека анимированных компонентов»:

Используйте их как эталон, прежде чем описывать анимацию своими словами.

Презентация принципов

Запись встречи от 15 августа 2025 — презентация принципа работы с анимациями: видео (Rutube, приватная ссылка).

Навигация по записи (из прежнего разбора buildin.ai):

• 0:00–12:13 — токены и их уровни;
• 12:13–59:00 — как применять и в каких инструментах делать анимации: Figma, Jitter, ProtoPie.

---

Для разработчика

Инструкции по платформам

«Инструкции, как работать с токенами анимации в рамках ваших платформ, доступны по ссылке»:

Как читать анимацию от дизайнера

Дизайнер может передать анимацию тремя путями — проверяйте все:

1. Figma DevMode. «Дизайнеры могут делать анимацию в Figma. Вы можете видеть скорость анимации и переходы в DevMode → раздел List → Interaction.»
2. Аннотации с тегом «Интерактивность». Именно там лежат имена токенов — в Prototype их технически не видно (ограничение Figma, см. выше). Если аннотации нет, а анимация есть — запрашивайте токены у дизайнера, не подбирайте значения на глаз.
3. Jitter. «Посмотрите видео-инструкцию от 2 октября 2025, как смотреть в Jitter анимацию по компонентам»: видео (Rutube, приватная ссылка).

Что брать в код

• Компоненты Astra DS — анимация уже описана компонентными токенами (motion-state-layer-press, motion-scale-press, motion-skeleton-collapse); реализуйте через них, а не через сырые значения.
• Композитный токен ссылается на примитивы, а не на числа: motion-scale-press = duration-xxl + easing-standard + scale-press. В коде разворачивайте в те же примитивы.
• Перемещения: viewport-дистанции — токенами distance-viewport-*; малые смещения — токенами --space-* (шкалы distance-1…8 в экспорте нет, см. motion Q-001).
• Значение вне токенов в макете — повод уточнить у дизайнера: по правилу выше это осознанное исключение, и оно должно быть проговорено.

---

Инструменты (сводно)

---

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

---

Источник

• Figma Section «Motion Tokens» 81005:5427: фреймы «Дизайнеру» 81641:19011 и «Разработчику» 84127:8150. Прочитано Figma REST API 2026-07-30 (тексты и гиперссылки извлечены из узлов).
• Значения токенов и композитные шаблоны — motion.
• Прежний разбор навигации по видео — buildin.ai.