Figma Motion: анимация для компонентов, переменных и прототипов (подробный гайд)

Перед тем как записать это видео, я пересмотрела кучу гайдов по Figma Motion. И почти везде одно и то же: анимируем кружочек/самолетик, смотрите как плавно. Красиво, но сразу встает вопрос, как применять в работе с интерфейсами? Считаю, что motion не живет сам по себе. Он живет внутри компонента, у которого есть варианты и состояния. Внутри макета, который потом отдавать в разработку. Внутри системы, где уже есть токены – и вот про токены многие просто забыли рассказать Поэтому собрала подробный гайд про то, как motion может работать в связке с тем, из чего реально состоит интерфейс Пока Motion в статусе Beta, поэтому есть недоработки, которых мне пока не хватает, чтобы использовать инструмент без костылей Надеюсь, что данное видео поможет тебе вписать motion в свою дизайн-систему и интерфейсы, а не только в анимацию графических элементов ______________ 📌 Продуктовый дизайн, UX/UI – https://mankadsgn.ru/modul2new?utm_so... 📌 База дизайна и Figma 2026 – https://mankadsgn.ru/modul1?utm_sourc... 📌 Дизайн-шаблоны – https://mankadsgn.ru/templates?utm_so... ______________ тг для дизайнерок — https://t.me/manka_dsgn сообщество ВК – https://vk.com/manka_dsgn пинтерест –   / manka_dsgn   ______________ Таймкоды 00:00 – Интро 00:36 – Что такое, базовые основы 09:04 – Easing: скорость и плавность движения анимации 10:35 – Easing через переменные 12:43 – Шаблоны и свойства анимации 15:10 – Timing через переменные 17:06 – Анимация компонента: форма с ошибкой 26:36 – Анимация компонента: модалка с прогрессом загрузки 30:44 – Экспорт анимации 32:03 – Motion и прототипы ______________ #figmamotion #анимацияинтерфейса #переменныеfigma #прототипирование #дизайнсистема #компонентыfigma #продуктовыйдизайн #дизайнинтерфейсов #обучениедизайну #figma #uxuidesign #productdesign #манка #сообществодушнил