Figma Motion: пружины, предпросмотр стилей и Lottie

10 ноября 2026 года Figma представила обновления Figma Motion — предпросмотр анимационных стилей, физические параметры пружин и просмотр результата Lottie до экспорта. На Wybex новость выходит 12 ноября. Изменения описаны в официальных release notes и справке Figma.

Предпросмотр стилей

Теперь можно посмотреть, как проигрывается стиль, в списке анимаций и на объекте холста до применения. Для дизайнера это возможность быстрее сравнить несколько вариантов движения на одном элементе. Практический пример — проверить появление карточки с разными характерами замедления и выбрать подходящий вариант до дальнейшей настройки.

Пружины с физическими параметрами

В физической модели движения настраиваются жёсткость и затухание, а для iOS и веба также масса. Длительность определяется этими параметрами. В справке Figma отдельно уточняется, что у Android нет отдельной настройки массы: используются жёсткость и коэффициент затухания. Пользовательскую пружину можно сохранить для повторного применения в дизайн-системе.

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

Проверка Lottie перед экспортом

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

Figma Motion находится в открытой бета-версии. Доступность конкретных функций и их поведение стоит уточнять по текущей документации и своему аккаунту.

Что добавить в передачу разработчику

Редакционная рекомендация Wybex — вместе с файлом передавать условие запуска, цель движения, параметры и поведение при ограничении анимации. На учебном примере карточки это может быть появление после успешного сохранения, а не движение при каждом обновлении списка. Описание делает обсуждение результата конкретным и помогает проверять реализацию.

Порядок подготовки состояний и критериев приёмки разобран в статье о передаче макета Figma разработчику. Основные сведения о редакторе собраны в карточке Figma.

Источники — анонс Figma от 10 ноября и руководство по easing и физическим пружинам.