Figma Motion — новый встроенный инструмент для анимации, представленный на конференции Config 2026 (23–25 июня). Раньше моушен-дизайн жил отдельно от Figma — в After Effects, плагинах или прототипах, а теперь Figma добавила его прямо на канвас как «материал», наравне со статичными фреймами и компонентами.
Что умеет Figma Motion:
Доступность: открытая бета доступна на всех тарифах, публикация анимированных компонентов, генерация анимаций агентом и экспорт видео в высоком разрешении требуют платного плана с Full seat; для государственных аккаунтов (Figma for Government) недоступна. Figma Help Center
Другие анонсы Config 2026 (раз уж спрашиваете про новинки в целом):
Как работать с Figma Motion?
Что умеет Figma Motion:
- Таймлайн с кейфреймами и пресетами прямо в файле дизайна сайта — переключение происходит через тумблер в тулбаре в режим Motion Figma Help Center
- Экспорт в CSS, JSON, React, MP4, WebM, Animated SVG и GIF CMSWire
- Поддержка easing-кривых и spring-анимаций, а также генерация первой версии анимации агентом Figma по текстовому запросу с последующей ручной доработкой Qubika
- Работает в том же файле, что и компоненты, переменные и совместная работа команды, что упрощает стандартизацию моушена в дизайн-системах Medium
Доступность: открытая бета доступна на всех тарифах, публикация анимированных компонентов, генерация анимаций агентом и экспорт видео в высоком разрешении требуют платного плана с Full seat; для государственных аккаунтов (Figma for Government) недоступна. Figma Help Center
Другие анонсы Config 2026 (раз уж спрашиваете про новинки в целом):
- Code layers — любой слой дизайна сайта можно превратить в интерактивный код-слой одним кликом или промптом, с двусторонней синхронизацией дизайн ↔ код (rollout с июля 2026) Uwarp
- Шейдеры — WebGPU-шейдеры и эффекты Explainx
- Генеративные плагины и инструменты Weave
- 3D-трансформации (превью)
- Обновлённый Figma-агент с навыками, коннекторами и общей историей промптов
Как работать с Figma Motion?
Откройте файл дизайна
Зайдите в любой файл Figma Design, к которому у вас есть права на редактирование (can edit access). Motion работает поверх обычных фреймов и компонентов, отдельный файл не нужен.
Зайдите в любой файл Figma Design, к которому у вас есть права на редактирование (can edit access). Motion работает поверх обычных фреймов и компонентов, отдельный файл не нужен.
Переключитесь в режим Motion
В тулбаре найдите переключатель между режимами Design и Motion и активируйте Motion. Внизу канваса появится панель таймлайна — там будет происходить вся работа с анимацией.
В тулбаре найдите переключатель между режимами Design и Motion и активируйте Motion. Внизу канваса появится панель таймлайна — там будет происходить вся работа с анимацией.
Выберите слой или компонент для анимации
Кликните на фрейм, группу или компонент, который хотите оживить. Это может быть кнопка, карточка, целый экран — что угодно из уже существующего дизайна.
Кликните на фрейм, группу или компонент, который хотите оживить. Это может быть кнопка, карточка, целый экран — что угодно из уже существующего дизайна.
Добавьте кейфреймы вручную или выберите пресет
Двигайте элемент, меняйте его свойства (позицию, масштаб, прозрачность и т.д.) в разные моменты таймлайна — Figma автоматически создаст кейфреймы. Либо возьмите готовый пресет анимации из библиотеки, если хочется быстрого результата.
Двигайте элемент, меняйте его свойства (позицию, масштаб, прозрачность и т.д.) в разные моменты таймлайна — Figma автоматически создаст кейфреймы. Либо возьмите готовый пресет анимации из библиотеки, если хочется быстрого результата.
Настройте тайминг и плавность
Отрегулируйте длительность, easing-кривые и spring-параметры (упругость, затухание) для каждого перехода, чтобы движение выглядело естественно и соответствовало вашему бренду.
Отрегулируйте длительность, easing-кривые и spring-параметры (упругость, затухание) для каждого перехода, чтобы движение выглядело естественно и соответствовало вашему бренду.
Попробуйте сгенерировать анимацию через Figma-агента (опционально)
Опишите текстом, какое движение вам нужно — агент создаст черновой вариант анимации, который затем можно доработать вручную на таймлайне. На платных планах с Full seat это может расходовать AI-кредиты после выхода агента из беты.
Опишите текстом, какое движение вам нужно — агент создаст черновой вариант анимации, который затем можно доработать вручную на таймлайне. На платных планах с Full seat это может расходовать AI-кредиты после выхода агента из беты.
Проверьте анимацию в контексте
Прогоните анимацию на канвасе, посмотрите, как она смотрится в связке с другими экранами или состояниями компонента, при необходимости откорректируйте кейфреймы.
Прогоните анимацию на канвасе, посмотрите, как она смотрится в связке с другими экранами или состояниями компонента, при необходимости откорректируйте кейфреймы.
Экспортируйте или передайте в Dev Mode
Выберите нужный формат экспорта — CSS, JSON, React, MP4, WebM, Animated SVG или GIF. Для разработчиков анимация появится в Dev Mode с готовым к использованию кодом, что ускоряет передачу от дизайна к разработке.
Выберите нужный формат экспорта — CSS, JSON, React, MP4, WebM, Animated SVG или GIF. Для разработчиков анимация появится в Dev Mode с готовым к использованию кодом, что ускоряет передачу от дизайна к разработке.
Если что-то из шагов работает не так, как ожидалось — Figma Motion ещё в открытой бете, так что интерфейс и возможности могут немного меняться.