Maksym Marchenko
Maksym Marchenko
  • 153
  • 373 964
Красивая анимация в Figma // дизайн // прототип
В этом видео я покажу как сделать красивую анимацию в Figma для вашего проекта, используя базовые инструменты и настройки прототипа
📌 Для тех кто хочет детально разобраться с программой, рекомендую пройти онлайн-курс по работе в Figma - designhubcourse.online
📌 Мой Телеграм канал - surl.li/edsltz
Переглядів: 476

Відео

Анимация бег часть 2
Переглядів 105Місяць тому
Анимация бег часть 2
Интерактивный прототип в Figma // Анимация // Переход
Переглядів 6603 місяці тому
Задача - создать интерактивный прототип в Figma. Рассказываю о логике создания прототипа, отображении элементов интерфейса. Делаю кликабельный прототип из статичного. Запись на обучение - t.me/maksmarchenko Мой телеграмм канал про дизайн - surl.li/edsltz
Слайдер // Анимация в Figma
Переглядів 5074 місяці тому
🔥Курс по работе в графическом редакторе Figma🔥- больше информации здесь 👉designhubcourse.online В этом видео я покажу как в графическом редакторе Figma сделать слайдер, при перемещении которого, пролистывались бы страницы. Вы увидите как организовать изображения и настроить переходы между экранами. 📌 Видеоинструкция "Как вставить слайдер в уже готовый макет" - surl.li/edsltz 📌 Для записи на инд...
Как сделать анимацию карточек в Figma? Анимация Figma /Smarts Animate Figma
Переглядів 1,5 тис.10 місяців тому
Как сделать анимацию карточек в Figma? Анимация Figma /Smarts Animate Figma
Благодарность подписчикам и спонсорам
Переглядів 598Рік тому
Благодарность подписчикам и спонсорам
Создаем форму обратной связи в Figma простым способом - без использования компонентов и auto layout
Переглядів 1,7 тис.Рік тому
Создаем форму обратной связи в Figma простым способом - без использования компонентов и auto layout
Создаем буквы вырезанные из камня в Figma - реалистичный 3D текст с текстурой
Переглядів 2,1 тис.Рік тому
Создаем буквы вырезанные из камня в Figma - реалистичный 3D текст с текстурой
Базовое правило типографики. Основы типографики: работаем с заголовками, абзацами, цветом и кнопками
Переглядів 378Рік тому
Базовое правило типографики. Основы типографики: работаем с заголовками, абзацами, цветом и кнопками
Основы типографики в веб-дизайне: базовые знания, термины и виды шрифтов
Переглядів 584Рік тому
Основы типографики в веб-дизайне: базовые знания, термины и виды шрифтов
Создаем стильный экран сайта для твоего портфолио// Первый экран для портфолио в Figma
Переглядів 1,1 тис.Рік тому
Создаем стильный экран сайта для твоего портфолио// Первый экран для портфолио в Figma
Создаем 3D фигуру в Figma без помощи сторонних программ и плагинов
Переглядів 1 тис.Рік тому
Создаем 3D фигуру в Figma без помощи сторонних программ и плагинов
Раскрой весь потенциал Chat GPT - КАК использовать нейросеть в работе веб-дизайнером
Переглядів 395Рік тому
Раскрой весь потенциал Chat GPT - КАК использовать нейросеть в работе веб-дизайнером
Как вставить картинку в Figma// 5 способов импорта изображения в Figma
Переглядів 3,4 тис.Рік тому
Как вставить картинку в Figma// 5 способов импорта изображения в Figma
Создаем смарт анимацию первого экрана в Figma
Переглядів 1,5 тис.Рік тому
Создаем смарт анимацию первого экрана в Figma
Создаем пушистые элементы и пушистый текст спомощью плагинов в Figma
Переглядів 1 тис.Рік тому
Создаем пушистые элементы и пушистый текст спомощью плагинов в Figma
Липкая прокрутка - прилипание отдельных элементов при вертикальном скролле в Figma
Переглядів 8 тис.Рік тому
Липкая прокрутка - прилипание отдельных элементов при вертикальном скролле в Figma
Последние обновления Figma - мелочи меняющие все
Переглядів 629Рік тому
Последние обновления Figma - мелочи меняющие все
НЕ ЗАБУДЬ сделать ЭТО, перед версткой сайта - подготовка макета в Figma
Переглядів 1 тис.Рік тому
НЕ ЗАБУДЬ сделать ЭТО, перед версткой сайта - подготовка макета в Figma
Figma с нуля - курс по веб дизайну
Переглядів 3,3 тис.Рік тому
Figma с нуля - курс по веб дизайну
Законы UX дизайна - введение в UX дизайн за 5 минут (Часть 2)
Переглядів 336Рік тому
Законы UX дизайна - введение в UX дизайн за 5 минут (Часть 2)
Законы UX дизайна - введение в UX дизайн за 5 минут (Часть 1)
Переглядів 571Рік тому
Законы UX дизайна - введение в UX дизайн за 5 минут (Часть 1)
Как создать анимацию при скролле в Figma // Смарт анимация // Прототип в Figma
Переглядів 36 тис.Рік тому
Как создать анимацию при скролле в Figma // Смарт анимация // Прототип в Figma
Анимация при наведении в Figma // Смарт анимация // Анимация в прототипе
Переглядів 5 тис.Рік тому
Анимация при наведении в Figma // Смарт анимация // Анимация в прототипе
Анимация вращения в Figma // Смарт анимация // Первый экран сайта
Переглядів 8 тис.Рік тому
Анимация вращения в Figma // Смарт анимация // Первый экран сайта
Всё о привязке в Figma (Contstraints) - что такое, как работает и для чего используем
Переглядів 598Рік тому
Всё о привязке в Figma (Contstraints) - что такое, как работает и для чего используем
Как сделать анимацию (зацикленную "Карусель") в графическом редакторе Figma
Переглядів 24 тис.Рік тому
Как сделать анимацию (зацикленную "Карусель") в графическом редакторе Figma
Как сделать изображения для экрана в Photoshop // Плавный переход//наборы кистей и маски в Photoshop
Переглядів 468Рік тому
Как сделать изображения для экрана в Photoshop // Плавный переход//наборы кистей и маски в Photoshop
Создаем эффект мятой бумаги в Figma с помощью режима наложения
Переглядів 5 тис.Рік тому
Создаем эффект мятой бумаги в Figma с помощью режима наложения
Анимируем всплывающее меню (Tab bar) в Figma
Переглядів 4,2 тис.Рік тому
Анимируем всплывающее меню (Tab bar) в Figma

КОМЕНТАРІ

  • @vist6016
    @vist6016 6 днів тому

    Откуда взят размер фрейма 00:15 ? Grid options Bootstrap другие цифры выдает.

    • @design_HUB
      @design_HUB 6 днів тому

      Наиболее распространенное разрешение у ноутбуков. Какие цифры выдает Bootstrap? Брейкпойнт 1400 px? или контейнер 1320 px?

  • @RealMadrid-tr1jr
    @RealMadrid-tr1jr 15 днів тому

    можно ссылку на видео где вы делаете дизайн бекграунда

    • @design_HUB
      @design_HUB 12 днів тому

      ua-cam.com/video/BxBzq7gVRnI/v-deo.html

  • @vicktoriarozhnovska8560
    @vicktoriarozhnovska8560 20 днів тому

    Все получается но не нравится что во время просмотра показывает экран сначала весь а потом исчезает и появляется анимация. Помогите разобраться

    • @design_HUB
      @design_HUB 19 днів тому

      Уберите непрозрачность первому компоненту в наборе компонентов 1 го эрана

  • @Ksenia.Sait.VK.Bot.
    @Ksenia.Sait.VK.Bot. 22 дні тому

    Отличный урок! Спасибо❤ Можно ссылку на мк!?

    • @design_HUB
      @design_HUB 12 днів тому

      ua-cam.com/video/BxBzq7gVRnI/v-deo.html

  • @paly.voda.yuliia
    @paly.voda.yuliia 24 дні тому

    Что делать если в карточке есть фото(справа) и текст как слева от фото, так и внизу под фото(должен быть с отступом большИм от левого края)?..

  • @rus304
    @rus304 Місяць тому

    ШИКАААААРНО ! ! ! 🎉🎉🎉

  • @user-fx6in4fw9j
    @user-fx6in4fw9j Місяць тому

    Не получается сделать так, чтобы картинка двигалась

  • @alexlisouski4069
    @alexlisouski4069 Місяць тому

    какой смысл от этой панели со стеклом?🌚 если показать ссылку, то это можно сделать проще без этой дополнительной панели

  • @YanaYana-e5t
    @YanaYana-e5t Місяць тому

    ДУЖЕ ДЯКУЮ

  • @user-ft1yv4fv8o
    @user-ft1yv4fv8o Місяць тому

    Эффектно 👌

  • @user-tb3xz1ih9l
    @user-tb3xz1ih9l Місяць тому

    как вообще вводить текст в фигме? Почему у вас нет видео об этом?

    • @design_HUB
      @design_HUB Місяць тому

      Не думал, что с этим могут возникать сложности. Вводить при помощи инструмента текст и клавиатуры. Как работать с текстом, на канале есть 2 видео про типографику: вот ua-cam.com/video/xiDVyfbBl3Y/v-deo.html и вот ua-cam.com/video/xiDVyfbBl3Y/v-deo.html Если возникают сложности в работе с инструментами программы, рекомендую пройти мой курс designhubcourse.online/ru

  • @alionadanchenko579
    @alionadanchenko579 Місяць тому

    У меня не получается((( Когда настраиваю переход от прозрачного эллипса к эллипсу с градиентом, то "Change to" функция заблокирована, а со Scroll to это не работает...

    • @design_HUB
      @design_HUB Місяць тому

      Пришлите мне в телеграмм Скрин или ссылку на проект, помогу разобраться

  • @vasya8441
    @vasya8441 Місяць тому

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

  • @leolim146
    @leolim146 Місяць тому

    Круто, гениально

  • @user-kl4ze3yc1y
    @user-kl4ze3yc1y Місяць тому

    Отличная анимация 👍 На каком тарифе Фигма возможен экспорт анимации из более, чем 2 фрейма? У меня на тарифе Профессиональный можно без доп. оплаты экспортировать GIF только из 2-х фреймов 🤔

    • @design_HUB
      @design_HUB Місяць тому

      Этот прототип сделан на бесплатном тарифе. Зачем вам гиф? Проще сделать запись экрана либо поделиться прототипом. На тот же Behance можно вставить прототип

    • @user-kl4ze3yc1y
      @user-kl4ze3yc1y Місяць тому

      Так потому и GIF, что не дает экспортировать более 2-х фреймов. Вот подготовила анимацию из 10-15 фреймов, а на экспорт только 2 фрейма, а если больше, то нужно заплатить столько же, сколько стоит Фигма в месяц. Может это только у меня так ?

  • @arinapchelina7072
    @arinapchelina7072 Місяць тому

    Здравствуйте! Очень классно! А как сохранить такой банер?

    • @design_HUB
      @design_HUB Місяць тому

      Для чего вам его нужно сохранить?) Это для домонстрации в Figma. Можете сделать запись экрана

  • @user-zp3zu7xk1l
    @user-zp3zu7xk1l Місяць тому

    Вы очень плохо объясняете у меня просто все пропало

    • @design_HUB
      @design_HUB Місяць тому

      Вы можете меня не слушать))))

  • @user-zo5oe3yy8t
    @user-zo5oe3yy8t Місяць тому

    почему могут не работать кисти?

  • @user-bd3zi4zo3x
    @user-bd3zi4zo3x Місяць тому

    У вас очень понятная подача! Спасибо вам за труд🙌

  • @I_oveart
    @I_oveart Місяць тому

    Урок классный, но у меня какой-то баг случается, когда плашка, во время анимации примагничивается к левому полю, то плашка становится непрозрачной...... не пойму, что не так, всё по уроку делала....

    • @design_HUB
      @design_HUB Місяць тому

      Уже все получилось)) Причина было в том, что на разных фреймах был выставлен разный скролл в настройках прототипа (вертикальный и горизонтальный)

  • @arinapchelina7072
    @arinapchelina7072 Місяць тому

    Здравствуйте! Подскажите,пожалуйста, как сохранять эту работу на ноут?

    • @design_HUB
      @design_HUB Місяць тому

      Добрый день) запись экрана либо ссылка на прототип

  • @VeronikaSatur
    @VeronikaSatur 2 місяці тому

    Добрый день! Хороший урок, но появился вопрос по поводу меню на сайте. Как его закрепить при прокрутке страницы вниз или вверх? Чтобы он всегда был сверху, и нужная вкладка подсвечивалась, грубо говоря, показывая, на каком месте сайта вы находитесь 😅

    • @design_HUB
      @design_HUB 2 місяці тому

      Создайте фрейм с меню, разместите сверху. Во вкладке прототип выберите значение fix. Ну а подсвечивать пункты меню не получится. Сделайте такой эффект на конструкторе, например Тильде, это будет намного проще

  • @MarynaSavchenko-b3o
    @MarynaSavchenko-b3o 2 місяці тому

    Максим подскажите пожайлуста, я сделала все как вы сказали, но мой контент не изчезает за приделами фрейма. В чем может быть проблема??

    • @design_HUB
      @design_HUB 2 місяці тому

      Пришлите мне ссылку на макет в Телеграмм, отвечу в чем причина. Скорее всего, когда выбираете фрейм, справа на панеле под размерами не стоит галочка возле "Clip content"

  • @user-sb1lk6nr1b
    @user-sb1lk6nr1b 2 місяці тому

    Здравствуйте! Скажите, пжл., а где можно скачать такой же Лендинг как у вас? Чтобы было понятнее о чем речь

  • @NataliaAushtol
    @NataliaAushtol 2 місяці тому

    лайк и подписка! спасибо!❤

  • @I_oveart
    @I_oveart 2 місяці тому

    Верстальщик не пошлёт меня на Север? Если я сброшу ему такой макет))

    • @design_HUB
      @design_HUB 2 місяці тому

      Если не умеет делать такой эффект, то пошлёт. Вы это делаете для того, чтоб показать как должно выглядеть. Можете не делать такую анимацию а отправлять ссылку на сайт где уже реализована такая анимация

  • @NataliaAushtol
    @NataliaAushtol 2 місяці тому

    спасибо!!! удачи тебе!

  • @user-sb1lk6nr1b
    @user-sb1lk6nr1b 2 місяці тому

    Здравствуйте! Подскажите, пжл, все сделала точ в точ как на видео, но у меня при нажатии стрелок карточки меняются не плавно как у вас, т.е. они не смещаются в сторону, а просто резко изчезает одна и появляеться другая. Уже все перепроверила несколько раз, все равно остается также. В чем может быть причина?

    • @design_HUB
      @design_HUB 2 місяці тому

      Тип перехода Smart animate проверьте чтоб был. Ещё бывает когда из фреймов элементы вылетают. Если не разберётесь, поделитесь со мной в телеграмме проектом, я посмотрю в чем причина

  • @Vit_Army
    @Vit_Army 2 місяці тому

    А как скачать.. Скачиваю эффекта нет.

    • @design_HUB
      @design_HUB Місяць тому

      запись экрана)

  • @Mayya_itskill
    @Mayya_itskill 2 місяці тому

    Спасибо за подробнейшую инструкцию!

  • @Sodbo_4
    @Sodbo_4 2 місяці тому

    Какие горячие клавиши?

  • @loveyouuuuuuuuyy
    @loveyouuuuuuuuyy 2 місяці тому

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

    • @design_HUB
      @design_HUB Місяць тому

      Запись экрана

  • @asylgultumanbaeva6708
    @asylgultumanbaeva6708 2 місяці тому

    supper easy pokazano spasibo bolshoe uje podpisalas na vas :))

  • @onorinamuench7469
    @onorinamuench7469 2 місяці тому

    Очень круто! Благодарю!

  • @Olush_ka
    @Olush_ka 2 місяці тому

    Подскажите, почему у меня этот плагин увеличивает не количество элипсов, а количество кривых?

  • @kykycuku_ekb
    @kykycuku_ekb 3 місяці тому

    🎉🎉🎉

  • @kykycuku_ekb
    @kykycuku_ekb 3 місяці тому

    🎉🎉🎉

  • @elyas3115
    @elyas3115 3 місяці тому

    Спасибо за видео!

  • @user-et3tc3fw4s
    @user-et3tc3fw4s 3 місяці тому

    Дружище, спасибо тебе огромное! Ты такой умничка. Ты буквально спас мой проект

  • @alinadaladno
    @alinadaladno 3 місяці тому

    Максим, а как сделать так, чтобы когда скроллишь обратно наверх появлялся навбар/строка поиска? То есть не закреплять их изначально, когда скроллишь вниз.

  • @alinadaladno
    @alinadaladno 3 місяці тому

    Огроменное спасибо за лайфхак с прямоугольником! :)

  • @au_st
    @au_st 3 місяці тому

    Не понимаю, в чем дело:( Появляется все сразу, а не выезжая поочередно. Это начиная с настройки анимации первого экрана. Вроде все делаю как в видео, но все равно проявляется одновременно.. Может быть вы знаете причину? Сорри за возможно тупой вопрос)) но раз 6 переделывала и все равно не получается

    • @au_st
      @au_st 3 місяці тому

      Разобралась))) Надо чтоб все элементы и группы на всех фреймах первого экрана назывались одинаково)

  • @suxrobmahdiyar2570
    @suxrobmahdiyar2570 3 місяці тому

    👍👍👍

  • @arkenetrix
    @arkenetrix 3 місяці тому

    Скив дет стал платным. Чем его можно заменить?😢

  • @lildaria
    @lildaria 3 місяці тому

    Спасибо, просто и понятно! А для тех, кто ищет помощи со скачиванием созданной gif-анимации, попробуйте поискать плагины для Фигмы на эту тему.

  • @user-ys2uh7bt1k
    @user-ys2uh7bt1k 3 місяці тому

    круто!

  • @Elena_Art
    @Elena_Art 4 місяці тому

    Спасибо за то, что делитесь с нами полезным! Смотрю все Ваши видео, узнаю много нового для себя

  • @bibabo1310
    @bibabo1310 4 місяці тому

    Спасибо за видосы! узнаю много нового🔥

  • @user-kl4ze3yc1y
    @user-kl4ze3yc1y 4 місяці тому

    Спасибо за видео!

  • @Ksenia.Sait.VK.Bot.
    @Ksenia.Sait.VK.Bot. 4 місяці тому

    😊 класс. А как перенести в Тильду?

    • @design_HUB
      @design_HUB 4 місяці тому

      Сохранить текст как изображение с прозрачным фоном. Или можно сохранить по частям как svg и разместить в зероблоке