Анимация в Figma от 0 до постинга на Behance

Новичок в веб-дизайне? Восхищаешься красивыми анимированными кейсами на Behance, но не знаешь, как сделать анимацию и добавить видео в свою презентацию? Тогда эта статья специально для тебя: я пошагово расскажу, что надо делать!

Проблемы

При подготовке презентации своего нового проекта для Behance я столкнулась с такими проблемами:

  • Идея моей анимации слишком сложная, и ни один тьюториал не смог мне подсказать, как воплотить её в реальность;
  • Видеохостинг Vimeo изменился и перестал делать, как я хочу;
  • На Behance видео постится с дефолтным плеером и выглядит некрасиво.

Моя анимация

Я делала лендинг в рамках учебного проекта Логомашины. Тема «мужская парфюмерная вода Feromon 47». На Behance уже, как минимум, больше сотни концептов на эту тему! Поэтому мне необходимо было сделать что-то необычное и, конечно же, создать качественную интересную анимацию. Вот самая сложная из них:

Как сделать

Конечно, мне проще было сделать её в After Effects, но у меня была идея-фикс научиться, наконец, анимации именно в Figma!

Шаг 1. Придумываем крутую идею для нашей анимации. Если в голову ничего крутого не приходит, то смотрим референсы на https://www.awwwards.com/, например. Я подсмотрела там идею для анимации заголовков, но, в итоге, от неё отказалась.

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

Шаг 2. Делаем макет будущей анимации в Figma.

Шаг 3. Далее смотрим на Youtube тьюториалы по анимации в Figma в зависимости от того, что и как именно хотим заанимировать, например:

Шаг 4. Получаем просветление и понимание того, как нам надо дорисовать макет для анимации, чтобы он работал, и делаем это.

Шаг 5. Заходим в режим прототипа и проводим стрелочки для соединения нужных фреймов и настраиваем параметры нашей анимации. Я очень долго тыкалась в настройках, пробуя различные варианты, потому что результаты получались очень неожиданными, а тьюториалы я не смотрела.

Чтобы фрейм треугольника не перекрывал нижние карточки делаем Flattern (правой кнопкой мыши). Если это тоже не помогает, то рисуем хитрый маленький невидимый треугольник поверх большого треугольника, и к нему привязываем анимацию!

Шаг 6. Добиваемся того, чтобы наша основная анимация работала, как было задумано. Например, в своей анимации я выбрала мгновенную (instant) анимацию по наведению (while hovering), чтобы при наведении мышки на каждую из фотографий гифка в треугольнике сменялась мгновенно. Приятным и неожиданным сюрпризом для меня стало то, что гифки реально проигрываются.

Шаг 7. Ни в коем случае не пытаемся проделать то же самое с заголовками - ничего не получится, проверено! Если у вас такая же многоуровневая анимация, как в моём проекте, то для заголовков необходимо использовать уже другой вид анимации в Figma - анимацию через компоненты. Спасибо кураторам Логомашины за то, что подсказали мне поискать тьюториалы именно на эту тему: https://youtu.be/ZQdmwpbe1fM

Шаг 8. Получаем новое просветление, в моём случае готовим 2 варианта заголовков: невидимые (0% непрозрачности) и видимые (100% непрозрачности), потому что заголовки должны мягко проявляться. Выделяем их вместе и оборачиваем в компоненты (create multiple components). Затем создаём наши варианты (create as variants). Я назвала варианты «Default» и «Normal» соответственно.

Шаг 9. Настраиваем несложную анимацию в режиме прототипа.

Шаг 10. Кликаем на варианты «Default» и с зажатым Alt дублируем их в нужные места нашего макета с основной анимацией. Лично я сперва продублировала их на отдельный фрейм для удобства и потом уже с него перетащила эти невидимые заголовки на места макета, где должна была проявиться моя анимация заголовков. Фото не прикладываю, потому что они, всё равно, невидимые.

Шаг 11. Готово! Вы прекрасны! В режиме прототипа проигрываем нашу анимацию, наслаждаемся и пожинаем лавры.

Подготовка видео

Шаг 1. В режиме full screen делаем запись экрана, например, с помощью Loom (расширение для Google) и загружаем видео на компьютер.

Шаг 2. Далее в Photoshop обрезаем наше видео, а также кадрируем. Это можно сделать и в онлайн-редакторах, но не все они кадрируют или показывают изображение покадрово, поэтому теперь я делаю это в Photoshop.

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

Шаг 4. Также я ускорила своё видео до 250% и экспортировала в mp4.

Выгрузка видео на видеохостинг

В этот раз именно выгрузка на видеохостинг затормозила мой процесс и повергла в уныние, потому что всё на Vimeo изменилось, и на бесплатном тарифе у меня ничего не получалось. Перед сном я почитала «Размышления» Марка Аврелия и смирилась с тем, что в моей презентации не будет анимации, ведь, всё равно, «все мы скоро распадёмся на первостихии, и память о нас сотрётся». Однако наутро всё волшебным образом получилось!

Для того, чтобы на Behance наше видео было нужного размера и стало зацикленным, необходимо сперва выгрузить его на какой-нибудь видеохостинг. Я использую Vimeo, потому что там можно бесплатно выставить свои опции для видео.

Хочу предупредить, что интерфейс Vimeo изменился плюс теперь из России им можно полноценно пользоваться только с VPN!

Для того, чтобы выставить нужные опции, заходим справа в расширенные настройки (advanced settings).

Далее, слева, в разделе General убираем галочку «People can add to collections».

Идём в раздел Embed и убираем галочки «Like», «Watch later», «Share». Там же убираем галочки с «Profile picture», «Title», «Byline».

Это нужно для того, чтобы на Behance мы не видели дефолтный плеер с нашей аватаркой, названием видео, нашим именем, т.е., чтобы было красиво. Сохраняемся. Если найдём кнопку Save. Потому что, лично у меня, она постоянно куда-то мигрирует. Например, она может проявиться в разделе General. Главное, без паники, как учит нас Марк Аврелий!

Выгрузка видео на Behance

Шаг 1. Копируем ID нашего видео (номер видео виден в ссылке прямо над видео). Вставляем ID в следующий embed-код перед знаком вопроса:

<iframe src="https://player.vimeo.com/video/776363129?badge=0&autopause=0&muted=1&autoplay=1&loop=1&player_id=0&app_id=58479" width="1920" height="1080" frameborder="0" allowfullscreen></iframe>

Шаг 2. Шагаем на Behance и в нашей презентации выбираем Embed и вставляем туда наш код.

Готово! Вы восхитительны! Любуемся нашим зацикленным видео без разноцветного плеера, аватарки ит.д. и пожинаем лавры!

Мою итоговую презентацию со всеми анимациями можно посмотреть здесь:

Благодарю за внимание и желаю вдохновения и качественных анимашек!

0
27 комментариев
Написать комментарий...
Исакова Екатерина

Очень классная статья, спасибо! Подробно и по делу:)

Ответить
Развернуть ветку
Christina Talvir
Автор

Благодарю за высокую оценку! Надеюсь, что это многим поможет делать анимацию в фигме и постить её на беханс без тех мучений, через которые прошла я)))))))))))

Ответить
Развернуть ветку
Исторический кран

Очень красивая анимация и лайк за статью!

Ответить
Развернуть ветку
Christina Talvir
Автор

Спасибо, очень приятно =))

Ответить
Развернуть ветку
Roktur

Спасибо огромное за статью!Эта статья поможет многим!Огромный респект👍

Ответить
Развернуть ветку
Christina Talvir
Автор

Большое спасибо! : ) И мне тоже поможет, чтобы не забыть, как это всё делать%)))))))

Ответить
Развернуть ветку
Виктор Шулика

Выглядит супер.
Но можно было бы доработать. И я сначала подумал, что это разные виды духов в ленте, а в центре их составляющие перечисляются.
То есть лента является прокруткой. Я бы так и сделал. И количество позиций ароматов увеличить в ленте, и прокрутку, и анимацию оставить. Лишнее это наводить на кипарис и смотреть как он выглядит. Просто в треугольнике должны быть уже готовые видео с составляющими. Наводим на картинку, скролим ленту, выпадает аромат "такой-то", рядом выпадает описание, а в центре уже видео всех компонентов. А если щелкнуть, то откроется карточка с подробным описанием.
На мой взгляд было бы прикольней. ИМХО. Не претендую на истину.

Ответить
Развернуть ветку
Christina Talvir
Автор

Виктор, большое спасибо за подробную профессиональную обратную связь! : )
Основной моей задачей было сделать лендинг, и анимация там не предусматривалась, и сроки уже поджимали)))))
Плюс анимацию в Фигме я делала в первый раз в жизни, поэтому я решила упроситить задачу, чтобы, вообще, понять принцип этой анимации)))
Ах, были бы эти видео! Я эти-то видео с трудом нашла, сделала гифки;) А идея интересная, конечно, в следующий раз что-то подобное попробую сделать, поможете? %)))))))))))

Ответить
Развернуть ветку
Виктор Шулика

А эти видео надо было в primer Pro свести в один клип, как и саму презу, и проблем было бы меньше с дальнейшими выкладками на хостинги и работа с премьером в опыт)

Ответить
Развернуть ветку
Christina Talvir
Автор

Спасибо за рекомендацию, узнаю подробнее про Premiere Pro =)) Я так понимаю, это что-то вроде фотошопа, но более заточенное под видео?))

Ответить
Развернуть ветку
Виктор Шулика

Это проф. (ну почти проф.) редактор видео.

Ответить
Развернуть ветку
Виктор Шулика

Чем смогу)))

Ответить
Развернуть ветку
Яна Шадурская

Спасибо за такую подробную статью! То, что нужно! Буду пользоваться!

Ответить
Развернуть ветку
Christina Talvir
Автор

Благодарю! Надеюсь, всё получится! : )

Ответить
Развернуть ветку
Плохой пришелец

круть

Ответить
Развернуть ветку
Christina Talvir
Автор

пасиб

Ответить
Развернуть ветку
Михаил Кондратьев

ну вообще выглядит очень даже стильно

Ответить
Развернуть ветку
Christina Talvir
Автор

Спасибо) анимация или статья?))

Ответить
Развернуть ветку
Лидия Паринова

Спасибо. Так всё подробно расписано. Обязательно попробую применить. Подписалась! Жду новых статей по Фигме.

Ответить
Развернуть ветку
Christina Talvir
Автор

Благодарю : ) Конечно, надеюсь, что всё получится!

Ответить
Развернуть ветку
Анастасия Кудреватых

благодаря статье, я узнала, как вставлять видео в кейс! ♥ \слёзы счастья\

Ответить
Развернуть ветку
Stella

Здравствуйте!) Прекрасная статья, спасибо Вам огромное!)
У меня только один вопрос, возможно ли сейчас зарегистрироваться на Vimeo? У меня никак не получается, пишет, что требуется ввести допустимый e-mail... Пробовала и почту Гугл и другие..

Ответить
Развернуть ветку
Vip Shop

кедр с кипарисом перепутаны

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Anna Sk

Может кто поможет, не могу врубиться. Экспортировала гиф из фигмы, всего 1 мб и ширина 1400, но он не двигается на Be. При чем пока грузит на сайт, все ок, но сразу после загрузки становится статичной картинкой.

Ответить
Развернуть ветку
Anna Sk

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

Ответить
Развернуть ветку
Вадим Паранин

Учите афтер) фигма это не про анимацию)

Ответить
Развернуть ветку
Christina Talvir
Автор

Благодарю за дельный совет! Но у меня не было задачи делать анимацию в аффтере (умею), у меня была задача освоить анимацию в фигме : )

Ответить
Развернуть ветку
24 комментария
Раскрывать всегда