Тёмный

Микро анимации (smart animate) в Фигме, которые удивят ваших клиентов! 

Сергей Чирков
Подписаться 11 тыс.
Просмотров 66 тыс.
50% 1

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

 

22 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 159   
@Emily-zx3rp
@Emily-zx3rp Год назад
Очень круто и доступно объясняете) спасибо вам за ваше творчество
@Chyrkov
@Chyrkov Год назад
Благодарю!😉 рад, что нравится!
@romanbukarev6282
@romanbukarev6282 3 года назад
Сергей, спасибо. Все получилось. Применяю в работе.
@Chyrkov
@Chyrkov 3 года назад
Отлично!) рад, что помог!
@SevereaMr
@SevereaMr 3 года назад
Ш И К А Р Н О ! ! ! Все попробовал. Все работает)) Супер!
@Chyrkov
@Chyrkov 3 года назад
Огонь!!)) рад, что получилось!)
@deni_kondrashkin
@deni_kondrashkin 2 года назад
Спасибо за хороший контент) Правда если все делать в фрейме и заклиповать контент, то маска не нужна) А элементы за границы фрейма выносить с пробелом (чтоб они не вылетали из самого фрейма). Но в любом случае урок полезный✔
@Chyrkov
@Chyrkov 2 года назад
Спасибо за комментарии!)
@gOpikOrnGameWoT
@gOpikOrnGameWoT 21 день назад
Это всё хорошо конечно, самостоятельные кнопочки, но как эту срань пришить в другом фрейме? У меня просто переключения между фреймом лендинга происходит и кнопкой. Убираю кнопку из фрейма лендинга, она спокойно проигрывается. Я сразу вспомнил почему я забросил эту анимацию
@sergioyurev
@sergioyurev 3 года назад
Спасибо, Сергей! Было очень полезно👍
@Chyrkov
@Chyrkov 3 года назад
пожалуйста!) рад, что понравилось!
@kristopop2116
@kristopop2116 3 года назад
Интересно, хоть и изучаю фронт-энд разработку. Молодец)))
@Chyrkov
@Chyrkov 3 года назад
отлично!) думаю многим было бы интересно если поделишься опытом как такое делать на фронте)
@ПолинаРадуга
@ПолинаРадуга 2 года назад
Спасибо! Рада что вас нашла, полезно и доходчиво доносите информацию
@Chyrkov
@Chyrkov 2 года назад
Спасибо большое!!! Рад, что нравится!)
@Benks_benks
@Benks_benks 2 года назад
Полезный урок, спасибо большое! В восторге от первой анимации. Сверила настройки, делала по видео, но вторая анимация не вышла так плавно, как у вас. Я правильно поняла, что во втором случаем, анимация без маски???
@Chyrkov
@Chyrkov 2 года назад
Спасибо за отзыв! Вы про бургер? Да, маска там не нужна. Плавность достигается за счёт кривыми custom микро анимации в настройках smart animate.
@nova-kuroki
@nova-kuroki 9 месяцев назад
Спасибо за видео! Мне очень помогло.
@Chyrkov
@Chyrkov 8 месяцев назад
Я рад! Спасибо за отзыв!
@foot4ce241
@foot4ce241 5 месяцев назад
Спасибо большое) Понял, как анимировать карточку при наведении на неё!
@Chyrkov
@Chyrkov 5 месяцев назад
Рад, что все получилось!
@nemoua7137
@nemoua7137 2 года назад
супер. очень спокойная, ясная подача.
@Chyrkov
@Chyrkov 2 года назад
Спасибо большое!)
@azamdesigner3414
@azamdesigner3414 8 месяцев назад
Круто спасибо
@Chyrkov
@Chyrkov 7 месяцев назад
Рад, что понравилось!
@robotos5198
@robotos5198 3 года назад
Я тоже люблю делать анимашки в фигме. Пытался изучить афтер эффект - не понравилось, хотя всё получалось. Афтер подходит для каких-то крутых анимаций, которые пока мне не нужны. А ты как к афтеру относишься?
@Chyrkov
@Chyrkov 3 года назад
Афтер все же полноценный редактор для создания анимаций. Это очень мощный инструмент в котором можно создавать сложные заставки, мультики и тд. Анимация в фигме это все больше для демонстрации прототипа, но каких-то супер сложных вещей в ней не сделать. Плюс ты не можешь экспортировать анимации в видео файл например.
@user-tk6go6go2t
@user-tk6go6go2t 2 года назад
@@Chyrkov как экспортировать?
@Chyrkov
@Chyrkov 2 года назад
@@user-tk6go6go2t можно сделать запись экрана
@КсенияТрушакова
@КсенияТрушакова 10 месяцев назад
Спасибо огромное! Сижу на работе , сделала все задачи , решила прокачаться и поучиться новому ) сделала все сходу вместе с вами ) лид похвалил ! 😁
@Chyrkov
@Chyrkov 9 месяцев назад
Отлично!))) приятно, что проводите с пользой время на работе за просмотром моих видео!)
@JamesBond-jf4ni
@JamesBond-jf4ni 2 года назад
это анимация просто для демонстрации или ее как то можно использовать в верстке потом?
@Chyrkov
@Chyrkov 2 года назад
В данном случае это конечно демонстрация, но для клиента и разработчиков вам в любом случае нужно показать как она должна работать. В фигме это сделать проще чем в афтере.
@Varyaq7
@Varyaq7 Год назад
Подскажите, это функци на платной подписке идет?
@Chyrkov
@Chyrkov Год назад
Нет, все доступно в бесплатной лицензии!😉
@1975viktoria
@1975viktoria Год назад
Добрый день, Сергей! Хороший канал, недавно нашла Вас. Очень нравится подача интересных фишек за короткое время. Спасибо большое! Для меня проблема с таблицами в фигме. Подскажите, как все таки просто делать таблицы и быстро!?
@Chyrkov
@Chyrkov Год назад
Добрый день, Виктория! Благодарю за отзыв, рад, что нравится!:) таблицы легко делать с помощью auto layout. У меня есть видео про список контактов, там принцип тот же: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-s1qdgCdaub0.html
@1975viktoria
@1975viktoria Год назад
@@Chyrkov Спасибо! Смотрю Ваши уроки с удовольствием!!!
@zemlyak4672
@zemlyak4672 Год назад
Спасибо за полезную информацию и хорошую подачу)
@Chyrkov
@Chyrkov Год назад
Спасибо за отзыв!) с наступающим!)
@nadejdamalih7680
@nadejdamalih7680 Год назад
Сергей а где ты взял корзинку ,поподробней я новичок чайник
@Chyrkov
@Chyrkov Год назад
Готовые можно взять на стоках бесплатных и платных. Также есть плагины в фигме которые позволяют вставлять иконки готовые бесплатно. Например icons8
@glock852
@glock852 2 года назад
Очень красивая анимация. Но остались вопросы (я новичок) - как эту кнопку использовать на макете? (т.е. вместо кнопки, там целая конструкция, как разместить уже в действующий прототип к примеру сайта или приложения?
@Chyrkov
@Chyrkov 2 года назад
Очень просто! Вы делаете ее интерактивным компонентом и вставляете в макет вашего сайта или приложения. Потом она будет видна в прототипе в макетах. Подобный пример у меня есть в видео, где показываю как сделать меню приложения.
@user-tk6go6go2t
@user-tk6go6go2t 2 года назад
@@Chyrkov отправьте пожалуйста ссылку
@Chyrkov
@Chyrkov 2 года назад
@@user-tk6go6go2t ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Qm14S8Nlxpw.html
@kamranmakh
@kamranmakh Год назад
огромная благодарность автору, салам из узбекистана))
@Chyrkov
@Chyrkov Год назад
Пожалуйста!)) рад, что было полезным!)
@ГалинаМилюкова-к2ж
@ГалинаМилюкова-к2ж 5 месяцев назад
Спасибо, вы супер!!
@Chyrkov
@Chyrkov 5 месяцев назад
Спасибо ☺️
@МихаилКоломиец-б5ь
Спасибо! Очень круто!
@Chyrkov
@Chyrkov 2 года назад
Спасибо за комментарий!)
@kansler_lss
@kansler_lss Год назад
Я новенький в этом деле, и у меня есть вопрос. Зачем в первом варианте делать маску ? и почему её нет во втором случае с бургером.
@Chyrkov
@Chyrkov Год назад
Привет!) с помощью маски мы можем скрывать какие-то элементы. В бургере нам скрывать нечего)
@kansler_lss
@kansler_lss Год назад
@@Chyrkov Спасибо )
@im_power
@im_power 2 года назад
Можно ли готовую анимацию, компонентом, как-то использовать в разных фреймах? Пробовал, что-то не выходит (
@Chyrkov
@Chyrkov 2 года назад
Да конечно! Вы делаете интерактивный компонент с двумя вариантами и вперёд)) у меня на канале есть видео как это делать.
@im_power
@im_power 2 года назад
@@Chyrkov Дайте ссылку пожалуйста
@Chyrkov
@Chyrkov 2 года назад
@@im_power Интерактивные компоненты в Figma, варианты использования ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Mf0Ft1PoWEU.html
@ЮлияГражданкина-я7э
Спасибо!
@Chyrkov
@Chyrkov Год назад
Пожалуйста!)
@assenova_
@assenova_ Месяц назад
Спасибо
@Chyrkov
@Chyrkov Месяц назад
Пожалуйста!
@itsquale
@itsquale 2 года назад
Спасибо за твой контент! Всё понятно и просто) Подписалась просто сходу 😁
@Chyrkov
@Chyrkov 2 года назад
Супер) спасибо!) рад, что понравилось)
@ai-bloggers
@ai-bloggers 2 года назад
Это даже больше, чем охеренно 👊🏻
@Chyrkov
@Chyrkov 2 года назад
✊ спасибо!
@АнтонЛиходеев-с1ъ
классный видос, информативно)
@Chyrkov
@Chyrkov Год назад
спасибо за отзыв)) удачи!)
@ИннаЖбанова-у3в
@ИннаЖбанова-у3в 3 года назад
🔥 красотища какая)
@Chyrkov
@Chyrkov 3 года назад
Спасибо!) дальше больше!)
@АртурОсипов-е8у
@АртурОсипов-е8у 2 года назад
Спасибо за хороший материал
@Chyrkov
@Chyrkov 2 года назад
Спасибо за отзыв!)
@user-bond007el
@user-bond007el 2 года назад
где скачать русскую версию или как англ версию перевести на рус?)) есть ли видео об этом? спасибо
@Chyrkov
@Chyrkov 2 года назад
Русский версии фигмы нет.
@UyriyMarkin
@UyriyMarkin Год назад
про бургерное меню непонятно.....как его разместить в другие проекты? или как его создать чтоб он светился фиолетовым из пред видео....непонятно как его собрать в другом проекте не получается по этому уроку
@Chyrkov
@Chyrkov Год назад
Элементарно. Вы создаете интерактивный компонент с вариантами, затем вставляете копию дефолтного варианта во все нужные макеты где нужен этот элемент
@7615757
@7615757 3 года назад
Привет от однокурсницы МО :) Спасибо за качественные уроки! Подскажи, пожалуйста, экспорт такой анимации в Figma в каком формате будет?
@Chyrkov
@Chyrkov 3 года назад
Привет привет!)) экспортировать из Figma можно в gif. Саму анимацию разрабы сами уже пилят)
@7615757
@7615757 3 года назад
@@Chyrkov Спасибо!!
@user-tk6go6go2t
@user-tk6go6go2t 2 года назад
@@Chyrkov что нужно перед этим сделать?
@Chyrkov
@Chyrkov 2 года назад
@@user-tk6go6go2t собрать макет и сделать анимацию
@ШохинаШарапова-ы6и
@ШохинаШарапова-ы6и 5 месяцев назад
спасибо вам!
@Chyrkov
@Chyrkov 5 месяцев назад
Пожалуйста 🙂
@АртурАпкарян
@АртурАпкарян 2 года назад
Спасибо
@Chyrkov
@Chyrkov 2 года назад
Пожалуйста!)
@Muhammaddiyor-x4h
@Muhammaddiyor-x4h Месяц назад
Крутаааааааааа, обожаю тебя)
@Chyrkov
@Chyrkov Месяц назад
❤️
@svetlanashus
@svetlanashus 3 года назад
Спасибо, здорово!
@Chyrkov
@Chyrkov 3 года назад
Пожалуйста!)
@vladimirgololobov4939
@vladimirgololobov4939 2 года назад
Добрый день, а как можно экспортировать данную анимацию?
@Chyrkov
@Chyrkov 2 года назад
добрый день! вы можете экспортировать анимацию в гиф используя плагин, например Export GIF. Чтобы сделать такую анимацию в приложении или сайта понадобиться разработка.
@alexstar8050
@alexstar8050 2 года назад
Привет очень приятная и информативная подача информации это одназначно лайк и подписка )))Щас буду пробывать первый раз делать анимацию фигме 😃
@Chyrkov
@Chyrkov 2 года назад
Уверен все получится!) спасибо за приятный отзыв!)
@АлександрЭрендженов-в2ь
Спасибо большое! Знать бы ещё как вместе с этим бургером чтобы справа налево шторка выезжала
@Chyrkov
@Chyrkov 2 года назад
Пожалуйста!) у меня на канале есть видео о том как это делать 😉
@ВячеславРубчинский-з6е
БОЖЕ МОЙ, ТЫЫ ЛУЧШИЙ!!!!!!!!!!!!!!!!!!!!
@Chyrkov
@Chyrkov 2 года назад
Благодарю!!!!))))
@user-c0000
@user-c0000 Год назад
Как в Figme создать анимированные обложку маркетплейс?
@Chyrkov
@Chyrkov Год назад
Вы можете сделать анимацию Figma, записать видео экрана с этой анимаций и потом выложить это видео как обложку товара.
@OzbegimMarketing
@OzbegimMarketing 2 года назад
Как всегда круто!
@Chyrkov
@Chyrkov 2 года назад
Спасибо)
@sergshiii
@sergshiii 3 года назад
Сергей, привет! Всё настроил по инструкции, но смарт анимация не отрабатывает. В чем может быть проблема?
@Chyrkov
@Chyrkov 3 года назад
привет! сложно так понять. Что именно не работает? Не запускается прототип или самой анимации нет?
@sergshiii
@sergshiii 3 года назад
@@Chyrkov Прототип запускается и анимация работает, но кастомная анимация не срабатывает.
@Chyrkov
@Chyrkov 3 года назад
Точно сделали как в видео настройки? Пришлите ссылку сюда без .ком в домене
@UyriyMarkin
@UyriyMarkin Год назад
само посебе оно получаеться....а как его внедрить в другой проект в само мобильное приложение?
@Chyrkov
@Chyrkov Год назад
Точно так же собрать отдельно интерактивным компонентом в проекте или скопировать готовый исходник интерактивного компонента из одного проекта в другой.
@АннаБелоусова-с9н
@АннаБелоусова-с9н 3 года назад
Спасибо, интересно! 🙃
@Chyrkov
@Chyrkov 3 года назад
Спасибо😉
@HealthyJoyAktobe
@HealthyJoyAktobe 7 месяцев назад
Почему после маски иконка чек не скрывается?
@Chyrkov
@Chyrkov 7 месяцев назад
Возможно она в группе? Или проверьте стоит ли галочка на clip content
@uladzimir990
@uladzimir990 8 месяцев назад
Супер
@Chyrkov
@Chyrkov 7 месяцев назад
Спасибо)
@1bglmnt178
@1bglmnt178 2 года назад
а можно ли сделать мигающую кнопку ?
@Chyrkov
@Chyrkov 2 года назад
Да конечно! Это делается через интерактивный компонент: 1 вариант простой, второй с подсветкой. Затем настраиваем через прототип связь между ними через after delay, чтобы они менялись друг на друга через например 1 секунду.
@1bglmnt178
@1bglmnt178 2 года назад
@@Chyrkov а это все в бесплатной версии Фигмы есть ?
@Chyrkov
@Chyrkov 2 года назад
@@1bglmnt178 конечно!)) в бесплатной версии есть все) ограничение касается только прав доступа и звонков.
@posya_4941
@posya_4941 4 месяца назад
Возможно фигма за два года обновилась, но у меня ничего не вышло, хотя параметры вроде такие же как и тут, но никакого плавного перехода нет
@Chyrkov
@Chyrkov 4 месяца назад
Проверьте что вы копировали фреймы с элементами а не делали их заново и делали изменения именно в копии. Проверьте режим в анимации, должен быть smart animate.
@nebojenka3063
@nebojenka3063 3 года назад
Круто, спасибо за полезности )))
@Chyrkov
@Chyrkov 3 года назад
На здоровье!😉
@GEM_2
@GEM_2 2 года назад
Лучший)
@Chyrkov
@Chyrkov 2 года назад
Благодарю!😊
@АйзанаКомбу-п4ш
@АйзанаКомбу-п4ш 2 года назад
И как сохранить эту кнопку??....
@Chyrkov
@Chyrkov 2 года назад
куда сохранить?)))
@ОрловИлья-п6ъ
@ОрловИлья-п6ъ 3 года назад
Сергей спасибо, очень классно! А на сколько это реализуемо в виде компонента? И на сколько проблематично это будет реализовывать разработчикам?
@Chyrkov
@Chyrkov 3 года назад
Привет! Спасибо! Да в идеале это и делать интерактивным компонентом, особенно меню! Но пока вижу по комментариям эта фича не у всех доступна, поэтому не показывал. Разрабам не проблема это сделать.
@bitrate4041
@bitrate4041 3 года назад
Бомба!
@Chyrkov
@Chyrkov 3 года назад
👌😉
@Мария-ш3л5э
@Мария-ш3л5э 7 месяцев назад
У одной меня когда создаю маску элемент с галочкой не исчезает и не работает так? все проверила, вроде все делаю как на видео
@Мария-ш3л5э
@Мария-ш3л5э 7 месяцев назад
разгрупировала компонент с иконками и все заработало, спасибо за урок!
@Chyrkov
@Chyrkov 7 месяцев назад
Отлично! Рад, что получилось!
@ViktoriaNikolaevaV
@ViktoriaNikolaevaV 2 года назад
Блииин, спасибо,просто объяснил и все понятно,а то другие смотрела там все очень быстро,не понятно,нечего не объясняют,а постоянно говорят-Очень Быстро,Просто.Спасибо тебе за туториал ✨
@Chyrkov
@Chyrkov 2 года назад
Спасибо большое за приятный отзыв)) рад, что все получилось!)
@sunuvugun
@sunuvugun 2 года назад
Скорость видео сделай 0,75
@Moshkadesign
@Moshkadesign Год назад
музыка чуть чуть громкая
@Chyrkov
@Chyrkov Год назад
Спасибо, учту)
@Hime-z2t
@Hime-z2t 9 месяцев назад
Не понимаю почему у меня, когда я создаю маску, не пропадает галочка как у вас? 😢
@Chyrkov
@Chyrkov 8 месяцев назад
Проверьте что галочка точно находится внутри маски. Возможно справа в панели настроек там где размеры фрейма нужно нажать clip content.
@nadejdamalih7680
@nadejdamalih7680 Год назад
Как нарисовать таеую корзинку,научи😮
@Chyrkov
@Chyrkov Год назад
Нарисовать можно с помощью обычных геометрических фигур и булевых операций. В описании есть ссылка на мой курс по фигме, мы тоже проходим там эту тему)
@dmitriymelnikov6574
@dmitriymelnikov6574 Год назад
Вот честное слово не понял. Одну и ту же кнопочку можно сделать просто анимированной, а можно смарт-анимированной? Ок! Наверное ещё есть гипер-анимация, треш-анимация, и афигеть-анимация кнопочки? И все очень характерные (с обычной анимацией перепутает только дурачок). типа меня
@Chyrkov
@Chyrkov Год назад
Все просто) есть стандартные переходы: моментальный (смена одно на другое) и растворение (объект меняется на другой как бы уходя в прозрачность). Смарт анимация позволяет сделать движение и красивые переходы из одного состояния/формы в другую. Плюс там еще настройки которые помогут вам сделать разноплановые переходы. Кстати все эти вещи мы разбираем у меня на курсе по Фигме (ссылка в описании).
@ЛарисаКобаль-ф2у
Привіт Уроки цікаві і доступні підкажіть як можна експортувати прототипи
@Chyrkov
@Chyrkov Год назад
Привіт привіт! на жаль, ніяк. можна зробити запис екрану якщо потрібно саме зберегти відео анімації.
@ЛарисаКобаль-ф2у
@@Chyrkov як робити запис екрану можливо маєте урок у ютубі
@Chyrkov
@Chyrkov Год назад
@@ЛарисаКобаль-ф2у яка у вас операційна система? на MacOS це робиться за допомогою натискання клавіш shift cmd 5. На вінді не знаю))) але в інтернеті пишуть windows alt G. Або через додатковий окремий додаток, наприклад OBS (безкоштовний).
@ЛарисаКобаль-ф2у
Дякую
@ДмитрийХачатуров-й2г
Крутой эффект) лайк) жду видосов на канале))
@Chyrkov
@Chyrkov 2 года назад
Спасибо)) рад, что нравится!
@thekosher7210
@thekosher7210 Год назад
Борух Ашем ☝ ✊ 👏 😁 👌 🙏 😁👏💟✡❤!) бээзрат Ашем ☝ ✊ 👏 😁 👌 🙏 😁👏💟✡❤!) дай Б-г!!) Всевышний благословения) тов вэ йотер!) ברוך השם!! בעזרת השם Борух Ашем ☝!) бээзрат Ашем 😁!) Благословлен Всевышний!) в помощи Всевышнего 👌 хорошо и лучше Спасибо!) תודה!)
@Chyrkov
@Chyrkov Год назад
🙏
@Dexter-hh4zu
@Dexter-hh4zu 4 месяца назад
У меня не работает, версия бесплатная
@Chyrkov
@Chyrkov 4 месяца назад
Дело не в версии. На бесплатном тарифе тоже должно работать. Проверьте связи. Проверьте режим анимации. Вы точно делали копию элементов а не создавали новые?
@natakarachevtseva9800
@natakarachevtseva9800 Год назад
Конечно спасибо Фигме, но, на мой взгляд, очень громоздко все реализовано с фреймами и иногда глючно срабатывает. С Афтером - никакого сравнения. Афтер - суперкрутая и профессиональная программа для моушндизайна. Совсем разный уровень. Но это сугубо мое мнение
@Chyrkov
@Chyrkov Год назад
Вы правы) Афтер - профессиональная программа для моушндизайна. Фигма это программа для дизайна и прототипирования пользовательских интерфейсов. Разные задачи решают. Афтер громозкая программа которой нужно долгое время на обучение, в фигме все гораздо проще =)
Далее
Menu Animation in Figma
4:52
Просмотров 674 тыс.
aespa 에스파 'Whiplash' MV
03:11
Просмотров 22 млн