Figma представила Motion — встроенный инструмент для создания анимаций прямо на холсте

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

Что нового:

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

• Готовые стили анимации. Быстрый старт с пресетами (fade, move, scale) с возможностью комбинировать и дорабатывать их вручную.

• Анимированные компоненты. Теперь компоненты могут хранить не только внешний вид, но и поведение. Анимация автоматически наследуется во всех проектах, где используется компонент.

• Motion Variables. Новый тип переменных для хранения параметров анимации (например, easing). Достаточно изменить режим один раз — обновления применятся ко всем связанным анимациям.

• ИИ-помощник. Figma Agent способен по текстовому запросу создать полноценную анимацию с ключевыми кадрами, а опытным дизайнерам помогает автоматизировать рутинную работу.

• Удобная передача разработчикам. В Dev Mode можно просматривать весь таймлайн, значения easing и ключевые кадры, а также экспортировать код в CSS, JSON, React и motion.dev. Поддерживается интеграция через MCP, чтобы ИИ-агенты могли получать полное описание анимации без потери контекста.

Также Figma позволяет экспортировать готовые анимации в MP4, GIF, SVG и WEBM прямо из редактора.

В ближайшее время появится поддержка 3D-трансформаций: объекты можно будет вращать по оси Z с последующим экспортом в CSS.

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

https://www.figma.com/blog/introducing-figma-motion/ 📜 Архивная копия