Анимация в 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. Заходим в режим прототипа и проводим стрелочки для соединения нужных фреймов и настраиваем параметры нашей анимации. Я очень долго тыкалась в настройках, пробуя различные варианты, потому что результаты получались очень неожиданными, а тьюториалы я не смотрела.
Шаг 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 и вставляем туда наш код.
Готово! Вы восхитительны! Любуемся нашим зацикленным видео без разноцветного плеера, аватарки ит.д. и пожинаем лавры!
Мою итоговую презентацию со всеми анимациями можно посмотреть здесь:
Благодарю за внимание и желаю вдохновения и качественных анимашек!
Очень классная статья, спасибо! Подробно и по делу:)
Благодарю за высокую оценку! Надеюсь, что это многим поможет делать анимацию в фигме и постить её на беханс без тех мучений, через которые прошла я)))))))))))
Очень красивая анимация и лайк за статью!
Спасибо, очень приятно =))
Спасибо огромное за статью!Эта статья поможет многим!Огромный респект👍
Большое спасибо! : ) И мне тоже поможет, чтобы не забыть, как это всё делать%)))))))
Выглядит супер.
Но можно было бы доработать. И я сначала подумал, что это разные виды духов в ленте, а в центре их составляющие перечисляются.
То есть лента является прокруткой. Я бы так и сделал. И количество позиций ароматов увеличить в ленте, и прокрутку, и анимацию оставить. Лишнее это наводить на кипарис и смотреть как он выглядит. Просто в треугольнике должны быть уже готовые видео с составляющими. Наводим на картинку, скролим ленту, выпадает аромат "такой-то", рядом выпадает описание, а в центре уже видео всех компонентов. А если щелкнуть, то откроется карточка с подробным описанием.
На мой взгляд было бы прикольней. ИМХО. Не претендую на истину.