Figma запустила Motion: таймлайн-анимацию, переменные движения и экспорт кода прямо из макета — VogueTech

Что нового

Figma добавила в основной продукт полноценный инструмент для анимации — Motion. Он работает прямо на том же холсте, где живут макеты и дизайн-система.

Главные изменения:

Режим Motion на холсте

Новый режим рядом с Design, Draw и Dev.
Любой фрейм можно переключить в Motion — справа появляется таймлайн.
Анимация больше не живет в сторонних плагинах и файлах.

Таймлайн с ключевыми кадрами

Перемещение слоев по времени drag-and-drop.
Просмотр любого момента анимации через scrub по таймлайну.
Независимое кейфреймирование: позиции, масштаба, вращения и прозрачности.
Автозапись ключевых кадров: включаете auto keyframing — все изменения при движущейся головке записи попадают в таймлайн.
Комментарии, привязанные ко времени анимации — можно обсуждать конкретный момент, а не «где-то посередине».

Готовые стили анимации

Пресеты: fade, move, scale — быстрый старт для тех, кто не анимировал раньше.
Можно накладывать несколько стилей одновременно или выстраивать их последовательно на таймлайне.
Анонсированы кастомные стили анимации: позже можно будет сохранять свои пресеты.

Анимируемые компоненты и переменные движения

Компоненты теперь несут с собой не только цвет и типографику, но и анимацию.
Однажды настроенная анимация компонента повторяется на всех экранах и в файлах коллег.
Motion variables: переменные для движения, например easing.
- Можно задать несколько режимов (modes) для одной переменной.
- Применить их к разным анимациям.
- Переключить режим на уровне страницы — и все анимации, использующие эту переменную, обновятся сразу.

Шейдеры + анимация

Любое свойство шейдера теперь можно анимировать на таймлайне.
Все, что регулируется слайдером или полем ввода в шейдере, можно завязать на ключевые кадры.

3D-трансформации (анонс, по записи в вейтлист)

Поворот фреймов, векторов и текста по оси Z с живым предпросмотром.
Все трансформации остаются редактируемыми.
Экспорт в CSS, интеграция через MCP.
Возможность комбинировать 3D и Motion в одном файле для пространственных прототипов.

ИИ-агент Figma для Motion

Агент встроен прямо в холст.
По текстовому запросу создает реальные ключевые кадры на таймлайне.
Работает поверх существующих компонентов и токенов.
Можно запускать несколько промптов параллельно — агент анимирует разные фреймы, пока вы продолжаете работу.

Экспорт анимаций и кода

Экспорт анимированного фрейма в MP4, GIF, SVG или WEBM прямо из файла.
В Dev Mode появился отдельный таб Motion:
- Полный таймлайн доступен для просмотра и инспекта.
- Видны все значения времени, кривые ускорения и ключевые кадры.
- Копирование анимационного кода в форматах CSS, JSON, React и motion.dev.
Поддержка MCP: ссылка на анимированный фрейм передает агенту по коду полный контекст движения.

Доступность и тарифы

Motion — в открытой бете.
Starter-пользователи: доступ к Motion, но с ограниченными экспортами.
Пользователи с полными seat на всех планах: доступ к motion primitives и экспорту.
Полная интеграция с дизайн-системой и агент для Motion — только в платных планах.

Как это работает

Motion как еще один слой на холсте

Figma не вынесла анимацию в отдельное приложение. Motion — еще один режим работы с теми же объектами:

Выбираете фрейм → переключаете в Motion.
Интерфейс дополняется таймлайном, но сами слои и компоненты остаются теми же.

Это важно: дизайнеры не дублируют макеты в отдельный файл для анимации. Motion работает с теми же компонентами, переменными и токенами, что и остальной дизайн.

Таймлайн и кейфреймы

Основная логика напоминает классические анимационные редакторы:

Каждый слой фрейма представлен дорожкой на таймлайне.
Вы можете:
- перетаскивать слой по оси времени,
- ставить ключевые кадры для позиции, масштаба, вращения и opacity,
- включать авто keyframing, чтобы не создавать ключи вручную.

Таймлайн связан с комментами:

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

Шейдеры и анимация

Раньше в Figma можно было анимировать ограниченный набор свойств. Теперь логика другая:

Каждый параметр шейдера, у которого есть слайдер или поле ввода, можно связать с таймлайном.
Это превращает шейдеры в полноценный источник анимации — не только перемещения, но и сложные визуальные эффекты.

Motion-переменные

Motion variables работают по той же идее, что и цветовые или типографические переменные:

Создаете переменную, например easing-standard.
Задаете для нее несколько режимов (modes) — например для разных платформ или состояний.
Применяете переменную в анимациях компонентов.
Переключаете режим на уровне страницы — все связанные анимации обновляются.

Это превращает motion из набора разрозненных кейфреймов в систему: один раз описали принципы, дальше включаете их в компоненты.

ИИ-агент Figma

Агент встроен в холст и работает с Motion так:

Вы описываете желаемую анимацию текстом.
Агент создает ключевые кадры на таймлайне, опираясь на структуру фрейма, компоненты и токены.
Результат — не видео и не «черный ящик», а обычная анимация, которую можно редактировать вручную.
Можно менять easing, тайминги, добавлять свойства или полностью переделать анимацию.
Поддерживаются параллельные запросы — агент может работать над несколькими фреймами.

Для команд с жесткими стандартами это важно: как говорит Senior Product Designer Atlassian Александра Перейра, генерация «внутри ограничений» помогает сохранять консистентность, доступность и качество реализации.

Dev Mode, экспорт и MCP

В Dev Mode появился таб Motion, который решает давнюю боль передачи анимации в разработку:

Разработчик видит тот же таймлайн, что и дизайнер.
Все значения времени, easing-кривые и ключевые кадры доступны в явном виде.
Можно копировать код анимации в формате:
- CSS,
- JSON,
- React,
- motion.dev.

Поддержка MCP (Figma MCP server):

Ссылка на анимированный фрейм передает агенту по коду полный контекст движения.
Ничего не нужно «переводить» вручную — то, что нарисовано и анимировано, становится доступно в виде кода.

Что это значит для вас

Для продуктовых дизайнеров

Анимация перестает быть «последним шагом» Теперь вы можете закладывать motion сразу в макет:

Прототипировать сложные переходы и микровзаимодействия в том же файле.
Получать ранний фидбек от команды и заказчиков по живой анимации, а не по описанию.
Экспортировать MP4/GIF/SVG/WEBM для презентаций и согласований.

Motion особенно полезен:

для UI с большим количеством состояний (формы, onboarding, сложные панели),
для интерфейсов, где важна иерархия и «ощущение» продукта — как говорит иллюстратор и дизайнер Аданна Оньюквуси, софт, которым вы пользуетесь каждый день, должен вызывать эмоции, а движение — один из способов этого добиться.

Меньше зависимости от моушн-дизайнеров и плагинов Если раньше анимация часто зависела от одного специалиста и сторонних инструментов, теперь:

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

Аданна описывает это так: когда все в одном месте, можно систематизировать motion-подход и опубликовать его как библиотеку. Тогда он перестает быть вещью «одного человека» и становится ресурсом для всей команды.

Где Motion не поможет Не стоит рассчитывать на Motion как замену:

полноценных 3D-движков или сложной инфографики уровня After Effects,
продакшн-видео с композингом и монтажом.

Motion в Figma — про интерфейсную анимацию и прототипы, а не про киношный моушн-дизайн.

Для моушн-дизайнеров

Motion в Figma закрывает несколько болей:

Atomic motion design: как говорит Lead Motion Designer Atlassian Максвелл Хэтуэй, наличие кейфреймов прямо на холсте превращает атомарный дизайн в атомарный motion-дизайн. Компоненты несут с собой не только визуал, но и движение.
Системность вместо разовых эффектов: motion variables и анимируемые компоненты позволяют один раз описать принципы движения и применять их везде.
Меньше рутины: агент может собрать черновую анимацию, а вы занимаетесь нюансами — кривыми, таймингами, характером.

Если вы привыкли работать в After Effects, Motion может не заменить его для сложных проектов, но станет удобным слоем между дизайном и продакшном интерфейса.

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

Прозрачная передача анимации В Dev Mode вы получаете:

полный таймлайн,
конкретные значения длительности и задержек,
easing-кривые и ключевые кадры,
готовый код в CSS/JSON/React/motion.dev.

Senior Product Designer Atlassian Александра Перейра подчеркивает: когда разработчик легко инспектирует и переносит motion в нужных форматах, сокращается разрыв между задумкой и тем, что уходит в прод.

MCP и агенты для кода Если команда использует агента по коду (через MCP), ссылка на анимированный фрейм передает все данные о движении. Ничего не нужно интерпретировать вручную — агент опирается на тот же источник правды, что и дизайнер.

Для дизайн-систем и библиотек

Motion встраивается в дизайн-систему на двух уровнях:

Компоненты с анимацией: один раз настраиваете motion для кнопки, модального окна или карточки — и этот motion живет во всех файлах.
Переменные движения: описываете принципы (easing, длительности, режимы) через переменные и применяете их в компонентах. Переключение режима меняет поведение всего интерфейса.

Это особенно полезно для:

крупных продуктов с несколькими платформами,
команд, где motion раньше «ломался» при каждом спринте, потому что не было единого места для его описания.

Доступность в России

Figma — облачный сервис. Для работы с Motion нужен доступ к Figma в браузере или через десктопное приложение.

Если у вас уже есть доступ к Figma, Motion не требует отдельной установки. Для подключения 3D-трансформаций нужно записаться в вейтлист.

Если Figma в вашей сети блокируется, может понадобиться VPN или корпоративный доступ через прокси.

Место на рынке

Прямых цифр сравнения с конкурентами Figma не приводит, но по функционалу Motion конкурирует с несколькими классами инструментов сразу:

Против плагинов и внешних анимационных тулов для Figma Раньше команды часто использовали:

плагины для анимации прямо в Figma,
внешние веб-сервисы и десктопные программы для анимации иллюстраций и UI.

Motion убирает постоянные «прыжки» между инструментами:

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

Против классических моушн-редакторов По глубине возможностей Motion не заменяет профессиональные пакеты для видео и сложной графики. Но выигрывает в другом:

тесная связь с интерфейсным дизайном и компонентами,
Dev Mode и экспорт кода из того же файла,
системный motion через переменные и компоненты.

Против код-ориентированных решений для анимаций Инструменты типа motion-фреймворков для фронтенда требуют писать код, чтобы увидеть результат. Figma предлагает другой путь:

дизайнеры собирают motion визуально,
разработчики получают готовый код,
MCP-агенты по коду получают доступ к тем же данным.

По цене Motion встроен в существующие планы Figma:

Starter-план — ограниченный экспорт, но доступ к Motion есть,
платные планы — полный доступ к primitives, экспорту, интеграции с дизайн-системой и ИИ-агенту.

Если вы уже платите за Figma как за основной дизайн-инструмент, Motion становится логичным расширением без отдельной подписки на моушн-сервис.

Figma Motion уже в открытой бете. Попробовать можно через playground-файл или по инструкции в help center. Для 3D-трансформаций Figma собирает вейтлист — записаться можно на сайте.