Motion-токени в дизайн-системі: гайд по Figma Motion

Кольори у токенах. Відступи у токенах. Типографіка у токенах. А анімація?

Анімація зазвичай живе в голові одного фронтендера і у двадцяти різних transition: all 0.3s по всьому коду. Це найдовше незакрита діра майже в кожній дизайн-системі. Дизайнер її не помічає, бо у Figma все статичне. Розробник її не закриває, бо ніхто не дав йому значень.

З червня 2026 закривати цю діру стало реально просто. Figma Motion вийшов у відкриту бету і приніс змінні для тривалості та easing прямо у файл, поруч зі змінними кольору та відступів.

Чому motion випадає з дизайн-системи

Причина проста: до цього року анімацію не було де зберігати. Кольори мали Variables, компоненти мали бібліотеку, а тривалості не мали нічого. Максимум - рядок у Notion, який ніхто не відкривав.

Наслідки завжди однакові. Дропдаун відкривається за 300 мс, тултіп за 150, модалка за 400, і жодне з цих чисел ніхто свідомо не обирав. Продукт відчувається неохайно, хоча всі кольори підв'язані ідеально. Швидкість інтерфейсу читається тілом швидше, ніж око встигає помітити відтінок сірого.

Найпоказовіший діалог на аудиті звучить так. Питаю розробника, чому фільтр розкривається помітно повільніше за сусідній дропдаун. Відповідь: "там був складніший компонент, я поставив 350, щоб не смикалось". Це рішення прийнято три роки тому, за півхвилини, і відтоді ніхто до нього не повертався. У системі десятки таких рішень, і кожне окремо виглядає нормально.

Що саме змінив Figma Motion

Figma Motion розкотили 24 червня 2026 на всі плани для повних (Full) місць. Це не окремий інструмент, а таймлайн із ключовими кадрами всередині Figma Design.

Для дизайн-системи важливі три речі:

• Змінні тривалості та easing. Тепер це такі самі змінні, як color/bg/surface. Їх можна зібрати в колекцію, підв'язати до анімацій і змінити глобально в одному місці.
• Анімовані компоненти. Рух живе всередині компонента бібліотеки, а не в окремому прототипі, який завжди відстає від майстра.
• Інспект і експорт. Dev Mode показує весь таймлайн, а звідти код виймається у CSS, JSON або React. Те саме доступно через Figma MCP-сервер, якщо ви ганяєте дизайн у код агентом.

Експорт відео є у MP4, GIF, WEBM і анімованому SVG, Lottie обіцяють пізніше. Генерація анімації агентом і високоякісне відео потребують платного плану.

Мінімальний набір motion-токенів

Не робіть шкалу з дванадцяти тривалостей. Ніхто не відрізнить 180 мс від 200 мс, а ви отримаєте ще один список, у якому люди губляться.

Робочий мінімум - п'ять значень тривалості:

• instant - 0 мс. Для станів, які мають перемикатися без затримки.
• fast - 100 мс. Hover, focus, зміна кольору кнопки.
• base - 200 мс. Дефолт. Дропдауни, аккордеони, тултіпи.
• slow - 300 мс. Модалки, шторки, side panel.
• slower - 500 мс. Великі перехідні екрани, онбординг, порожні стани.

І чотири криві easing:

• standard - для руху всередині екрана, коли елемент і з'являється, і зникає в межах видимої області.
• entrance - швидкий старт, м'яке гальмування. Для всього, що заходить в екран.
• exit - навпаки, повільний старт і різкий вихід. Для всього, що йде геть.
• emphasized - пружина. Тільки для святкових моментів: успішна оплата, досягнення, святкові мікровзаємодії. Один-два випадки на весь продукт.

Дев'ять значень. Цього вистачає на 95% продуктових інтерфейсів.

Як їх називати

Та сама логіка, що і з кольором: примітиви окремо, семантика окремо.

Примітив описує число: duration-100, duration-200, duration-300. Семантичний токен описує намір: motion.duration.hover, motion.duration.overlay, motion.easing.entrance.

Компоненти підв'язуються тільки до семантичних. Тоді рішення "усі оверлеї стали трохи повільніші" - це одна зміна, а не сорок.

Якщо ви ще не розводили примітиви й семантику для кольору, почніть з цього, а вже потім беріться за motion. Логіка ідентична, і на кольорі помилка коштує дешевше.

Правило відповідності: що чим анімувати

Найчастіша помилка - однакова тривалість на все. Рух має залежати від того, скільки пікселів долає елемент і скільки уваги він забирає.

• Зміна кольору, тіні, прозорості на місці: fast.
• Розкриття елемента поруч із тригером (дропдаун, тултіп, чекбокс): base.
• Поява шару поверх контенту (модалка, drawer, bottom sheet): slow.
• Перехід між екранами: slow на вхід і base на вихід. Вихід завжди швидший за вхід, бо користувач уже прийняв рішення і чекати не хоче.

Друге правило: анімуйте transform і opacity. Все інше змушує браузер перераховувати розкладку, і навіть ідеально підібрані 200 мс почнуть смикатися на середньому Android.

prefers-reduced-motion - не опція

Про це забувають у 9 з 10 систем, які я аудитую. Формально повне прибирання анімації сидить у WCAG на рівні AAA, тобто до букви закону вас за нього не притягнуть. Але користувачі з вестибулярними розладами існують незалежно від рівня відповідності, а системний перемикач у macOS, iOS, Windows і Android вмикається одним кліком. Ігнорувати сигнал, який операційна система вже передала браузеру, просто неввічливо.

Найпростіший спосіб - зробити reduced motion частиною самих токенів, а не окремою гілкою в кожному компоненті. Один медіазапит перевизначає тривалості, і вся система стишується автоматично:

Зверніть увагу: ми не вимикаємо анімацію повністю через animation: none. Ми обнуляємо тривалість. Стани, що залежать від завершення переходу, продовжують працювати, просто миттєво.

Як довезти це до коду

Схема така сама, як з кольоровими токенами. Змінні з Figma їдуть у JSON, JSON проганяється через Style Dictionary, на виході CSS-змінні та конфіг для Tailwind чи React.

Різниця одна: easing у Figma зберігається як крива Безьє, і при експорті її треба звести до cubic-bezier(). Пружинні (spring) значення в CSS напряму не переносяться, тому для них або тримайте окремий JS-токен для Framer Motion, або підбирайте наближену криву і фіксуйте це рішення в документації. Інакше рух у Figma і рух у продакшені розійдуться, і ніхто не зрозуміє чому.

Перевірка проста: якщо розробник може відкрити ваш файл токенів і знайти там усі дев'ять значень без питань у Slack, система працює.

А якщо Figma Motion у вас ще немає

Мотиваційна частина новин завжди звучить так, ніби завтра вся команда сидить у беті. На практиці частина людей у файлі на Viewer-місцях, частина на старому плані, а дедлайн уже цього тижня.

Хороша новина: 90% користі від motion-токенів не залежить від Figma Motion взагалі. Тривалості та easing - це звичайні числа й рядки, а Figma Variables давно вміє зберігати і те, і те. Заведіть колекцію Motion з числовими змінними для тривалості та строковими для кривих, покладіть поруч фрейм-шпаргалку з правилом відповідності, і система вже працює. Figma Motion додає до цього таймлайн, прев'ю та експорт коду, а не сам факт існування токенів.

Тому послідовність така: спочатку домовитись про дев'ять значень, потім вирішувати, у якому інструменті їх програвати.

Три помилки, які я бачу найчастіше

1. Токени є, документації немає. Значення в коді лежать, а правила "коли base, а коли slow" немає. Через місяць кожен обирає навмання. Один абзац у Storybook закриває питання назавжди.
2. Пружина всюди. Spring виглядає ефектно в демо і виснажує в щоденній роботі. Тримайте його для рідкісних моментів.
3. Motion робиться в кінці. Коли анімацію додають після того, як компонент уже зверстаний, вона стає косметикою поверх. Тривалість і крива - це частина специфікації компонента, поруч з паддінгом і станами.

План на один день

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

1. Зберіть у продукті всі значення тривалості, які реально використовуються зараз. Зазвичай їх виявляється 15 або 20.
2. Зведіть до п'яти. Кожне старе значення підтягніть до найближчого нового.
3. Створіть колекцію змінних Motion у Figma: п'ять тривалостей, чотири easing.
4. Опишіть правило відповідності одним списком, який поміщається на екран.
5. Додайте блок prefers-reduced-motion.
6. Переведіть на нові токени три найчастіші компоненти: кнопку, дропдаун, модалку. Решту мігруйте по ходу справи.

Якщо хочеться подивитися, як це виглядає в реальних файлах, а не в теорії, я регулярно розбираю такі речі на YouTube-каналі UX Hero.

---

Motion-токени - це найдешевший спосіб зробити продукт відчутно якіснішим. Ви не малюєте нових екранів і не переписуєте компоненти. Ви просто прибираєте випадковість із того, що користувач відчуває кожні кілька секунд.