Что такое Figma Motion? Новинки в Figma 2026. Разбираем таймлайн и ключевые кадры

Анимации в Figma вышли на новый уровень. На Config 2026, о котором мы писали в этой статье, Figma показала Figma Motion, и это та редкая ситуация, когда обновление меняет не то, “как” мы анимируем, а то, “где” мы это делаем. Если ты уже крутил что-то в After Effects или ещё в бородатые времена делал мультики во Flash – принципиально нового почти ничего Figma не добавила. Таймлайн, ключевые кадры, кривые – база осталась базой. 

Figma Motion: новый функционал Figma. Источник: Figma

А вот если ты анимировал только внутри Figma через Prototype и Smart Animate – готовься чуть переучить голову. Подход другой, и предыдущий был по-своему уникальным.

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

Как включить Motion и где искать таймлайн

На панели инструментов появился новый тогл – там же, где переключение на Draw и Dev Mode. Жмёшь – и снизу разворачивается таймлайн, на котором и будут жить все твои анимации.

Figma Motion на панели инструментов

Чтобы заанимировать объект, выбираешь его на артборде и нажимаешь Add Animation. Справа открывается панель Animation с готовыми пресетами и базовыми настройками. Рядом со свойствами объекта появляется иконка ключика – это и есть ключевой кадр.

Панель готовых пресетов (слева) и отображение ключевого кадра (справа)

Дальше всё знакомо любому, кто видел таймлайн: жмёшь Play – смотришь анимацию, можешь зациклить её или включить режим ревереса, анимация сначала проиграется в одну сторону и сразу же в другу.

Только вдумайся: ты собрал элемент интерфейса, заанимировал и тебе не нужно устраивать танцы с бубном, чтобы передать его в разработку. Записывать экран, дублировать видос, реверсить, доводить плавность – всё это в прошлом. 

Ключевые кадры – основа всего

Ключевые кадры – это способ объяснить Figma, что происходит. В этой точке объект вот такой, через какое-то время – вот другой ключ, и объект уже иной. Figma сама достраивает движение между ними.

Какие свойства анимируются

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

Анимация векторных путей в Figma

Так же можно анимировать векторные пути, скажем пока-пока, багам со Smart Animate, когда он не мог нормально начать анимацию из 0.  Сейчас, благодаря ключевым кадрам, мы можем независимо заанимировать начальную и конечную точку вектора. А это значит, что иконки, мы тоже теперь сможем анимировать более детально и как бы прорисовывать их.

Авто-ключи

Есть автоматическое создание ключевых кадров. Включаешь авто-режим, двигаешь плейхед, меняешь объект – и ключи проставляются сами, записывая каждое твоё изменение. Удобно, когда не хочешь вручную клацать по ключику после каждого шага.

Режим Auto keyframe

Проблемки с UX

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

Пресеты и easing

Если лень собирать всё с нуля, есть готовые пресеты анимаций – заранее настроенные стили вроде fade, move и scale. Причём стили можно стэкать – положить друг на друга, чтобы играли одновременно, или растащить по таймлайну, чтобы шли последовательно.

Готовые пресеты анимаций в Figma Motion

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

Killer-фичи, ради которых это стоит трогать сейчас

Анимация компонентов

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

Поддержка анимаций в компонентах. Источник: Figma

Экспорт в видео и гиф

Достать анимацию из Figma раньше было болью – особенно нашим студентам, которые собирают кейсы в портфолио из своих учебных проектов. А что за кейс без анимаций? Запиши экран, закинь в монтажку, подрежь, подгони размер и следи чтоб ничего нигде не поехало.

Экспорт анимаций из Figma. Источник: Figma

Теперь готовые фреймы с анимацией экспортируются прямо в видео или GIF. Доступные форматы – MP4, GIF, WebM и Animated SVG. Так же доступен экспорт в код и Figma MCP также поддерживается в Motion. Сайты-портфолио дизайнеры теперь прокачают одним движением.

Figma Agent для старта

Финальная killer-фича, по моему мнению – Figma Agent. Описываешь словами, какое движение хочешь, и агент расставляет ключи на таймлайне как первый черновик, дальше докручиваешь руками или продолжаешь промптить. Что-то сложное он вряд ли вывезет (по крайней мере пока что), но в рутине – расставить ключики, собрать что-то простое – сэкономит прилично времени.

Выводы

Будем честны: Figma кусанула жирную аудиторию Adobe – тех, кто в связке использовал Figma + After Effects. Для интерфейсной анимации, микровзаимодействий, состояний загрузки и hover-эффектов теперь не нужно никуда уходить и учить новый интерфейс – всё своё, родное.

Лучший способ научиться анимировать – начать анимировать. Не жди идеальных туториалов: открой любой свой макет, переключись в Motion, выбери элемент, кинь пресет и поиграйся с таймлайном.

Скоро в интернетах будет вал кривых анимаций, но появятся и достойные кейсы. Это нормальный этап любого нового инструмента. Главное, оказаться среди вторых и вдохновляться ими!