Figma Motion: анимация теперь живёт на холсте в одном файле с дизайном

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

Раньше анимация жила отдельной жизнью. Дизайнер собирал макет в Figma, а оживлять его уходил в сторонние инструменты и плагины, постоянно прыгая между окнами. Motion убирает эти прыжки: переключаете кадр в режим Motion, и рядом с макетом появляется таймлайн. Тянете слои по времени, ставите кейфреймы на положение, масштаб, поворот и прозрачность, а комментарии теперь можно оставить к конкретному моменту анимации.

Дальше интереснее. Анимация прикрепляется к компонентам так же, как заливка и шрифты: собрали один раз, и она едет с компонентом по всем экранам. Появились motion-переменные — задаёте кривую easing, переключаете режим на уровне страницы, и все анимации, которые на неё ссылаются, обновляются разом. Так набор одноразовых эффектов превращается в полноценную систему.

Главный для меня сюжет — агент берёт на себя техническую рутину. Описываете словами, что хотите, и он строит реальные кейфреймы на таймлайне, опираясь на ваши компоненты и токены. А в Dev Mode весь тайминг и кривые видны разработчику и копируются готовым кодом в CSS, JSON или React. То, что вы задизайнили, доезжает до продакшена без пересборки на глаз.

Похожую логику я недавно видел в Palmier Pro, где ИИ-генерация живёт прямо на таймлайне видеоредактора. Похоже, это общий тренд: креативные инструменты затягивают и анимацию, и ИИ внутрь одного холста, чтобы не разрывать рабочий процесс.

Motion уже в открытой бете.

По теме

• Статья: Как я наконец-то полностью ушёл с Tilda
• Блог: Palmier Pro — видеоредактор, где генерация ИИ живёт прямо на таймлайне
• База знаний: AI-генераторы дизайна: обзор инструментов

Если вы собираете дизайн-систему или продуктовый интерфейс, подобные инструменты заметно влияют на то, как команда передаёт работу в разработку.

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov.