🎬 Анимации в Figma Motion: создание и экспорт

Figma Motion: Анимация и экспорт прямо в Фигме

Ключевые тезисы:

Figma Motion — встроенный инструмент для создания анимаций без плагинов
Прямой экспорт видео (MP4) или GIF из интерфейса Фигмы
Работа с ключевыми кадрами, пресетами и настройкой easing
Анимации можно встраивать в компоненты для переиспользования
Интеграция с AI-агентом для генерации элементов

Введение в Figma Motion

Инструмент Figma Motion (часто называют Figmotion) расположен на нижней панели рядом с Dev Mode. При клике открывается таймлайн для анимации.

Основные возможности:

Анимация элементов прямо на холсте
Экспорт результата в MP4/GIF
Библиотека готовых пресетов анимаций

Панель анимации и пресеты

При выборе элемента на панели северо-восток появляются настройки анимации.

Библиотека пресетов (печенька ) включает:

Базовое поведение (позиция, масштаб, поворот, размер, непрозрачность, векторный путь)
Входные анимации (появление элемента)
Анимации цикла
Выходные анимации (исчезновение)

Пример: Пресет «Капля дождя» — элемент падает и пружинит.

Настройка анимаций

Управление таймлайном:

Пробел — запуск/остановка анимации выделенного элемента
Масштабирование таймлайна: ползунок, щипок на тачпаде или Ctrl/Cmd + колёсико мыши
Прокрутка по горизонтали: Shift + колёсико мыши
Изменение продолжительности — перетаскивание границ анимации на таймлайне

Настройки каждой анимации:

Направление
Дистанция
Задержка (delay)
Продолжительность (duration)
Кривые easing (ускорение/замедление)

Работа с ключевыми кадрами

Рядом с анимируемыми параметрами появляется иконка ключевого кадра (похожа на инстанс).

Два способа создания анимации:

Сначала кадр, потом изменение: Добавить ключевой кадр, затем изменить параметр (риск создать лишний кадр при неточном позиционировании).
Сразу изменение: Изменить параметр в нужной точке таймлайна — ключевой кадр создастся автоматически.

«Босс ключевых кадров» (иконка рядом с Play):

При активации любые изменения элемента на холсте (перемещение, масштаб, поворот) автоматически добавляют соответствующие анимации на таймлайн.

Цикличность анимаций (Луп)

Кнопка цикла (луп) имеет три режима:

Выключено — анимация проигрывается один раз
Повтор — бесконечный цикл
Туда-обратно — режим маятника (вперёд и назад)

Практические примеры анимации

1. Мяч с вращением

Создаём анимацию позиции (мяч влетает)
Добавляем анимацию вращения (-720° для двух оборотов в нужную сторону)
Важно: Синхронизируем easing анимации позиции и вращения (например, оба easing in out)

2. Рисование сердца (векторный путь)

У контурной фигуры анимируются параметры Start и End (начало и конец обводки)
Можно анимировать не всю линию, а её отрезок (например, 10% бегущей точки)

3. Таймер с AI-агентом

Запрос агенту: «Создай таймер в виде кругового прогресс-бара...»
Анимация прогресс-бара через ключевые кадры параметра Stroke End
Анимация цвета заливки (от синего к тёмному)
Проблема: Агент может создавать лишние слои (например, дублирующие эллипсы)

4. Пакман и вращающиеся точки (работа с компонентами)

Анимация рта Пакмана создаётся внутри компонента
Точки для «поедания» группируются во фрейм, который вращается
Анимация масштаба точек также выносится в компонент для управления всеми копиями из одного места
Преимущество компонентов: Отключение/изменение анимации в главном компоненте применяется ко всем его экземплярам.

Экспорт анимации

Экспорт возможен прямо из интерфейса Figma Motion:

Форматы: MP4, GIF
Настройки: Частота кадров (например, 60 FPS для плавности)
Не требуются сторонние плагины или программы

Обучение и итоги

Инструмент Figma Motion делает создание сложных анимаций доступным внутри Фигмы.
Компоненты — ключ к эффективной работе: анимация в одном месте применяется везде.
Экспорт в видео — долгожданная функция, избавляющая от необходимости в плагинах.
Интеграция с AI-агентом может ускорить создание элементов, но требует контроля.

Главный вывод: Figma серьёзно усилила встроенные возможности моушн-дизайна, позволяя создавать, тестировать и экспортировать анимации в едином рабочем пространстве.