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