Как сделать анимацию (зацикленную "Карусель") в графическом редакторе Figma
В этом видео вы увидите как можно сделать анимацию, а точнее зацикленную "Карусель" в Figma. Увидите как подготовить карточки и экраны для удобной и быстрой работы. Настроим переходы в прототипе. Узнаете как сделать любую анимацию беспрерывной.
Приятного просмотра!))
🎁 PDF - файл "Полезные ресурсы для дизайнера" - bit.ly/3U5FJbs
🔥Курс по работе в графическом редакторе Figma🔥- больше информации здесь 👉designhubcours...
Figma - самый популярный софт для веб-дизайна и создания интерфейсов. Программа по праву считается одним из главных инструментом среди веб и UX/UI-дизайнеров по всему миру. В этот курс я вложил свой 4х летний опыт, чтобы вы могли избежать множества ошибок, легко и быстро начать работать в Figma.
✔️Формат курса - видеозаписи уроков.
✔️Доступ к курсу ограничения по времени не имеет.
✔️Вы так же будете иметь к доступ к обновлениям курса и материалам добавленных в будущем.
❗️По возникающим вопросам - всегда готов к диалогу😉
Присоединяйся к Telegram каналу с полезными плюшками:
🔷 Телеграмм канал - surl.li/edsltz
Пікірлер: 76
Все четко и грамотно показано и рассказано, продолжай в том же духе, мы смотрим твои видео и становимся чуть умнее и профессиональнее в своем деле
Класс, четкая , ясная и приятная речь. Спасибо большое
почему так МАЛО лайков?!?!!?!?!? Такие СУПЕРСКИЕ уроки еще поискать нужно!!!!
В мене вийшло!!! Це те що я шукала! Дякую велике.
@design_HUB
Жыл бұрын
Дуже радий за вас))
Круто, спасибо за объяснение, все четко и понятно!
Спасибо большое, очень годный контент. Казалось что это очень сложно, но нет, немного муторно разве что дублировать фреймы и менять размеры)
Может кто подсказать, пожалуйста, как сделать вот такой же скролл в фигме, но таким образом, чтобы оно скроллилось само по себе, а остальная часть страницы была независима? Просто при запуске первая страница и сразу только этот скролл, нет возможности листать страницу дальше вниз :(
Огромное спасибо. Как раз вовремя..
@design_HUB
Жыл бұрын
Это хорошо)
Вам спасибо, очень полезно 👍
Отличный урок .Спасибо!
Спасибо огромное! Информация супер!
Спасибочки)) как всегда полезное видео)
Спасибо огромное! Получилось все!)
@design_HUB
Жыл бұрын
Отлично))
Спасибо🙏🏻 класс!
Добрый вечер! Спасибо за видео. У меня вопрос, вот у меня теперь 2 потока(Flow 1 и Flow 2).Поток 2 с каруселью, а как заказчику показывать? 2 разных потока? Или можно как-то карусель вставить в поток 1? Как карусель внести в свою работу? В потоке 1 у меня анимированные кнопки.
@design_HUB
Жыл бұрын
Добрый вечер! Два разных потока можете показать поочередно. Если делитесь прототипом с заказчиком, то он их тоже сможет активировать поочередно на панеле слева. А на счёт того как совместить два потока, добавьте созданные кнопки в поток с каруселью, и тригер срабатывания карусели поставьте On Click, а не After delay. (Кнопки будут переключать слайды карусели). Таким образом и кнопки продемонстрируете и карусель))
@zhannamadi1684
Жыл бұрын
@@design_HUB спасибо, попробую.
Добрый день! Спасибо за объяснение! Но у меня есть глупый вопрос, у меня есть макет сайта, правильно ли я понимаю, что я просто должна скопировать эти макеты и таким образом сделать анимацию? Меня смущают 5 огромных макетов, но может они и не должны смущать... Не повлияет ли это в принципе на работу сайта и другие анимации в ней?
@design_HUB
3 ай бұрын
Можете копировать макеты, но я бы рекомендовал взять отдельный блок (из макета), сделать нужное количество копий , настроить анимацию и вставить в главный макет
@Jiniyk
3 ай бұрын
@@design_HUB благодарю 🙏🏻
Это всё конечно очень круто, но как сохранить анимацию ? Через запись экрана? А если нужен PNG формат, что делать ? Плагины оставляют водяной знак, а при попытке обрезать в конечном итоге остается только первый кадр гифки
@design_HUB
3 ай бұрын
Через запись экрана. Для чего вам нужен PNG формат? Про какие плагины идёт речь? И что вы обрезаете? Если вас не устраивает запись экрана, то возьмите и экспортируйте всё элементы в After Effects, настройте анимацию как вам нравится и сохраните в нужном формате. В чём проблема?
Спасибо!
Спасибо ❤
Видео суперское,очень помогло. Спасибо огромное!💯❤Только у меня возник вопрос, а как Вы понимаете какие размеры сетки у фреймов должен быть?Заранее спасибо)
@design_HUB
8 ай бұрын
Сетку подстраиваю под себя обычно, учитываю безопасную зону (1200 пикселей) и колонки стараюсь сделать одинаковой ширины, чтоб удобней было работать с размерами кантента
Здравствуйте! В целом получилось все, спасибо огромное за такой полезный урок!! Но, при добавлении на главный экран даже компонентом, все равно анимация слетает и происходит не то, что нужно. Не могли бы вы подсказать в чем проблема?
@design_HUB
5 ай бұрын
Уже работает)
Здравствуйте. Делала карусель по другому макету и по вашему. Только в своем у меня по стрелочкам вперед и назад и смарт анимация. Запарка с 1 слайдом. С последнего на первый стоит афтеделей. А вот как с первого вернуть назад с анимацией не бегующей придумать не могу. Не могли бы подсказать?
@design_HUB
Жыл бұрын
Здравствуйте! Распространенный вопрос)) я недавно отвечал на такой вопрос у себя в телеграм канале, вот ссылка на этот пост t.me/hub_design/155 Я в видео рассказал как подключать правильно экраны. Думаю поможет. Дайте знать если не то, или не разобрались
@alicero7317
Жыл бұрын
Спасибо большое. Все понятно. Понимала то что нужно добавить ещё один слайд, но не понимала какой😅
Подскажите пожалуйста, а как теперь этот флоу поместить в другой фрейм, чтобы он работал в режиме просмотра? (в прототип веб страницы)
@design_HUB
Жыл бұрын
Выберите все фреймы и сделайте из них набор компонентов (component set). Затем в макет поместите первый экран из набора. Будет работать))
Здравствуйте, видео супер! Помогло изучению новых функций которые раньше не пробовала Первый раз, когда пробовала просто настроить на примере простых квадратов все получилось. Когда решила сделать так с реальными карточками, то когда добавляю в основной фрейм и включаю просмотр карточки идут не так как нужно а с какими-то дерганиями и задержками Не знаете с чем может быть связано?
@design_HUB
5 ай бұрын
Если не разобрались, то можете поделиться со мной макетом в телеграмм и я гляну что не так
Подскажи, пожалуйста, кто-нибудь, почему у меня они не плавно переходят, а быстро и резко, хотя делаю все как на видео? (((
@design_HUB
8 ай бұрын
Возможно потому что что стоит тип перехода Instant, а не Smart animate. Можете прислать в Телеграм ссылку на проект, я гляну и скажу что не так
@NINA.KHOMCHIK
8 ай бұрын
@@design_HUB спасибо, написала вам😌🙏
На 1:56 не получается выделить карточки, которые нужно уменьшить😓 не понимаю в чём проблема... там может нужно удерживать какую-то горячую клавишу скажите пожалуйста
@sadtime4267
5 ай бұрын
чтобы выделить нужные карточки выборочно, надо зажать ctrl+Shift и кликать по ним в панели слева. Либо можете зажать Shift и прямо в холсте кликать по ним, но я предпочитаю первый вариант
@JaneIrazova-qi5xc
5 ай бұрын
Спасибо большое! Всё получилось❤️
здравствуйте, спасибо за урок, а как сохранить эту анимацию?
@design_HUB
21 күн бұрын
Запись экрана
Добрый вечер, спасибо за ваше видео все получилось, но не знаю как вставить карусель в главный экран, вы можете помочь?
@design_HUB
Жыл бұрын
Здравствуйте! Могу помочь)) а что конкретно не получается?
Здравствуйте! Сделала все по Вашему уроку, настроила переходы. Но при просмотре там просто белый фрейм, без анимации, без картинок. Подскажите, пожалуйста, в чем может быть проблема?
@design_HUB
9 ай бұрын
Проверьте в слоях, чтоб весь контент был во фрейме
Спасибо за урок, а как добавить эту карусель на основной рабочий фрейм?
@khegayvl
10 ай бұрын
я нашел ответ в комментариях, большое спасибо
как теперь эту анимацию вставить на таплик
Пожалуйста, можете подсказать как правильно вставлять в свой макет карусель? Делала по вашим комментам ниже и ничего не получается(
@design_HUB
Жыл бұрын
Напишите мне в телеграмм @maksmarchenko
Огонь, спасибо, только у меня не получилось сделать незаметный для глаза возврат к первой картинке :(
@design_HUB
6 ай бұрын
В моем телеграмм канале я закидывал видео как это исправить
@user-xy3hf7ot5l
6 ай бұрын
благодарю, я смогла понять в чем была ошибка, один лишний кадр, в моем случае, нужно было сделать на 1 меньше, чем в видео!@@design_HUB
Я хотел сделать анимацию с зацикленной анимацией (рекламы) на странице лендинга, но у меня возникла проблема. Вечно кидает на 1 страницу лендинга. Подскажите, кто сталкивался с такой проблемой? Прототип получается рваный. Рву волосы … P.S. отправил видео в комменты в вашем тг канале UPD: МАКС ГЕНИЙ, ПОМОГ!!!! Подписку оформил. Теперь один из моих любимых дизайнеров-ютуберов
Здравствуйте. У меня получается, что при просмотре три карточки идут по карусели, затем все карточки исчезают и появляется только фон на пару секунд. Затем карусель возобновляется. Все перепроверил, везде стоят одинаковые настройки(кроме последней на 1мс). Как вы думаете в чем проблема?
@design_HUB
Жыл бұрын
А вы сможете поделиться макетом? Попробую помочь! Так долго будем угадывать)) возможно имена фреймов, возможно потеряли переход... Если что пишите в Телеграмм @maksmarchenko
@a_cohen
Жыл бұрын
@@design_HUB ок, спасибо. Попробую скинуть
Есть интересный прикол с тем , что один раз у меня получилось , а второй раз у меня кадры меняются по очередно, то есть не каруселью , а просто как будто разными картинками. Судя по моему эксперименту дело в моих фреймах, но я не понимаю в чем именно. Может быть подскажете вы
@design_HUB
Жыл бұрын
Возможно изменился тип перехода, проверьте чтоб было Smart animate между блоками. А иногда достаточно просто перезагрузить прототип)
Дякую!
А в каком случае может не работать афтерделей? все остальное работает и через клик и другое, но именно самовоспроизводимую анимацию не получается сделать(( Спасибо за ролик!
@kirsanova_dance
10 ай бұрын
все просто, нужно выбирать "главный" фрейм. Не фрейм с картинками, а именно главный и там все появляется:) я разобралась, ура:) может тоже кому помогу
@design_HUB
10 ай бұрын
Не успел ответить) отлично что разобрались сами, это лучше откладывается в памяти)
Как создать такую же анимацию в Тильде?
@design_HUB
11 ай бұрын
лично не пробовал. Нужно поискать код для zero блока
💥👍👏
Не работает... последняя картинка не переходит к 1 и всё останавливается...
@design_HUB
5 ай бұрын
На видео показан рабочий вариант, попробуйте ещё раз. От последнего к первому тоже нужно переход сделать в прототипе
@user-be2wr4hq2g
5 ай бұрын
@@design_HUB в итоге я стал делать своё, но у тут конфуз - сделал рабочий вариант, всё получилось, скопировал его, а в новой копии вместо анимации скролла показывает диссолв, хотя в настройках так и осталась анимация... почему так может быть?
@design_HUB
5 ай бұрын
Либо названия файлов разные, либо размеры разные,