Smart Animate и интерактивные компоненты

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

Резкие переходы выглядят дёшево. Smart Animate делает движение плавным почти бесплатно — нужно лишь одинаково назвать слои.

Два инструмента превращают прототип из набора слайдов в живой интерфейс: Smart Animate для плавных переходов и интерактивные компоненты для состояний прямо внутри компонента.

Как работает Smart Animate

Smart Animate сравнивает два фрейма и находит слои с одинаковыми именами. Затем плавно анимирует разницу между ними: положение, размер, поворот, прозрачность и цвет. Если слой «Карточка» в кадре 1 маленький слева, а в кадре 2 большой справа — Smart Animate сам нарисует движение между.

1. Сделайте два фрейма, где общий элемент назван одинаково (например Card).
2. В кадре 2 измените его положение или размер.
3. Свяжите кадр 1 → кадр 2 на вкладке Prototype.
4. В типе анимации выберите Smart animate, задайте кривую (Ease out) и длительность.

Smart Animate сопоставляет слои по имени

  Frame 1            Frame 2
  «Card» (слева)     «Card» (справа, крупнее)
       \___ одинаковое имя ___/
                |
        плавное движение между состояниями

Интерактивные компоненты

Интерактивный компонент анимирует переход между своими вариантами прямо в инстансе — например кнопка из Default в Hover без отдельных экранов:

1. Откройте набор вариантов кнопки (Default и Hover).
2. На вкладке Prototype в самом компоненте свяжите Default → Hover с триггером While hovering.
3. Свяжите обратно Hover → Default по Mouse leave.
4. Теперь любой инстанс этой кнопки сам подсвечивается при наведении.

Кривые ускорения (easing)

Качество анимации решает не только Smart Animate, но и кривая ускорения. Linear — равномерно, выглядит механически. Ease out — быстро стартует и плавно тормозит, самый естественный для появления элементов. Ease in — наоборот, для ухода. Ease in and out — для перемещений. Есть и пружинные кривые (Spring/Gentle/Bouncy) для живого, «физичного» движения. Подбор кривой и длительности — это уже искусство микроанимации.

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

Состояния и delay для автоплея

Интерактивные компоненты умеют не только hover. Триггер After delay в связке состояний позволяет делать автоматические анимации: спиннер-загрузчик, который сам крутится, или карусель, листающая слайды без участия пользователя. Связываете состояние с самим собой (или со следующим) через After delay — и получаете цикл. Это открывает целый класс «живых» элементов без единой строки кода.

Горячие клавиши

Частые ошибки

• Разные имена слоёв. Smart Animate сопоставляет по имени. «Card» и «Карточка 2» он считает разными — анимации не будет.
• Слишком длинная анимация. 200-300 мс обычно достаточно. Долгие переходы раздражают.
• Делают hover отдельными экранами. Для состояний кнопки используйте интерактивные компоненты, а не множить фреймы.

Совет профи: анимация служит понятности, а не зрелищности

Хорошая микроанимация незаметна — она помогает пользователю понять, что произошло: элемент плавно переехал, значит это тот же элемент в новом состоянии; панель выехала снизу, значит её можно смахнуть обратно. Плохая анимация кричит о себе, тормозит и раздражает. Поэтому держите переходы короткими (200-300 мс), используйте естественные кривые (Ease out для появления), и анимируйте смысл, а не всё подряд. Smart Animate силён именно в передаче непрерывности: один элемент превращается в другой на глазах пользователя. Чтобы он работал безупречно, держите имена и структуру слоёв идентичными в обоих кадрах. Сдержанная, осмысленная анимация — признак вкуса; избыток эффектов — признак неопытности. Меньше, но точнее.

Чек-лист

• Сделал переход Smart animate по одноимённым слоям.
• Подобрал кривую и длительность.
• Настроил интерактивный компонент с hover.
• Понимаю, почему важны одинаковые имена слоёв.

Итоги. Smart Animate плавно анимирует разницу между фреймами по совпадающим именам слоёв, а интерактивные компоненты добавляют состояния прямо в инстанс. Прототип становится живым. Дальше — продвинутая логика: переменные и условия в прототипах.