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

[@ilkinheydarzade8492]

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

[@valeriadamian9583]

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

[@AndrewSilver_Star]

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

[@Uxodi_dverZakroy]

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

[@sadtime4267]

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

[@АлинаМотлух]

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

[@design_HUB]

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

[@ИнгаХлущевская-л6к]

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

[@ИгорьОнисенко-ч9й]

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

[@design_HUB]

Это хорошо)

[@МаринаКотлярова-и2р]

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

[@User_nix5242wqr]

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

[@ЮлияВолохова-л6з]

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

[@khegayvl]

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

[@khegayvl]

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

[@helgasheretovich5989]

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

[@radavladikina7488]

Спасибо!

[@nikki_elizarova]

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

[@design_HUB]

Отлично))

[@innaiashvili3694]

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

[@Lima-px2gn]

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

[@design_HUB]

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

[@Sindragosa-v6y]

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

[@design_HUB]

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

[@Ульман-о8ы]

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

[@design_HUB]

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

[@Uxodi_dverZakroy]

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

[@zhannamadi1684]

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

[@design_HUB]

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

[@zhannamadi1684]

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

[@mrakoboretc]

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

[@design_HUB]

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

[@antoninanikolaeva2915]

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

[@design_HUB]

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

[@loveyouuuuuuuuyy]

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

[@design_HUB]

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

[@Jiniyk]

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

[@design_HUB]

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

[@Jiniyk]

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

[@thekrakostv7777]

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

[@SummerRaspberry-o7y]

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

[@design_HUB]

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

[@SummerRaspberry-o7y]

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

[@alicero7317]

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

[@design_HUB]

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

[@alicero7317]

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

[@ElainaDevis]

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

[@design_HUB]

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

[@evilrainbow6224]

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

[@design_HUB]

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

[@Neprostobarber]

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

[@TetjanaKašparová]

Дякую!

[@AnnaKalmykova-b5i]

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

[@design_HUB]

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

[@АйданаЕнсетайқызы-о6с]

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

[@design_HUB]

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

[@JaneIrazova-qi5xc]

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

[@sadtime4267]

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

[@JaneIrazova-qi5xc]

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

[@a_cohen]

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

[@design_HUB]

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

[@a_cohen]

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

[@kirsanova_dance]

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

[@kirsanova_dance]

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

[@design_HUB]

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

[@razlilamaslo]

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

[@design_HUB]

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

[@queengeese2005]

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

[@RomanShtefura]

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

[@design_HUB]

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

[@Alekseev_Oleg]

💥👍👏

[@NINA.KHOMCHIK]

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

[@design_HUB]

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

[@NINA.KHOMCHIK]

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

[@ДмитрийДжаггер]

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

[@design_HUB]

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

[@ДмитрийДжаггер]

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

[@design_HUB]

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

[@krissisem]

Спасибо ❤