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

Подписаться 5 тыс.

Просмотров 22 тыс.

50% 1

В этом видео вы увидите как можно сделать анимацию, а точнее зацикленную "Карусель" в Figma. Увидите как подготовить карточки и экраны для удобной и быстрой работы. Настроим переходы в прототипе. Узнаете как сделать любую анимацию беспрерывной.
Приятного просмотра!))
💥 Доступ к бесплатному модулю моего КУРСА по работе в Figma💥 - design-hub.online/kurs-po-figma
🎁 PDF - файл "Полезные ресурсы для дизайнера" - bit.ly/3U5FJbs
💥 Доступ к бесплатному модулю моего КУРСА по работе в Figma💥 - designhub.site/kurs-po-figma
✔️Формат курса - видеозаписи уроков.
✔️Доступ к курсу ограничения по времени не имеет.
✔️Вы так же будете иметь к доступ к обновлениям курса и материалам добавленных в будущем.
❗️По возникающим вопросам- всегда готов к диалогу😉
Присоединяйся к Telegram каналу с полезными плюшками:
🔷 Телеграмм канал - t.me/+vgusQPQwUQtlMmIy

Опубликовано:

29 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@valeriadamian9583 Год назад

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

@ilkinheydarzade8492 11 месяцев назад

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

@user-he2hp7em3m Год назад

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

@Uxodi_dverZakroy 3 месяца назад

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

@User_nix5242wqr Год назад

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

@helgasheretovich5989 Год назад

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

@user-zq2hg4nh9f 11 месяцев назад

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

@AndrewSilver_Star 9 месяцев назад

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

@user-mm8be8hn2q Год назад

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

@design_HUB Год назад

Это хорошо)

@sadtime4267 4 месяца назад

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

@innaiashvili3694 Год назад

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

@user-ct9mi1lc5z Год назад

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

@design_HUB Год назад

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

@nikki_elizarova Год назад

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

@design_HUB Год назад

Отлично))

@radavladikina7488 10 месяцев назад

Спасибо!

@krissisem Год назад

Спасибо ❤

@Alekseev_Oleg Год назад

💥👍👏

@loveyouuuuuuuuyy 18 дней назад

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

@Uxodi_dverZakroy 3 месяца назад

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

@user-bp4mc6ym1s 8 месяцев назад

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

@design_HUB 7 месяцев назад

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

@user-hd9dj5ut8s Год назад

Дякую!

@Lima-px2gn 7 месяцев назад

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

@design_HUB 4 месяца назад

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

@zhannamadi1684 Год назад

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

@design_HUB Год назад

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

@zhannamadi1684 Год назад

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

@evilrainbow6224 Год назад

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

@design_HUB Год назад

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

@TopRelMusic 4 месяца назад

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

@ElainaDevis Год назад

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

@design_HUB Год назад

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

@user-jg9ug3wb3n 2 месяца назад

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

@design_HUB 2 месяца назад

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

@khegayvl 9 месяцев назад

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

@khegayvl 9 месяцев назад

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

@Jiniyk 3 месяца назад

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

@design_HUB 2 месяца назад

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

@Jiniyk 2 месяца назад

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

@alicero7317 11 месяцев назад

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

@design_HUB 11 месяцев назад

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

@alicero7317 10 месяцев назад

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

@antoninanikolaeva2915 4 месяца назад

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

@design_HUB 4 месяца назад

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

@thekrakostv7777 4 месяца назад

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

@mrakoboretc 8 месяцев назад

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

@design_HUB 8 месяцев назад

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

@user-xy3hf7ot5l 5 месяцев назад

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

@design_HUB 5 месяцев назад

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

@user-xy3hf7ot5l 5 месяцев назад

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

@user-jo8br7ir4o Год назад

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

@design_HUB Год назад

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

@JaneIrazova-qi5xc 4 месяца назад

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

@sadtime4267 4 месяца назад

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

@JaneIrazova-qi5xc 4 месяца назад

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

@a_cohen Год назад

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

@design_HUB Год назад

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

@a_cohen Год назад

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

@razlilamaslo Год назад

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

@design_HUB Год назад

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

@kirsanova_dance 9 месяцев назад

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

@kirsanova_dance 9 месяцев назад

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

@design_HUB 9 месяцев назад

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

@NINA.KHOMCHIK 7 месяцев назад

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

@design_HUB 7 месяцев назад

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

@NINA.KHOMCHIK 7 месяцев назад

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

@RomanShtefura 10 месяцев назад

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

@design_HUB 10 месяцев назад

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

@user-be2wr4hq2g 4 месяца назад

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

@design_HUB 4 месяца назад

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

@user-be2wr4hq2g 4 месяца назад

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

@design_HUB 4 месяца назад

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