ГАЙД. Анимация переключения Галереи в Figma

В этой статье я подробно расскажу как сделать анимацию переключения фото в Галереи с помощью штатных средств Фигмы. Предистория. Я задалась целью получить флажок на проект в Behance. Проанализировав работы победителей, я поняла что ни одна работа не обходится без эффектной анимации. Чтобы создать вау-эффект и яркое впечатление от своего проекта, я потратила целый вечер чтобы понять как сделать качественную и простую анимацию. И вот делюсь с вами своими действиями: Внимание очень полезный лайфхак 💡 Если вы хотите, чтобы фотографии можно было листать справа налево, а верх и низ вашего экрана оставались статичными, как в моем случае:

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

При использовании режима Smart Animate - Верх и низ остаются неизменными, а фотографии трансформируются одна в другую, потому что Фигма на каждом фрейме ищет одинаково названные объекты и настраивает анимацию между ними. Она «видит», что объекты «описание товара», «выбор цвета», кнопки и иконки повторяются, поэтому оставляет их неизменными, а «товар 1» превращается в «товар 2».

Я еще добавила к своим экранам иконки «вперед» и «назад». И поставила их одинаково, назвала одинаково, и в порядке элементов во фрейме они стоят одинаково во всех фреймах:

Далее настраиваем между фреймами анимацию Smart Animate:

1. Открываем вкладку Prototype (справа сверху от рабочей области)

2. Как только перешли во вкладку Prototype, у нас между фреймами появляются плюсики.

3. Анимация в Фигме работает так: есть два фрейма, мы делаем переход из одного в другой. Вот этот переход мы будем анимировать.

4. Нажимаем на иконку «вперед» в фрейме 1, далее на плюсик и тянем стрелочку на фрейм 2. Открывается панель настроек анимации.

5. Параметры анимации. В панеле настройки анимации всего 3 раздела: триггеры, события, настройки анимации.

Триггер — это событие, которое запускает анимацию. По умолчанию стоит onClick, то есть когда мы нажимаем мышкой на первый элемент — запускается анимация и появляется второй. В моей анимации триггер — нажатие мышкой на иконке стрелок «вперед» или «назад». Действие. По умолчанию у нас стоит Navigate to — перейти к другому фрейму (объекту). Тут все просто, нажал на А, перешел к Б. Настройки анимации. Мы выбираем Smart Animate и Фигма сама подбирает оптимальную анимацию. Согласитесь, что это очень удобно.

Еще раз повторю:

Превью каждой анимации показывает Фигма самостоятельно. Для каждой можно указать длительность в милисекундах и выбрать тип изинга. Изинги (от англ. easing — «ослабление», «смягчение») — это настройки ускорения и замедления анимации. Настройка изингов позволяет анимировать объекты на экране так, чтобы они вели себя, как мы привыкли в жизни.

Вот какие изинги есть в Фигме: • Linear — движение будет равномерным • Ease in — анимация начнется медленно и будет ускоряться к концу • Ease out — анимация начнется быстро и будет замедляться к концу • Ease in and out — анимация начнется медленно, ускорится и затем снова замедлится • Ease in back — анимация отскакивает назад от исходной точки, а затем ускоряется • Ease out back — анимация начинается быстро, затем замедляется и проскакивает вперед от конечной заданной точки • Ease in and out back — анимация медленно отскакивает назад от исходной точки, ускоряется и снова замедляется, проскакивая вперед от конечной точки • Custom — можно настроить ускорения самостоятельно, потянув за точки на кривой

Я использовала Linear и базовые 300 ms.

Как выгрузить анимацию из Фигмы в Беханс?

Я делаю по старинке-Проигрываю анимацию в режиме просмотра, записываю видео экрана, сохраняю видео и/или делаю гифку, прикладываю к макету. На Маке запись экрана вызывается кнопками cmd+shift+5. Получившееся видео можно перегнать в гиф в любом онлайн-конвертере, можно оставить в формате видео. Но для беханс мне больше нравится гиф-формат, потому что при просмотре проекта, не надо включать анимацию, она постоянно работает, в отличие от видео-формата анимации. Ещё могу посоветовать бесплатную и простую программу Giphy, но она только под мак.

Заключение

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