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

Figma Motion, представленный на Config 2026 24 июня, добавляет анимацию прямо в среду дизайна Figma. Раньше дизайнерам, которым нужно было передать движение — переходы, микровзаимодействия, анимированные компоненты, — приходилось покидать Figma ради After Effects, Rive, Framer или других инструментов, а затем возвращать результат в handoff. Figma Motion убирает этот шаг.

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

Пресеты анимации — fade, move, scale — дают стартовую точку. Их можно накладывать для одновременного воспроизведения или выстраивать последовательно, перетаскивая на таймлайне. Переменные для движения работают как токены стилей: команда определяет значения easing один раз, применяет их ко всей дизайн-системе и обновляет все экземпляры, меняя переменную. Для организаций, поддерживающих большие библиотеки компонентов, это означает, что поведение анимации можно контролировать так же, как уже контролируются типографика и цвет.

Анимированные компоненты переносят движение вместе с собой. Анимация наведения для кнопки, определённая в дизайн-системе, применяется везде, где используется этот компонент, — по всем файлам, без ручного повторного применения.

В Dev Mode разработчикам доступен полный таймлайн, а анимации экспортируются в форматах CSS, JSON и React через motion.dev. Дизайн-агент может генерировать предложения по ключевым кадрам на основе текстовых запросов — как отправная точка для дизайнеров, только начинающих работать с анимацией.

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