No video

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

В этом видео вы увидите как можно сделать анимацию, а точнее зацикленную "Карусель" в Figma. Увидите как подготовить карточки и экраны для удобной и быстрой работы. Настроим переходы в прототипе. Узнаете как сделать любую анимацию беспрерывной.
Приятного просмотра!))
🎁 PDF - файл "Полезные ресурсы для дизайнера" - bit.ly/3U5FJbs
🔥Курс по работе в графическом редакторе Figma🔥- больше информации здесь 👉designhubcours...
Figma - самый популярный софт для веб-дизайна и создания интерфейсов. Программа по праву считается одним из главных инструментом среди веб и UX/UI-дизайнеров по всему миру. В этот курс я вложил свой 4х летний опыт, чтобы вы могли избежать множества ошибок, легко и быстро начать работать в Figma.
✔️Формат курса - видеозаписи уроков.
✔️Доступ к курсу ограничения по времени не имеет.
✔️Вы так же будете иметь к доступ к обновлениям курса и материалам добавленных в будущем.
❗️По возникающим вопросам - всегда готов к диалогу😉
Присоединяйся к Telegram каналу с полезными плюшками:
🔷 Телеграмм канал - surl.li/edsltz

Пікірлер: 76

  • @ilkinheydarzade8492
    @ilkinheydarzade8492 Жыл бұрын

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

  • @valeriadamian9583
    @valeriadamian9583 Жыл бұрын

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

  • @AndrewSilver_Star
    @AndrewSilver_Star10 ай бұрын

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

  • @user-ct9mi1lc5z
    @user-ct9mi1lc5z Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @Uxodi_dverZakroy
    @Uxodi_dverZakroy4 ай бұрын

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

  • @sadtime4267
    @sadtime42675 ай бұрын

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

  • @Uxodi_dverZakroy
    @Uxodi_dverZakroy4 ай бұрын

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

  • @user-mm8be8hn2q
    @user-mm8be8hn2q Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

    Это хорошо)

  • @User_nix5242wqr
    @User_nix5242wqr Жыл бұрын

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

  • @user-he2hp7em3m
    @user-he2hp7em3m Жыл бұрын

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

  • @user-zq2hg4nh9f
    @user-zq2hg4nh9f Жыл бұрын

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

  • @helgasheretovich5989
    @helgasheretovich5989 Жыл бұрын

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

  • @nikki_elizarova
    @nikki_elizarova Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

    Отлично))

  • @innaiashvili3694
    @innaiashvili3694 Жыл бұрын

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

  • @zhannamadi1684
    @zhannamadi1684 Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @zhannamadi1684

    @zhannamadi1684

    Жыл бұрын

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

  • @Jiniyk
    @Jiniyk4 ай бұрын

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

  • @design_HUB

    @design_HUB

    3 ай бұрын

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

  • @Jiniyk

    @Jiniyk

    3 ай бұрын

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

  • @user-jg9ug3wb3n
    @user-jg9ug3wb3n3 ай бұрын

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

  • @design_HUB

    @design_HUB

    3 ай бұрын

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

  • @radavladikina7488
    @radavladikina748811 ай бұрын

    Спасибо!

  • @krissisem
    @krissisem Жыл бұрын

    Спасибо ❤

  • @user-bp4mc6ym1s
    @user-bp4mc6ym1s9 ай бұрын

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

  • @design_HUB

    @design_HUB

    8 ай бұрын

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

  • @antoninanikolaeva2915
    @antoninanikolaeva29155 ай бұрын

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

  • @design_HUB

    @design_HUB

    5 ай бұрын

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

  • @alicero7317
    @alicero7317 Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @alicero7317

    @alicero7317

    Жыл бұрын

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

  • @evilrainbow6224
    @evilrainbow6224 Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @Lima-px2gn
    @Lima-px2gn8 ай бұрын

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

  • @design_HUB

    @design_HUB

    5 ай бұрын

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

  • @NINA.KHOMCHIK
    @NINA.KHOMCHIK8 ай бұрын

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

  • @design_HUB

    @design_HUB

    8 ай бұрын

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

  • @NINA.KHOMCHIK

    @NINA.KHOMCHIK

    8 ай бұрын

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

  • @JaneIrazova-qi5xc
    @JaneIrazova-qi5xc6 ай бұрын

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

  • @sadtime4267

    @sadtime4267

    5 ай бұрын

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

  • @JaneIrazova-qi5xc

    @JaneIrazova-qi5xc

    5 ай бұрын

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

  • @loveyouuuuuuuuyy
    @loveyouuuuuuuuyyАй бұрын

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

  • @design_HUB

    @design_HUB

    21 күн бұрын

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

  • @ElainaDevis
    @ElainaDevis Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @mrakoboretc
    @mrakoboretc10 ай бұрын

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

  • @design_HUB

    @design_HUB

    9 ай бұрын

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

  • @khegayvl
    @khegayvl10 ай бұрын

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

  • @khegayvl

    @khegayvl

    10 ай бұрын

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

  • @TopRelMusic
    @TopRelMusic5 ай бұрын

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

  • @user-jo8br7ir4o
    @user-jo8br7ir4o Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @user-xy3hf7ot5l
    @user-xy3hf7ot5l6 ай бұрын

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

  • @design_HUB

    @design_HUB

    6 ай бұрын

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

  • @user-xy3hf7ot5l

    @user-xy3hf7ot5l

    6 ай бұрын

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

  • @thekrakostv7777
    @thekrakostv77775 ай бұрын

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

  • @a_cohen
    @a_cohen Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @a_cohen

    @a_cohen

    Жыл бұрын

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

  • @razlilamaslo
    @razlilamaslo Жыл бұрын

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

  • @design_HUB

    @design_HUB

    Жыл бұрын

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

  • @user-hd9dj5ut8s
    @user-hd9dj5ut8s Жыл бұрын

    Дякую!

  • @kirsanova_dance
    @kirsanova_dance10 ай бұрын

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

  • @kirsanova_dance

    @kirsanova_dance

    10 ай бұрын

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

  • @design_HUB

    @design_HUB

    10 ай бұрын

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

  • @RomanShtefura
    @RomanShtefura11 ай бұрын

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

  • @design_HUB

    @design_HUB

    11 ай бұрын

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

  • @Alekseev_Oleg
    @Alekseev_Oleg Жыл бұрын

    💥👍👏

  • @user-be2wr4hq2g
    @user-be2wr4hq2g5 ай бұрын

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

  • @design_HUB

    @design_HUB

    5 ай бұрын

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

  • @user-be2wr4hq2g

    @user-be2wr4hq2g

    5 ай бұрын

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

  • @design_HUB

    @design_HUB

    5 ай бұрын

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

Келесі