Как ,быстро и легко заанимировать кейс в Figma? / How to animate Behance case in Figma?

Подписаться 1,6 тыс.

Просмотров 37 тыс.

50% 1

В этом видео показала процесс анимации одного из моих кейсов на Behance. Рассказала, как можно сделать стильные и простые анимации прямо в Figma с помощью плагина Figmotion.
Буду очень благодарна за обратную связь.
Подписывайтесь на меня в Instagram - @shevchenkoui
И заходите в мой профиль на Behance - www.behance.net/marynashevchenko
Всех благодарю за внимание!
-----------------------------------------------------------------------
In this video I show the animation process of my Behance case. I demonstrate how you can make stylish and simple animations right in Figma using the Figmotion plugin.
I would be very grateful for your feedback.
Follow me on Instagram - @shevchenkoui
And here is my Behance profile - www.behance.net/marynashevchenko
Thank you for your attention!
#figma #figmaplugins #figmotion #figmalessons #design #webdesign #designcourse #ui #ux #uiux #uxui #uidesign #uxdesign #graphicdesign #behance #behancecase #animation #фигма #обучениефигма #урокидизайна #вебдизайн #фриланс #биханс #беханс

Опубликовано:

28 окт 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 113

@user-ln4uj6jv3r 2 года назад

Спасибо за видео ❤️ очень помогло. Долго искала как сделать бегущую строку, везде были видео только с помощью компонентом и смарт анимации, а у вас так просто, как нужно! ❤️

@MarinaShevchenko 2 года назад

Спасибо огромное за обратную связь! Мне очень очень приятно!

@user-jc2vg3ij1i Год назад

спасибо огромное! видео сделаны с любовью.

@MarinaShevchenko Год назад

И Вам спасибо огромнейшее за обратную связь ❤️❤️❤️ Меня это очень вдохновляет ❤️

@yulya3072 Год назад

Именно то, что я искала. Спасибо за труд

@MarinaShevchenko Год назад

И Вам спасибо огромное за обратную связь ❤️

@sunsunshin Год назад

Спасибо за видео! Еще не попробовала, но кажется, это тот туториал, который я искала 👍👍👍👍

@MarinaShevchenko Год назад

Спасибо Вам огромное за обратную связь 🙏❤️

@user-sm8wd8pf2w Год назад

Спасибо огромное! Всё чётко и понятно.

@MarinaShevchenko Год назад

И Вам спасибо за отзыв ❤️

@user-bz6nb8zo6f Год назад

Спасибо! Понятно, просто и для начала-самое то)

@MarinaShevchenko Год назад

И Вам спасибо большое за обратную связь ❤️

@user-fe5mj7hr4q 8 месяцев назад

Классную идею подкинула! ❤

@lildandy2839 Месяц назад

Ааааа спасибо ❤️ оч помогло

@suprro 2 года назад

Очень полезное видео, спасибо 🙌

@MarinaShevchenko 2 года назад

И Вам спасибо огромное за обратную связь ☀️

@DianaNukenova-ps2pp Год назад

Спасибо большое ☺️

@wotreplayslegend6936 Год назад

Классное видео, спасибо огромное

@MarinaShevchenko Год назад

И Вам спасибо огромное за обратную связь ☀️

@paulinafilimon6406 2 года назад

Спасибо большое!!! Очень полезно!

@MarinaShevchenko 2 года назад

И Вам спасибо огромное за обратную связь 🙏❤️

@KAPACNK_1 Год назад

Большое спасибо за видео! Отличный урок, все понятно объясняете👍 жду новых уроков по анимации😉

@MarinaShevchenko Год назад

Спасибо огромное за комментарий! Обязательно все будет 🩷

@naz5978 3 месяца назад

Thank you a lot🤩

@user-he8mp4cc5f 2 года назад

Спасибо вам большое !)

@MarinaShevchenko 2 года назад

И Вам спасибо большое за обратную связь ☀️

@user-fe5mj7hr4q 8 месяцев назад

Привет✋👋, Благодарю за урок!

@FF-sr9hy 2 года назад

Спасибо вам🙏🏻

@MarinaShevchenko 2 года назад

И Вам спасибо огромное ❤️

@Yana-lw4he Год назад

спасибо, полезно)

@colorful_mind Год назад

Крутое видео. Большое спасибо

@MarinaShevchenko Год назад

И Вам спасибо за обратную связь 🥰

@mariiakorneva3155 11 месяцев назад

Спасибо за урок! Вы очень понятно все объясняете!)) Не обращайте внимание на тех, кому не понятно, а то так совсем желание записывать видео отпадет, на всех не угодишь)) вероятно у них в принципе проблемы с работой в фигме 😅 в таких случаях надо им порекомендовать просто повторить за вами шаг за шагом

@etozhemaximqa3156 2 года назад

Вау, ты клёвая! Подписка! Продолжай развиваться и делать крутые проекты)

@MarinaShevchenko 2 года назад

Спасибо огромное 🥰 Так приятно!

@user-uc3qh8bn3g 2 года назад

Спасибо!

@MarinaShevchenko 2 года назад

❤️❤️❤️

@tanyazaec3176 2 года назад

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

@MarinaShevchenko 2 года назад

Спасибо огромное за обратную связь ❤️❤️❤️

@user-rk1rl6fl9q Год назад

Спасибо большое за видео,очень полезно,иду пробовать! для новеньких лучше уточнить,все-таки на 180 градусов нужно повернуть,не на 90 . полный круг до исходной точки это 360

@user-ym5gs9oj4f 2 года назад

Дякую Вам, дуже допомогли

@MarinaShevchenko 2 года назад

И Вам спасибо большое за обратную связь 💗

@oksanks Год назад

Шукала як зациклить текст та вибрала десь 4-5 відео і Ваше подивилась останнім. А треба було першим! Дуже дякую за повну інформацію. ПІдписалась

@MarinaShevchenko Год назад

Дуже дуже вдячна за такий відгук ❤️❤️❤️❤️

@Kovalenko_nails_art_ 2 года назад

❤️❤️❤️❤️

@MarinaShevchenko 2 года назад

💗♥️💗❤️💗

@user-hu7zq5bn6l 8 месяцев назад

спасибо за видео, у меня есть вопрос, как эту анимацию экспортировать в формате гифки?

@alinaberestnieva5347 9 месяцев назад

Марина, добрый день! Спасибо, вам за видео. Не могли бы вы уточнить. Вы сказали в идеале анимацию делать в нарезке (в слайдах). Т.е. сначала заанимировать, потом сделать слайд, и затем сохранить в гифку? Если нет уточните, пожалуйста, последовательность. Спасибо

@bogdankakavunets5144 Год назад

Расскажите ещё как такие вот макеты сохранять и публиковать в behance.

@MarinaShevchenko Год назад

Посмотрите вот это видео: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1WW-P8GhEmU.html

@Alex-fs9vl 7 месяцев назад

Спасибо за видео! Подскажите пожалуйста, может вы знаете сайт, где работу могут покритиковать?

@annamob9201 2 года назад

класс, жду еще видео. мини совет - пишите вместо ника в инсту - ссылку в инсту, так быстрее и удобнее Вас находить ;)

@MarinaShevchenko 2 года назад

Спасибо огромное за фидбек ♥️ Так приятно 💗 Очень хороший совет, я обязательно учту)

@user-rk1rl6fl9q Год назад

Подкажите,пожалуйста,А как гиф потом на беханс загружать?

@zta5960 2 года назад

Как раз разбирался с вопросом анимацией на бихансе, очень помогло) Можно задать вам вопрос в какой-нибудь соц сети или может вы консультации проводите?)

@MarinaShevchenko 2 года назад

Добрый день! Простите, пожалуйста, я только сейчас увидела Ваш комментарий. Конечно, пишите мне в Инстаграм, буду рада: @shevchenkoui

@snixaproduction 2 года назад

так а как сделать что б оно было не прерывно лупмоушн? как это делать?

@user-zs9tn6nb4x Год назад

А можно ли скачать с анимацией?

@artvoyage3107 2 года назад

Очень полезное видео, благодарю! Но подскажите, почему у вас вращение по часовой стрелке, а у меня в обратном направлении??

@MarinaShevchenko 2 года назад

Спасибо огромное за обратную связь ❤️ На самом деле такое часто бывает, что круг крутится не в ту сторону. Поэтому я нашла ещё один способ. Для этого нужно удалить вторую точку (Нажать на неё и выбрать Remove). Потом передвинуться к нужной секунде и вместо того, чтобы крутит надпись, как я показывала в видео, просто поставить точку, не меняя положение текста. Потом нажать на эту точку и вместо нуля поставить -360. Тогда круг будет крутиться по часовой стрелке. Я сниму обязательно ещё видео по этой теме)

@yuliyAK88 2 года назад

Добрый день Марина! Спасибо за очень полезное видео! Подскажите пожалуйста, после того как закончился процесс рендера, как сохранить дальше это гифку

@MarinaShevchenko 2 года назад

И Вам спасибо огромное за обратную связь 💖 Сохранить гифку можно после того, как полностью закончится рендер. Там возле всех кнопок сверху будет надпись View last render или Last update. Нужно просто нажать на нее и в новом окне откроется анимация. Просто нажмите по ней правой кнопкой мыши и выберете "Сохранить как". Если что-то не получится, пишите мне - @shevchenkoui (это мой ник в Инстаграме)

@user-cc2lv5vf5o Год назад

Получилась анимация. Вопрос готовую анимацию сразу с рендера загружать на биханс ?

@MarinaShevchenko Год назад

Ее нужно сначала сохранить себе на компьютер в формате GIF. Для этого просто нужно нажать на синюю надпись View last render

@user-bl2tf5jq8i Год назад

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

@natalidement5563 2 года назад

Вот это видео отлично поняла. Подскажите, пожалуйста, для новичков самое главное- как все аккуратно переместить/ в каком формате сохранить для Be? знаю, что в Xd просто формируется ссылка, а как в Figma? Thank you

@user-ln4uj6jv3r 2 года назад

Лучше в формате Gif)

@tauerwaz9352 9 месяцев назад

у меня не работает плагин((( открывается только в браузере и там не понятно как выбрать нужное и вообще что дальше, помогите может у кого то такое было

@user-ze8yl3ql8i 4 месяца назад

При рендере гифв написано что предназначено для 760 пикселей при выгрузке на Биханс очень узкая картинка

@nichnadahu 2 года назад

первый раз встечаю туториалы по дизайну со словами "как быстро и легко..", спасибо, это вддохновляет, надеюси у меня получится как у вас) вопрос: как разрезать кейс? я просто делаю отдельно несколько фреймов изначально. Хотелось бы сделать один полный, и уже потом его как-то разрезать. спасибо

@MarinaShevchenko 2 года назад

Спасибо огромное за обратную связь ❤️ Меня это тоже очень вдохновляет 💗 По поводу разрезки, я сначала все делаю в одном фрейме, потом его копирую и просто уменьшаю снизу, зажав ctrl

@nichnadahu 2 года назад

@@MarinaShevchenko уже нашла Вас на беханс, тому пишу українською. Дякую, це геніально :)

@MarinaShevchenko 2 года назад

@@nichnadahu И Вам спасибо огромное! Я очень счастлива получать такую обратную связь!

@yourmoria Год назад

привет, спасибо за понятное объяснения)) А если у меня не текст, а фрейм или АЛ, потому что в моей бегущей строке не только слова, но и иконки. Как быть? Figmotion этот фрейм (или Ал) автоматически разделяет.,

@MarinaShevchenko Год назад

Добрый день! И Вам спасибо за обратную связь! Просто в таком случае нужно сгруппировать иконки и слова в одну группу

@alexaz9170 2 года назад

Здравствуйте! Спасибо за видео, но такой вопрос. А как у нас в кейсе анимация работает, если мы загружаем работы как фото? Или как его загрузить после этого плагина?

@MarinaShevchenko 2 года назад

И Вам спасибо за обратную связь! После плагина, если нажать View last render в новом окне откроется анимация в формате GIF, ее нужно будет сохранить на компьютер. И потом отдельным блоком загрузить на Беханс. То есть она на Бехансе будет отображаться как анимация)

@user-bj6ox4hm7c 7 месяцев назад

Добрый вечер, спасибо за видео, подскажите пожалуйста, когда загружаю эту гивку на комп, она размером по ширеге 720рх, для биханса нужно хотя бы 1440, может знаете какие-то лайфхаки, так сказать, чтоб увеличить ширину гивки? уже всю голову себе сломала )))@@MarinaShevchenko

@kttimofeeva777 2 года назад

Спасибо большое за видео, очень полезно! Но у меня возникла одна проблема, анимация бегущая строка готова, нажимаю на RENDER, все сохраняется, но не обновляется и я не могу ее сохранить в новом окне при открытии, потому что все время пишет LAST UPDATE 0.314 и выдаёт ошибку при нажатии. Я уже перенажимала все кнопки, переделывала анимацию с нуля три раза, но ничего не даёт сохранить.

@MarinaShevchenko 2 года назад

Скорее всего что-то не так в самом процессе создания анимации. Я бы советовала в таком случае вообще обнулить анимацию. Для этого нужно нажать на каждую точку и выбрать Remove. А потом сделать все заново. И обязательно посмотреть, чтобы стояло две точки - одна на нуле и вторая в конце анимации. Перед тем, как нажимать Рендер обязательно нужно поставить красный ползунок на 0. Если не получится, пишите мне в Инстаграм @shevchenkoui Я буду рада помочь!

@user-st1ey9pt6b 2 года назад

Здравствуйте, Марина. Подскажите,пожалуйста, как сохранить проэкт из фигмы и внести его на беханс?

@MarinaShevchenko 2 года назад

Добрый день! Спасибо большое за комментарий. Я делаю свой кейс в Фигме шириной 1400px, а затем режу его и сохраняю кусочками в формате PNG, если это обычная картинка, или GIF, если это анимация. Потом на Беханс вставляю по кусочкам, тогда качество будет лучше. Если не получится, пишите мне сюда или в Инстаграм (@shevchenkoui). Буду рада помочь!

@user-st1ey9pt6b 2 года назад

@@MarinaShevchenko спасибо большое за ответ))

@anastasiyakomogortseva4607 10 месяцев назад

почему при экспорте гифки ширина фрейма меняется?

@MarinaShevchenko 10 месяцев назад

Помимо того, что я написала в предыдущем комментарии, может быть такое, что гифка слишком много весит. И браузер автоматически её сжимает. Я не знаю точно, как это можно поправить. Но может быть посмотреть настройки браузера. Хотя здесь может быть ещё дело и в оперативной памяти компьютера

@user-ll9mz5tg1p 2 года назад

Добрый день! Подскажите пожалуйста, как сделать круговую анимацию цикличной? Когда сохраняю в формате gif, она крутится, а потом начинает свое вращение снова, это не очень красиво смотрится..

@MarinaShevchenko 2 года назад

Добрый день! Во-первых, самое важное - проследить, чтобы вторая точка, которую Вы ставите в анимации для вращения, была примерно в той же позиции, что и первая. Второе, нужно обязательно поставить галочку возле Loop, когда нажимаете Рендер. Если нужно, я могу снять отдельный ролик конкретно по вращению букв. Дайте знать, если это интересно, я в ближайшее время сниму. Если будут какие-т вопросы, пишите мне в Инстаграм: instagram.com/shevchenkoui/

@user-ll9mz5tg1p 2 года назад

@@MarinaShevchenko Спасибо за ответ! Очень помогли

@mariester5 2 года назад

супер туториал. Очень тихий звук.

@MarinaShevchenko 2 года назад

Спасибо огромное за обратную связь ❤️

@Roman_851 2 года назад

Кстати, а куда рендер сохраняется? Процесс прошёл, а где сам гиф?)

@MarinaShevchenko 2 года назад

Для того, чтобы сохранить гиф на свой компьютер, после окончания рендеринга нужно нажать на голубую надпись View last render или Last update. В новом окне откроется Ваша гифка. Клацните по ней правой кнопкой мыши и нажмите Сохранить как.

@Roman_851 2 года назад

@@MarinaShevchenko Спасибо, ответ нашёл, но может кому тоже будет полезно. По началу думал, что при нажатии на «ссылку/кнопку» просто открывается окно привью, из которого не сохранить.

@MarinaShevchenko 2 года назад

@@Roman_851 Вам тоже спасибо за обратную связь! У них действительно это очень неочевидно сделано, я надеюсь, в будущем они это доработают)

@user-yi5lp3vb9z 2 года назад

Ребята, а как разрезать это полотно???

@MarinaShevchenko 2 года назад

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

@antoninadzyubiy3036 Год назад

очень тихое видео..ну очень. почти ничего не слышно.. а инфа полезная!

@MarinaShevchenko Год назад

Знаю, уже настроила микрофон. Спасибо большое за отзыв 😘

@user-ud8vb4kw8x 2 года назад

Очень тихий звук

@Roman_851 2 года назад

Видосы по анимации в фигме были бы полезны.

@MarinaShevchenko 2 года назад

Спасибо огромное за обратную связь ☀️ Буду делать больше таких видео)

@Sashad2003 2 года назад

90 градусов? Вы серьезно? 😢🤦

@nichnadahu 2 года назад

очень плохо слышно (

@MarinaShevchenko 2 года назад

Сама это вижу, вот сейчас занимаюсь этим вопросом. Спасибо большое за обратную связь!

@Nlina_ Год назад

Видео полезное, но вы очень тяжело объясняете

@MarinaShevchenko Год назад

Благодарю за обратную связь. Буду стараться упрощать) Но некоторые видео больше рассчитаны не на новичков

@GOrEFeST__ 2 года назад

Ничего не слышно👎

@MarinaShevchenko 2 года назад

Добрый день! Да, на этом видео получился звук не очень громкий. Но если выкрутить звук на максимум, то слышно нормально. Если у Вас есть вопросы по этому видео, пишите, я с радостью отвечу

@user-dc6eq9nr2n 2 года назад

@@MarinaShevchenko максимально выкрутил на ноуте настройки, еле слышно(

@Houston93 7 месяцев назад

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

@MarinaShevchenko 7 месяцев назад

Молодий чоловіче, ви ж можете зробити свій канал, де будете розповідати все краще і доступніше. Бажаю вам успіху з цим 🙏 І посміхніться, бо агресія точно не додасть вам енергії