Figma выпустила Motion: режим анимации прямо на холсте, motion-переменные, кейфреймы от агента и экспорт готового кода в Dev Mode.
Figma показала Motion — режим анимации прямо на холсте, в одном файле с компонентами, переменными и всей командой.
Раньше анимация жила отдельной жизнью. Дизайнер собирал макет в Figma, а оживлять его уходил в сторонние инструменты и плагины, постоянно прыгая между окнами. Motion убирает эти прыжки: переключаете кадр в режим Motion, и рядом с макетом появляется таймлайн. Тянете слои по времени, ставите кейфреймы на положение, масштаб, поворот и прозрачность, а комментарии теперь можно оставить к конкретному моменту анимации.
Дальше интереснее. Анимация прикрепляется к компонентам так же, как заливка и шрифты: собрали один раз, и она едет с компонентом по всем экранам. Появились motion-переменные — задаёте кривую easing, переключаете режим на уровне страницы, и все анимации, которые на неё ссылаются, обновляются разом. Так набор одноразовых эффектов превращается в полноценную систему.
Главный для меня сюжет — агент берёт на себя техническую рутину. Описываете словами, что хотите, и он строит реальные кейфреймы на таймлайне, опираясь на ваши компоненты и токены. А в Dev Mode весь тайминг и кривые видны разработчику и копируются готовым кодом в CSS, JSON или React. То, что вы задизайнили, доезжает до продакшена без пересборки на глаз.
Похожую логику я недавно видел в Palmier Pro, где ИИ-генерация живёт прямо на таймлайне видеоредактора. Похоже, это общий тренд: креативные инструменты затягивают и анимацию, и ИИ внутрь одного холста, чтобы не разрывать рабочий процесс.
По теме
- База знаний: AI-генераторы дизайна: обзор инструментов
Если вы собираете дизайн-систему или продуктовый интерфейс, подобные инструменты заметно влияют на то, как команда передаёт работу в разработку.
Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov.