Как сделать анимацию (зацикленную "Карусель") в графическом редакторе Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ธ.ค. 2024

ความคิดเห็น • 82

  • @ilkinheydarzade8492
    @ilkinheydarzade8492 ปีที่แล้ว +7

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

  • @valeriadamian9583
    @valeriadamian9583 ปีที่แล้ว +3

    Класс, четкая , ясная и приятная речь. Спасибо большое

  • @AndrewSilver_Star
    @AndrewSilver_Star ปีที่แล้ว +1

    почему так МАЛО лайков?!?!!?!?!? Такие СУПЕРСКИЕ уроки еще поискать нужно!!!!

  • @Uxodi_dverZakroy
    @Uxodi_dverZakroy 8 หลายเดือนก่อน

    Круто, спасибо за объяснение, все четко и понятно!

  • @sadtime4267
    @sadtime4267 10 หลายเดือนก่อน

    Спасибо большое, очень годный контент. Казалось что это очень сложно, но нет, немного муторно разве что дублировать фреймы и менять размеры)

  • @АлинаМотлух
    @АлинаМотлух ปีที่แล้ว

    В мене вийшло!!! Це те що я шукала! Дякую велике.

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Дуже радий за вас))

  • @ИнгаХлущевская-л6к
    @ИнгаХлущевская-л6к 3 หลายเดือนก่อน

    Своевременно, спасибо 👍

  • @ИгорьОнисенко-ч9й
    @ИгорьОнисенко-ч9й ปีที่แล้ว +1

    Огромное спасибо. Как раз вовремя..

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Это хорошо)

  • @User_nix5242wqr
    @User_nix5242wqr ปีที่แล้ว +1

    Вам спасибо, очень полезно 👍

  • @МаринаКотлярова-и2р
    @МаринаКотлярова-и2р ปีที่แล้ว

    Отличный урок .Спасибо!

  • @НатаГаляткина
    @НатаГаляткина หลายเดือนก่อน

    Дякую за Ваші знання!

  • @ЮлияВолохова-л6з
    @ЮлияВолохова-л6з ปีที่แล้ว

    Спасибо огромное! Информация супер!

  • @helgasheretovich5989
    @helgasheretovich5989 ปีที่แล้ว

    Спасибочки)) как всегда полезное видео)

  • @nikki_elizarova
    @nikki_elizarova ปีที่แล้ว

    Спасибо огромное! Получилось все!)

  • @khegayvl
    @khegayvl ปีที่แล้ว +1

    Спасибо за урок, а как добавить эту карусель на основной рабочий фрейм?

    • @khegayvl
      @khegayvl ปีที่แล้ว

      я нашел ответ в комментариях, большое спасибо

  • @cookieanime6453
    @cookieanime6453 12 วันที่ผ่านมา

    Здравствуйте, никак не согу понять как же все таки добавить в свой прототип эту анимацию

  • @innaiashvili3694
    @innaiashvili3694 ปีที่แล้ว

    Спасибо🙏🏻 класс!

  • @Uxodi_dverZakroy
    @Uxodi_dverZakroy 8 หลายเดือนก่อน +1

    Может кто подсказать, пожалуйста, как сделать вот такой же скролл в фигме, но таким образом, чтобы оно скроллилось само по себе, а остальная часть страницы была независима? Просто при запуске первая страница и сразу только этот скролл, нет возможности листать страницу дальше вниз :(

  • @Sindragosa-v6y
    @Sindragosa-v6y ปีที่แล้ว

    Видео суперское,очень помогло. Спасибо огромное!💯❤Только у меня возник вопрос, а как Вы понимаете какие размеры сетки у фреймов должен быть?Заранее спасибо)

    • @design_HUB
      @design_HUB  ปีที่แล้ว +1

      Сетку подстраиваю под себя обычно, учитываю безопасную зону (1200 пикселей) и колонки стараюсь сделать одинаковой ширины, чтоб удобней было работать с размерами кантента

  • @zhannamadi1684
    @zhannamadi1684 ปีที่แล้ว +1

    Добрый вечер! Спасибо за видео. У меня вопрос, вот у меня теперь 2 потока(Flow 1 и Flow 2).Поток 2 с каруселью, а как заказчику показывать? 2 разных потока? Или можно как-то карусель вставить в поток 1? Как карусель внести в свою работу? В потоке 1 у меня анимированные кнопки.

    • @design_HUB
      @design_HUB  ปีที่แล้ว +1

      Добрый вечер! Два разных потока можете показать поочередно. Если делитесь прототипом с заказчиком, то он их тоже сможет активировать поочередно на панеле слева. А на счёт того как совместить два потока, добавьте созданные кнопки в поток с каруселью, и тригер срабатывания карусели поставьте On Click, а не After delay. (Кнопки будут переключать слайды карусели). Таким образом и кнопки продемонстрируете и карусель))

    • @zhannamadi1684
      @zhannamadi1684 ปีที่แล้ว

      @@design_HUB спасибо, попробую.

  • @Lima-px2gn
    @Lima-px2gn ปีที่แล้ว

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

    • @design_HUB
      @design_HUB  10 หลายเดือนก่อน

      Если не разобрались, то можете поделиться со мной макетом в телеграмм и я гляну что не так

  • @JaneIrazova-qi5xc
    @JaneIrazova-qi5xc 10 หลายเดือนก่อน

    На 1:56 не получается выделить карточки, которые нужно уменьшить😓 не понимаю в чём проблема... там может нужно удерживать какую-то горячую клавишу скажите пожалуйста

    • @sadtime4267
      @sadtime4267 10 หลายเดือนก่อน +1

      чтобы выделить нужные карточки выборочно, надо зажать ctrl+Shift и кликать по ним в панели слева. Либо можете зажать Shift и прямо в холсте кликать по ним, но я предпочитаю первый вариант

    • @JaneIrazova-qi5xc
      @JaneIrazova-qi5xc 10 หลายเดือนก่อน

      Спасибо большое! Всё получилось❤️

  • @krissisem
    @krissisem ปีที่แล้ว

    Спасибо ❤

  • @Ульман-о8ы
    @Ульман-о8ы 7 หลายเดือนก่อน

    Это всё конечно очень круто, но как сохранить анимацию ? Через запись экрана? А если нужен PNG формат, что делать ?
    Плагины оставляют водяной знак, а при попытке обрезать в конечном итоге остается только первый кадр гифки

    • @design_HUB
      @design_HUB  7 หลายเดือนก่อน

      Через запись экрана. Для чего вам нужен PNG формат? Про какие плагины идёт речь? И что вы обрезаете? Если вас не устраивает запись экрана, то возьмите и экспортируйте всё элементы в After Effects, настройте анимацию как вам нравится и сохраните в нужном формате. В чём проблема?

  • @alicero7317
    @alicero7317 ปีที่แล้ว

    Здравствуйте. Делала карусель по другому макету и по вашему. Только в своем у меня по стрелочкам вперед и назад и смарт анимация. Запарка с 1 слайдом. С последнего на первый стоит афтеделей. А вот как с первого вернуть назад с анимацией не бегующей придумать не могу. Не могли бы подсказать?

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Здравствуйте! Распространенный вопрос)) я недавно отвечал на такой вопрос у себя в телеграм канале, вот ссылка на этот пост t.me/hub_design/155 Я в видео рассказал как подключать правильно экраны. Думаю поможет. Дайте знать если не то, или не разобрались

    • @alicero7317
      @alicero7317 ปีที่แล้ว

      Спасибо большое. Все понятно. Понимала то что нужно добавить ещё один слайд, но не понимала какой😅

  • @mrakoboretc
    @mrakoboretc ปีที่แล้ว

    Здравствуйте! Сделала все по Вашему уроку, настроила переходы. Но при просмотре там просто белый фрейм, без анимации, без картинок. Подскажите, пожалуйста, в чем может быть проблема?

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Проверьте в слоях, чтоб весь контент был во фрейме

  • @antoninanikolaeva2915
    @antoninanikolaeva2915 9 หลายเดือนก่อน

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

    • @design_HUB
      @design_HUB  9 หลายเดือนก่อน

      Уже работает)

  • @loveyouuuuuuuuyy
    @loveyouuuuuuuuyy 6 หลายเดือนก่อน

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

    • @design_HUB
      @design_HUB  4 หลายเดือนก่อน

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

  • @SummerRaspberry-o7y
    @SummerRaspberry-o7y 11 หลายเดือนก่อน

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

    • @design_HUB
      @design_HUB  10 หลายเดือนก่อน +1

      В моем телеграмм канале я закидывал видео как это исправить

    • @SummerRaspberry-o7y
      @SummerRaspberry-o7y 10 หลายเดือนก่อน

      благодарю, я смогла понять в чем была ошибка, один лишний кадр, в моем случае, нужно было сделать на 1 меньше, чем в видео!@@design_HUB

  • @Neprostobarber
    @Neprostobarber 9 หลายเดือนก่อน

    как теперь эту анимацию вставить на таплик

  • @evilrainbow6224
    @evilrainbow6224 ปีที่แล้ว

    Подскажите пожалуйста, а как теперь этот флоу поместить в другой фрейм, чтобы он работал в режиме просмотра? (в прототип веб страницы)

    • @design_HUB
      @design_HUB  ปีที่แล้ว +2

      Выберите все фреймы и сделайте из них набор компонентов (component set). Затем в макет поместите первый экран из набора. Будет работать))

  • @Jiniyk
    @Jiniyk 8 หลายเดือนก่อน

    Добрый день! Спасибо за объяснение! Но у меня есть глупый вопрос, у меня есть макет сайта, правильно ли я понимаю, что я просто должна скопировать эти макеты и таким образом сделать анимацию? Меня смущают 5 огромных макетов, но может они и не должны смущать... Не повлияет ли это в принципе на работу сайта и другие анимации в ней?

    • @design_HUB
      @design_HUB  7 หลายเดือนก่อน

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

    • @Jiniyk
      @Jiniyk 7 หลายเดือนก่อน

      @@design_HUB благодарю 🙏🏻

  • @AnnaKalmykova-b5i
    @AnnaKalmykova-b5i ปีที่แล้ว

    Пожалуйста, можете подсказать как правильно вставлять в свой макет карусель? Делала по вашим комментам ниже и ничего не получается(

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Напишите мне в телеграмм @maksmarchenko

  • @ElainaDevis
    @ElainaDevis ปีที่แล้ว

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

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Здравствуйте! Могу помочь)) а что конкретно не получается?

  • @АйданаЕнсетайқызы-о6с
    @АйданаЕнсетайқызы-о6с 3 หลายเดือนก่อน

    как теперь такую карусель можно превратить в видео mp4?

    • @design_HUB
      @design_HUB  3 หลายเดือนก่อน

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

  • @Ksjosnsoh.kdonmx
    @Ksjosnsoh.kdonmx ปีที่แล้ว +1

    Подскажи, пожалуйста, кто-нибудь, почему у меня они не плавно переходят, а быстро и резко, хотя делаю все как на видео? (((

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Возможно потому что что стоит тип перехода Instant, а не Smart animate. Можете прислать в Телеграм ссылку на проект, я гляну и скажу что не так

    • @Ksjosnsoh.kdonmx
      @Ksjosnsoh.kdonmx ปีที่แล้ว

      @@design_HUB спасибо, написала вам😌🙏

  • @kirsanova_dance
    @kirsanova_dance ปีที่แล้ว

    А в каком случае может не работать афтерделей? все остальное работает и через клик и другое, но именно самовоспроизводимую анимацию не получается сделать((
    Спасибо за ролик!

    • @kirsanova_dance
      @kirsanova_dance ปีที่แล้ว

      все просто, нужно выбирать "главный" фрейм. Не фрейм с картинками, а именно главный и там все появляется:) я разобралась, ура:) может тоже кому помогу

    • @design_HUB
      @design_HUB  ปีที่แล้ว +1

      Не успел ответить) отлично что разобрались сами, это лучше откладывается в памяти)

  • @a_cohen
    @a_cohen ปีที่แล้ว

    Здравствуйте. У меня получается, что при просмотре три карточки идут по карусели, затем все карточки исчезают и появляется только фон на пару секунд. Затем карусель возобновляется. Все перепроверил, везде стоят одинаковые настройки(кроме последней на 1мс). Как вы думаете в чем проблема?

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      А вы сможете поделиться макетом? Попробую помочь! Так долго будем угадывать)) возможно имена фреймов, возможно потеряли переход... Если что пишите в Телеграмм @maksmarchenko

    • @a_cohen
      @a_cohen ปีที่แล้ว

      @@design_HUB ок, спасибо. Попробую скинуть

  • @thekrakostv7777
    @thekrakostv7777 9 หลายเดือนก่อน

    Я хотел сделать анимацию с зацикленной анимацией (рекламы) на странице лендинга, но у меня возникла проблема. Вечно кидает на 1 страницу лендинга. Подскажите, кто сталкивался с такой проблемой? Прототип получается рваный. Рву волосы …
    P.S. отправил видео в комменты в вашем тг канале
    UPD: МАКС ГЕНИЙ, ПОМОГ!!!! Подписку оформил. Теперь один из моих любимых дизайнеров-ютуберов

  • @RomanShtefura
    @RomanShtefura ปีที่แล้ว

    Как создать такую же анимацию в Тильде?

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      лично не пробовал. Нужно поискать код для zero блока

  • @razlilamaslo
    @razlilamaslo ปีที่แล้ว

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

    • @design_HUB
      @design_HUB  ปีที่แล้ว

      Возможно изменился тип перехода, проверьте чтоб было Smart animate между блоками. А иногда достаточно просто перезагрузить прототип)

    • @queengeese2005
      @queengeese2005 2 หลายเดือนก่อน

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

  • @ДмитрийДжаггер
    @ДмитрийДжаггер 9 หลายเดือนก่อน

    Не работает... последняя картинка не переходит к 1 и всё останавливается...

    • @design_HUB
      @design_HUB  9 หลายเดือนก่อน

      На видео показан рабочий вариант, попробуйте ещё раз. От последнего к первому тоже нужно переход сделать в прототипе

    • @ДмитрийДжаггер
      @ДмитрийДжаггер 9 หลายเดือนก่อน

      @@design_HUB в итоге я стал делать своё, но у тут конфуз - сделал рабочий вариант, всё получилось, скопировал его, а в новой копии вместо анимации скролла показывает диссолв, хотя в настройках так и осталась анимация... почему так может быть?

    • @design_HUB
      @design_HUB  9 หลายเดือนก่อน

      Либо названия файлов разные, либо размеры разные,

  • @Alekseev_Oleg
    @Alekseev_Oleg ปีที่แล้ว

    💥👍👏

  • @TetjanaKašparová
    @TetjanaKašparová ปีที่แล้ว

    Дякую!

  • @radavladikina7488
    @radavladikina7488 ปีที่แล้ว

    Спасибо!