Анимация в Фигме. Как сделать из вашего сайта видеоигру

Добавление анимации и движущихся объектов несомненно выглядит крайне завораживающе при первом посещении сайта, но если перед твоими глазами постоянно скачет нечто, то это как минимум начинает вызывать дискомфорт, как минимум... Поэтому добавлять анимацию нужно очень аккуратно и точечно. О том где это делать и в каких объемах, мы и постараемся выяснить в этой статье. А поможет нам в этом Фигма. За одно выясним, нужно ли добавлять анимацию в макет или достаточно описать состояния Hover, Active и Focus.

Любая анимация в Фигме создается при помощи прототипов. То есть мы не можем увидеть анимационный переход в прямо в редакторе. Для просмотра созданного эффекта мы должны перейти в специальный режим просмотра, нажав на play.

Как многие знают, видео и различные анимационные мультфильмы создаются(раньше создавались) последовательной сменой кадров, где каждый новый кадр показывает измененное состояние текущей сцены.

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

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

Далее нам нужно задать 2 параметра: Порядок в котором будут меняться состояния и то каким образом одно состояние будет сменять другое.

Для того чтобы задать последовательность состояний, нужно:

1) Сделать каждую и страничку (состояние) фреймом.

2) Выбрать КНОПКУ на фрейме, с которого будет начинаться анимация.

3) Перейти на вкладку Prototype и добавить Interaction(плюсиком).

4) В настройках Interaction выбрать событие, которое будет тригером начала анимации (по умолчанию On click) и фрейм, на который мы перейдем, когда событие произойдет.

На этом всё. Теперь если вы нажмете на play и в открывшемся окне нажмёте на кнопку, то появится sidebar. Вот только появление будет резким. Для того чтобы добавить плавности переходу из одного состояния в другое, нужно задать тип перехода.

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

Специально для этих целей есть особый вид перехода Smart Animate.

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

Механика работы Smart Animate

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

Похожим образом мы можем создать и другие типы анимации (бегущую строку, анимацию текста или движения катера на вашем лендинге). Нужно просто представить все как последовательность состояний.

Анимация добавляется по 2-м главным причинам:

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

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

Альтернативы анимации

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

А вот что касается анимации в целом на сайте, здесь дела обстоят несколько иначе.

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

Основное предназначение анимации – это привлечение внимания. То есть вы можете сфокусировать взгляд пользователя контрастными изображениями или большими объектами. А можете двигающимися элементами. В идеале эти двигающиеся элементы должны привести взгляд пользователя по нужному вам пути в целевую точку (к кнопке купить или еще куда...). То есть анимации это в первую очередь инструмент UX, а не UI.

И как обычно о своих вариантах использования анимации приглашаю высказаться в комментариях ниже.