Полезный урок, спасибо большое! В восторге от первой анимации. Сверила настройки, делала по видео, но вторая анимация не вышла так плавно, как у вас. Я правильно поняла, что во втором случаем, анимация без маски???
Спасибо за хороший контент) Правда если все делать в фрейме и заклиповать контент, то маска не нужна) А элементы за границы фрейма выносить с пробелом (чтоб они не вылетали из самого фрейма). Но в любом случае урок полезный✔
Я тоже люблю делать анимашки в фигме. Пытался изучить афтер эффект - не понравилось, хотя всё получалось. Афтер подходит для каких-то крутых анимаций, которые пока мне не нужны. А ты как к афтеру относишься?
Афтер все же полноценный редактор для создания анимаций. Это очень мощный инструмент в котором можно создавать сложные заставки, мультики и тд. Анимация в фигме это все больше для демонстрации прототипа, но каких-то супер сложных вещей в ней не сделать. Плюс ты не можешь экспортировать анимации в видео файл например.
про бургерное меню непонятно.....как его разместить в другие проекты? или как его создать чтоб он светился фиолетовым из пред видео....непонятно как его собрать в другом проекте не получается по этому уроку
Очень красивая анимация. Но остались вопросы (я новичок) - как эту кнопку использовать на макете? (т.е. вместо кнопки, там целая конструкция, как разместить уже в действующий прототип к примеру сайта или приложения?
Очень просто! Вы делаете ее интерактивным компонентом и вставляете в макет вашего сайта или приложения. Потом она будет видна в прототипе в макетах. Подобный пример у меня есть в видео, где показываю как сделать меню приложения.
Добрый день, Сергей! Хороший канал, недавно нашла Вас. Очень нравится подача интересных фишек за короткое время. Спасибо большое! Для меня проблема с таблицами в фигме. Подскажите, как все таки просто делать таблицы и быстро!?
Добрый день, Виктория! Благодарю за отзыв, рад, что нравится!:) таблицы легко делать с помощью auto layout. У меня есть видео про список контактов, там принцип тот же: ruclips.net/video/s1qdgCdaub0/видео.html
В данном случае это конечно демонстрация, но для клиента и разработчиков вам в любом случае нужно показать как она должна работать. В фигме это сделать проще чем в афтере.
добрый день! вы можете экспортировать анимацию в гиф используя плагин, например Export GIF. Чтобы сделать такую анимацию в приложении или сайта понадобиться разработка.
Да конечно! Это делается через интерактивный компонент: 1 вариант простой, второй с подсветкой. Затем настраиваем через прототип связь между ними через after delay, чтобы они менялись друг на друга через например 1 секунду.
Блииин, спасибо,просто объяснил и все понятно,а то другие смотрела там все очень быстро,не понятно,нечего не объясняют,а постоянно говорят-Очень Быстро,Просто.Спасибо тебе за туториал ✨
Проверьте что вы копировали фреймы с элементами а не делали их заново и делали изменения именно в копии. Проверьте режим в анимации, должен быть smart animate.
Точно так же собрать отдельно интерактивным компонентом в проекте или скопировать готовый исходник интерактивного компонента из одного проекта в другой.
@@ЛарисаКобаль-ф2у яка у вас операційна система? на MacOS це робиться за допомогою натискання клавіш shift cmd 5. На вінді не знаю))) але в інтернеті пишуть windows alt G. Або через додатковий окремий додаток, наприклад OBS (безкоштовний).
Привет! Спасибо! Да в идеале это и делать интерактивным компонентом, особенно меню! Но пока вижу по комментариям эта фича не у всех доступна, поэтому не показывал. Разрабам не проблема это сделать.
Нарисовать можно с помощью обычных геометрических фигур и булевых операций. В описании есть ссылка на мой курс по фигме, мы тоже проходим там эту тему)
Дело не в версии. На бесплатном тарифе тоже должно работать. Проверьте связи. Проверьте режим анимации. Вы точно делали копию элементов а не создавали новые?
Вот честное слово не понял. Одну и ту же кнопочку можно сделать просто анимированной, а можно смарт-анимированной? Ок! Наверное ещё есть гипер-анимация, треш-анимация, и афигеть-анимация кнопочки? И все очень характерные (с обычной анимацией перепутает только дурачок). типа меня
Все просто) есть стандартные переходы: моментальный (смена одно на другое) и растворение (объект меняется на другой как бы уходя в прозрачность). Смарт анимация позволяет сделать движение и красивые переходы из одного состояния/формы в другую. Плюс там еще настройки которые помогут вам сделать разноплановые переходы. Кстати все эти вещи мы разбираем у меня на курсе по Фигме (ссылка в описании).
Конечно спасибо Фигме, но, на мой взгляд, очень громоздко все реализовано с фреймами и иногда глючно срабатывает. С Афтером - никакого сравнения. Афтер - суперкрутая и профессиональная программа для моушндизайна. Совсем разный уровень. Но это сугубо мое мнение
Вы правы) Афтер - профессиональная программа для моушндизайна. Фигма это программа для дизайна и прототипирования пользовательских интерфейсов. Разные задачи решают. Афтер громозкая программа которой нужно долгое время на обучение, в фигме все гораздо проще =)
Очень круто и доступно объясняете) спасибо вам за ваше творчество
Благодарю!😉 рад, что нравится!
Ш И К А Р Н О ! ! ! Все попробовал. Все работает)) Супер!
Огонь!!)) рад, что получилось!)
Сергей, спасибо. Все получилось. Применяю в работе.
Отлично!) рад, что помог!
Спасибо огромное! Сижу на работе , сделала все задачи , решила прокачаться и поучиться новому ) сделала все сходу вместе с вами ) лид похвалил ! 😁
Отлично!))) приятно, что проводите с пользой время на работе за просмотром моих видео!)
Спасибо, Сергей! Было очень полезно👍
пожалуйста!) рад, что понравилось!
Спасибо! Рада что вас нашла, полезно и доходчиво доносите информацию
Спасибо большое!!! Рад, что нравится!)
супер. очень спокойная, ясная подача.
Спасибо большое!)
Полезный урок, спасибо большое! В восторге от первой анимации.
Сверила настройки, делала по видео, но вторая анимация не вышла так плавно, как у вас. Я правильно поняла, что во втором случаем, анимация без маски???
Спасибо за отзыв! Вы про бургер? Да, маска там не нужна. Плавность достигается за счёт кривыми custom микро анимации в настройках smart animate.
🔥 красотища какая)
Спасибо!) дальше больше!)
Спасибо за хороший контент) Правда если все делать в фрейме и заклиповать контент, то маска не нужна) А элементы за границы фрейма выносить с пробелом (чтоб они не вылетали из самого фрейма). Но в любом случае урок полезный✔
Спасибо за комментарии!)
Подскажите, это функци на платной подписке идет?
Нет, все доступно в бесплатной лицензии!😉
Спасибо за видео! Мне очень помогло.
Я рад! Спасибо за отзыв!
Я тоже люблю делать анимашки в фигме. Пытался изучить афтер эффект - не понравилось, хотя всё получалось. Афтер подходит для каких-то крутых анимаций, которые пока мне не нужны. А ты как к афтеру относишься?
Афтер все же полноценный редактор для создания анимаций. Это очень мощный инструмент в котором можно создавать сложные заставки, мультики и тд. Анимация в фигме это все больше для демонстрации прототипа, но каких-то супер сложных вещей в ней не сделать. Плюс ты не можешь экспортировать анимации в видео файл например.
@@Chyrkov как экспортировать?
@@user-tk6go6go2t можно сделать запись экрана
про бургерное меню непонятно.....как его разместить в другие проекты? или как его создать чтоб он светился фиолетовым из пред видео....непонятно как его собрать в другом проекте не получается по этому уроку
Элементарно. Вы создаете интерактивный компонент с вариантами, затем вставляете копию дефолтного варианта во все нужные макеты где нужен этот элемент
Можно ли готовую анимацию, компонентом, как-то использовать в разных фреймах? Пробовал, что-то не выходит (
Да конечно! Вы делаете интерактивный компонент с двумя вариантами и вперёд)) у меня на канале есть видео как это делать.
@@Chyrkov Дайте ссылку пожалуйста
@@im_power Интерактивные компоненты в Figma, варианты использования
ruclips.net/video/Mf0Ft1PoWEU/видео.html
Интересно, хоть и изучаю фронт-энд разработку. Молодец)))
отлично!) думаю многим было бы интересно если поделишься опытом как такое делать на фронте)
Очень красивая анимация. Но остались вопросы (я новичок) - как эту кнопку использовать на макете? (т.е. вместо кнопки, там целая конструкция, как разместить уже в действующий прототип к примеру сайта или приложения?
Очень просто! Вы делаете ее интерактивным компонентом и вставляете в макет вашего сайта или приложения. Потом она будет видна в прототипе в макетах. Подобный пример у меня есть в видео, где показываю как сделать меню приложения.
@@Chyrkov отправьте пожалуйста ссылку
@@user-tk6go6go2t ruclips.net/video/Qm14S8Nlxpw/видео.html
Добрый день, Сергей! Хороший канал, недавно нашла Вас. Очень нравится подача интересных фишек за короткое время. Спасибо большое! Для меня проблема с таблицами в фигме. Подскажите, как все таки просто делать таблицы и быстро!?
Добрый день, Виктория! Благодарю за отзыв, рад, что нравится!:) таблицы легко делать с помощью auto layout. У меня есть видео про список контактов, там принцип тот же:
ruclips.net/video/s1qdgCdaub0/видео.html
@@Chyrkov Спасибо! Смотрю Ваши уроки с удовольствием!!!
Сергей а где ты взял корзинку ,поподробней я новичок чайник
Готовые можно взять на стоках бесплатных и платных. Также есть плагины в фигме которые позволяют вставлять иконки готовые бесплатно. Например icons8
Как в Figme создать анимированные обложку маркетплейс?
Вы можете сделать анимацию Figma, записать видео экрана с этой анимаций и потом выложить это видео как обложку товара.
это анимация просто для демонстрации или ее как то можно использовать в верстке потом?
В данном случае это конечно демонстрация, но для клиента и разработчиков вам в любом случае нужно показать как она должна работать. В фигме это сделать проще чем в афтере.
где скачать русскую версию или как англ версию перевести на рус?)) есть ли видео об этом? спасибо
Русский версии фигмы нет.
Это даже больше, чем охеренно 👊🏻
✊ спасибо!
Как всегда круто!
Спасибо)
Спасибо за полезную информацию и хорошую подачу)
Спасибо за отзыв!) с наступающим!)
Круто спасибо
Рад, что понравилось!
А отдельные курсы по анимации в фигме у вас есть?
да есть, ссылка в описание к видео. Там подробный курс.
Спасибо большое)
Понял, как анимировать карточку при наведении на неё!
Рад, что все получилось!
Спасибо за твой контент! Всё понятно и просто)
Подписалась просто сходу 😁
Супер) спасибо!) рад, что понравилось)
Добрый день, а как можно экспортировать данную анимацию?
добрый день! вы можете экспортировать анимацию в гиф используя плагин, например Export GIF. Чтобы сделать такую анимацию в приложении или сайта понадобиться разработка.
Сергей, привет! Всё настроил по инструкции, но смарт анимация не отрабатывает. В чем может быть проблема?
привет! сложно так понять. Что именно не работает? Не запускается прототип или самой анимации нет?
@@Chyrkov Прототип запускается и анимация работает, но кастомная анимация не срабатывает.
Точно сделали как в видео настройки? Пришлите ссылку сюда без .ком в домене
а можно ли сделать мигающую кнопку ?
Да конечно! Это делается через интерактивный компонент: 1 вариант простой, второй с подсветкой. Затем настраиваем через прототип связь между ними через after delay, чтобы они менялись друг на друга через например 1 секунду.
@@Chyrkov а это все в бесплатной версии Фигмы есть ?
@@1bglmnt178 конечно!)) в бесплатной версии есть все) ограничение касается только прав доступа и звонков.
Спасибо! Очень круто!
Спасибо за комментарий!)
Спасибо большое! Знать бы ещё как вместе с этим бургером чтобы справа налево шторка выезжала
Пожалуйста!) у меня на канале есть видео о том как это делать 😉
Блииин, спасибо,просто объяснил и все понятно,а то другие смотрела там все очень быстро,не понятно,нечего не объясняют,а постоянно говорят-Очень Быстро,Просто.Спасибо тебе за туториал ✨
Спасибо большое за приятный отзыв)) рад, что все получилось!)
Скорость видео сделай 0,75
классный видос, информативно)
спасибо за отзыв)) удачи!)
Я новенький в этом деле, и у меня есть вопрос.
Зачем в первом варианте делать маску ? и почему её нет во втором случае с бургером.
Привет!) с помощью маски мы можем скрывать какие-то элементы. В бургере нам скрывать нечего)
@@Chyrkov Спасибо )
Почему после маски иконка чек не скрывается?
Возможно она в группе? Или проверьте стоит ли галочка на clip content
Крутаааааааааа, обожаю тебя)
❤️
Спасибо, вы супер!!
Спасибо ☺️
И как сохранить эту кнопку??....
куда сохранить?)))
огромная благодарность автору, салам из узбекистана))
Пожалуйста!)) рад, что было полезным!)
Спасибо!
Пожалуйста!)
БОЖЕ МОЙ, ТЫЫ ЛУЧШИЙ!!!!!!!!!!!!!!!!!!!!
Благодарю!!!!))))
Привет очень приятная и информативная подача информации это одназначно лайк и подписка )))Щас буду пробывать первый раз делать анимацию фигме 😃
Уверен все получится!) спасибо за приятный отзыв!)
У одной меня когда создаю маску элемент с галочкой не исчезает и не работает так? все проверила, вроде все делаю как на видео
разгрупировала компонент с иконками и все заработало, спасибо за урок!
Отлично! Рад, что получилось!
Возможно фигма за два года обновилась, но у меня ничего не вышло, хотя параметры вроде такие же как и тут, но никакого плавного перехода нет
Проверьте что вы копировали фреймы с элементами а не делали их заново и делали изменения именно в копии. Проверьте режим в анимации, должен быть smart animate.
Спасибо, здорово!
Пожалуйста!)
Спасибо за хороший материал
Спасибо за отзыв!)
Лучший)
Благодарю!😊
само посебе оно получаеться....а как его внедрить в другой проект в само мобильное приложение?
Точно так же собрать отдельно интерактивным компонентом в проекте или скопировать готовый исходник интерактивного компонента из одного проекта в другой.
Бомба!
👌😉
Привет от однокурсницы МО :) Спасибо за качественные уроки! Подскажи, пожалуйста, экспорт такой анимации в Figma в каком формате будет?
Привет привет!)) экспортировать из Figma можно в gif. Саму анимацию разрабы сами уже пилят)
@@Chyrkov Спасибо!!
@@Chyrkov что нужно перед этим сделать?
@@user-tk6go6go2t собрать макет и сделать анимацию
Не понимаю почему у меня, когда я создаю маску, не пропадает галочка как у вас? 😢
Проверьте что галочка точно находится внутри маски. Возможно справа в панели настроек там где размеры фрейма нужно нажать clip content.
Спасибо
Пожалуйста!
Круто, спасибо за полезности )))
На здоровье!😉
Спасибо, интересно! 🙃
Спасибо😉
Спасибо
Пожалуйста!)
спасибо вам!
Пожалуйста 🙂
Привіт Уроки цікаві і доступні підкажіть як можна експортувати прототипи
Привіт привіт! на жаль, ніяк. можна зробити запис екрану якщо потрібно саме зберегти відео анімації.
@@Chyrkov як робити запис екрану можливо маєте урок у ютубі
@@ЛарисаКобаль-ф2у яка у вас операційна система? на MacOS це робиться за допомогою натискання клавіш shift cmd 5. На вінді не знаю))) але в інтернеті пишуть windows alt G. Або через додатковий окремий додаток, наприклад OBS (безкоштовний).
Дякую
Супер
Спасибо)
Сергей спасибо, очень классно! А на сколько это реализуемо в виде компонента? И на сколько проблематично это будет реализовывать разработчикам?
Привет! Спасибо! Да в идеале это и делать интерактивным компонентом, особенно меню! Но пока вижу по комментариям эта фича не у всех доступна, поэтому не показывал. Разрабам не проблема это сделать.
Как нарисовать таеую корзинку,научи😮
Нарисовать можно с помощью обычных геометрических фигур и булевых операций. В описании есть ссылка на мой курс по фигме, мы тоже проходим там эту тему)
музыка чуть чуть громкая
Спасибо, учту)
У меня не работает, версия бесплатная
Дело не в версии. На бесплатном тарифе тоже должно работать. Проверьте связи. Проверьте режим анимации. Вы точно делали копию элементов а не создавали новые?
Вот честное слово не понял.
Одну и ту же кнопочку можно сделать просто анимированной, а можно смарт-анимированной?
Ок! Наверное ещё есть гипер-анимация, треш-анимация, и афигеть-анимация кнопочки? И все очень характерные (с обычной анимацией перепутает только дурачок).
типа меня
Все просто) есть стандартные переходы: моментальный (смена одно на другое) и растворение (объект меняется на другой как бы уходя в прозрачность). Смарт анимация позволяет сделать движение и красивые переходы из одного состояния/формы в другую. Плюс там еще настройки которые помогут вам сделать разноплановые переходы. Кстати все эти вещи мы разбираем у меня на курсе по Фигме (ссылка в описании).
Борух Ашем ☝ ✊ 👏 😁 👌 🙏 😁👏💟✡❤!) бээзрат Ашем ☝ ✊ 👏 😁 👌 🙏 😁👏💟✡❤!) дай Б-г!!) Всевышний благословения) тов вэ йотер!)
ברוך השם!! בעזרת השם
Борух Ашем ☝!) бээзрат Ашем 😁!)
Благословлен Всевышний!) в помощи Всевышнего 👌 хорошо и лучше
Спасибо!)
תודה!)
🙏
Бургер и крестик у меня получилмя а пред.нет
так сложно понять, попробуйте еще раз создать элемент, четко по моему видео.
ок
Крутой эффект) лайк) жду видосов на канале))
Спасибо)) рад, что нравится!
Зачем так сильно много говорить в начале видео?
Я люблю поговорить на темы которые мне интересны. Если у вас нет терпения, всегда можно перемотать 😉
Конечно спасибо Фигме, но, на мой взгляд, очень громоздко все реализовано с фреймами и иногда глючно срабатывает. С Афтером - никакого сравнения. Афтер - суперкрутая и профессиональная программа для моушндизайна. Совсем разный уровень. Но это сугубо мое мнение
Вы правы) Афтер - профессиональная программа для моушндизайна. Фигма это программа для дизайна и прототипирования пользовательских интерфейсов. Разные задачи решают. Афтер громозкая программа которой нужно долгое время на обучение, в фигме все гораздо проще =)