Figma Motion.

Figma Motion

Figma Motion — это встроенная в холст Figma система анимации, которая объединяет дизайн и движение в одном файле. Теперь анимация перестаёт быть отдельным этапом или «бутылочным горлышком» — она становится неотъемлемой частью процесса проектирования с первого дня. С помощью временной шкалы на холсте, AI-агента и прямого экспорта в код команды могут создавать, систематизировать и внедрять анимацию без переключения между инструментами.

Ключевые возможности

• Временная шкала на холсте: Управляйте таймингом перетаскиванием слоёв, просматривайте анимацию скраббингом и создавайте ключевые кадры для позиции, масштаба, вращения и прозрачности. Автоматическая запись ключевых кадров фиксирует каждое изменение при движении плейхеда.
• Анимированные компоненты: Компоненты теперь сохраняют анимацию вместе с собой — как заливку и типографику. Анимация путешествует с компонентом через все экраны и файлы команды.
• Переменные движения: Создавайте переменные для плавности и режимов, применяйте их ко всем анимациям и переключайте режимы на уровне страницы — все связанные анимации обновятся мгновенно.
• AI-агент Figma: Описывайте желаемую анимацию словами — агент построит реальные ключевые кадры на временной шкале, опираясь на ваши компоненты и токены. Убирает порог вхождения для новичков и берёт рутину на себя для опытных аниматоров.
• Прямой экспорт в код: Переключайтесь в режим разработчика, чтобы скопировать анимацию в CSS, JSON, React или motion.dev. Все значения тайминга, кривые плавности и ключевые кадры доступны для инспекции без интерпретации.

Сценарии использования

• Прототипирование интерфейсов: Создавайте интерактивные прототипы с реалистичной анимацией прямо в файле дизайна — от микровзаимодействий до сложных переходов между экранами.
• Систематизация анимации в дизайн-системах: Публикуйте анимированные компоненты и переменные движения как библиотеку, чтобы вся команда применяла согласованную анимацию во всех продуктах.
• Упрощённый хендофф: Разработчики получают готовый к производству код без потери деталей — устраняется разрыв между задуманным и реализованным.
• Обучение и развитие навыков: AI-агент помогает дизайнерам освоить принципы анимации, получая обратную связь и рекомендации в процессе работы.

Целевая аудитория

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