Smart animate в Figma


Smart animate — вид анимации в прототипах Фигмы, который создает плавные изменения параметров при событиях вроде наведения мыши и тому подобных. 

Smart Animate - исходники
Smart Animate — исходники

Особенностью smart animate является то, что она сама находит все свойства, которые изменялись, для всех элементов фрейма. Таким образом вместо настройки анимации каждого элемента вы можете доверить это Figma, выбрав «умную анимацию». 

Важно: для правильной работы smart animate необходимо, чтобы элементы в исходном слое и в конечно имели одинаковые названия. Если они будут отличаться, Фигма будет считать их разными элементами и анимация будет отличаться. 

Пример

Два фрейма с двумя элементами внутри: в каждом есть прямоугольник «background» и кнопка (Auto Layout) «button»

Smart Animate - названия слоев
Smart Animate — названия слоев

Для добавления анимации при наведении (hover) требуется выполнить следующие действия:

  1. Выбрать исходный фрейм (Frame 1)
  2. В панели Prototype (справа) указать в Interaction триггер While hovering
  3. Указать событие Swap with 
  4. Выбрать конечный фрейм (Frame 2)
  5. Выбрать Animation «Smart animate»
Smart Animate - настройки
Smart Animate — настройки

Работа прототипа на видео:

Что будет, если нарушить название элементов

Изменим название кнопки. Теперь это два разных элемента, и в данном случае вместо изменения положения и стилей исходной кнопки будет происходить исчезание первой кнопки и появление второй кнопки:

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<