Тёмный
No video :(

Как создать анимацию при скролле в Figma // Смарт анимация // Прототип в Figma 

Maksym Marchenko
Подписаться 5 тыс.
Просмотров 35 тыс.
50% 1

В этом видео я покажу, как создать анимацию при скролле в Figma. Вы узнаете, как использовать функцию "Смарт анимация" (Smart Animate) для создания интересных эффектов при прокрутке страницы. Я также покажу, как создавать прототипы в Figma с помощью этих анимаций и как их настраивать.
Мы начнем с базовых настроек и подготовки макета в Figma, а затем перейдем к созданию анимации при скролле. Я расскажу о различных типах анимаций и покажу, как настроить параметры для каждого из них. Вы узнаете, как создавать плавную анимацию и как настроить ее скорость и задержку. Вы узнаете как создать набор компонентов (Component set). Расскажу как работает смарт анимация и случаи, когда она может работать неправильно.
Для создания анимации при скролле нужно будет испольльзовать прототип. Я покажу вам, как создать прототип в Figma и как связать блоки страницы с помощью созданных анимаций. Вы узнаете, как настроить тригеры (точки срабатывания) анимации в блоках и как настроить параметры анимации для каждой страницы.
🔥Курс по работе в графическом редакторе Figma🔥- больше информации здесь 👉designhubcours...
Figma - самый популярный софт для веб-дизайна и создания интерфейсов. Программа по праву считается одним из главных инструментом среди веб и UX/UI-дизайнеров по всему миру. В этот курс я вложил свой 4х летний опыт, чтобы вы могли избежать множества ошибок, легко и быстро начать работать в Figma.
✔️Формат курса - видеозаписи уроков.
✔️Доступ к курсу ограничения по времени не имеет.
✔️Вы так же будете иметь к доступ к обновлениям курса и материалам добавленных в будущем.
❗️По возникающим вопросам - всегда готов к диалогу😉
Присоединяйся к Telegram каналу с полезными плюшками:
🔷 Телеграмм канал - surl.li/edsltz
📍📍📍 По вопросам индивидуального обучения пиши в Direct - t.me/maksmarch...

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

 

27 авг 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 59   
@user-dj2qn8ny4c
@user-dj2qn8ny4c Год назад
Максим, благодарю! Урок максимально подробный и понятый. Респект за контент 🔥💯 Развития вашему каналу!
@design_HUB
@design_HUB Год назад
Спасибо!))
@andrey_progame208
@andrey_progame208 Год назад
Очень полезное видео. Хочу стать UI/UX дизайнером, но самому учиться не просто. Такие ролики всегда очень помогают! С меня 👍
@design_HUB
@design_HUB Год назад
Отличная цель!) спасибо за комментарий))
@user-or6jx9lm2t
@user-or6jx9lm2t 4 месяца назад
Добрый день! Я делала другую анимацию, но на основе этого урока нашла свою ошибку, поняла, почему не получалось в одном месте. Счастью нет предела!)) Спасибо огромное за подробные объяснения!)))
@user-jn2yg3ow7n
@user-jn2yg3ow7n 11 месяцев назад
Спасибо Вам огромное! Только вы помогли разобраться после дней поиской нужной информации! Делаю в школе лендинг и хотела сделать анимацию банковской карты, потом вставить ее надо было на лендинг сам...спасибо вам! Успехов!
@user-qg3gm3fi6q
@user-qg3gm3fi6q 5 месяцев назад
Очень, очень понравилось!Подписалась . Очень хорошая подача материала! Вы молодец!
@user-et3tc3fw4s
@user-et3tc3fw4s 3 месяца назад
Дружище, спасибо тебе огромное! Ты такой умничка. Ты буквально спас мой проект
@phonixmusic
@phonixmusic 5 месяцев назад
Спасибо большое, сижу пыхчу над проектом и не знал что бы добавить, наткнулся на ваше видео! Помогло!
@margaritaboretskaya7920
@margaritaboretskaya7920 4 месяца назад
Огромное спасибо! Так много уроков по анимации отдельных блоков, но никто не объясняет, как это всё на лендосе собрать. Наконец-то всё стало понятно
@user-nu2ib1ib9o
@user-nu2ib1ib9o Год назад
Спасибо за подробное объяснение!
@design_HUB
@design_HUB Год назад
Пожалуйста))
@sbnmuller
@sbnmuller Год назад
вот это да! супер) пока сложновато для меня такое, однако захотелось попробовать реализовать подобное) спасибо
@design_HUB
@design_HUB Год назад
Пробуйте) всё получится!)
@user-gx1xv9vq2y
@user-gx1xv9vq2y Год назад
Максим, благодарю! Настроила анимацию в учебном проекте. Успехов тебе!
@design_HUB
@design_HUB Год назад
Круто!) спасибо!)
@user-md8pe2yh1w
@user-md8pe2yh1w 9 месяцев назад
Интересно. Благодарю автора👍
@vasya8441
@vasya8441 Месяц назад
Ролик бомбезный, правда у меня с первого раза ничего не вышло, потом вышло, спасибо Автору за хорошее видео.
@user-zj7cu9rv8h
@user-zj7cu9rv8h Год назад
Поклон тебе в пояс, мил человек!!! Я уже мозг вывихнул, пытаясь это сделать в фигме...
@design_HUB
@design_HUB Год назад
Как я тебя понимаю))) сам долго голову ломал))
@user-wn9zj2bn2q
@user-wn9zj2bn2q 6 месяцев назад
спасибо все понятно, то что я хотел узнать
@much_fire_zevs9473
@much_fire_zevs9473 Год назад
Спасибо, было очень интересно и узнал много нового, обьясняешь отлично!
@FORSX
@FORSX Год назад
Все понятно. спасибо за контент, лайк! Такой вопрос - а как это все будет настраивать верстальшик? он не захочет тебя потом убить? )))
@design_HUB
@design_HUB Год назад
может и захочет, кто же знает... А как это все будет настраивать верстальщик? думаю тот кто пишет непосредственно код знает как сделать такой скролл и анимацию fade in.
@VeronikaSatur
@VeronikaSatur Месяц назад
Добрый день! Хороший урок, но появился вопрос по поводу меню на сайте. Как его закрепить при прокрутке страницы вниз или вверх? Чтобы он всегда был сверху, и нужная вкладка подсвечивалась, грубо говоря, показывая, на каком месте сайта вы находитесь 😅
@design_HUB
@design_HUB Месяц назад
Создайте фрейм с меню, разместите сверху. Во вкладке прототип выберите значение fix. Ну а подсвечивать пункты меню не получится. Сделайте такой эффект на конструкторе, например Тильде, это будет намного проще
@user-tj6eg7jd7n
@user-tj6eg7jd7n Год назад
Отлично, спасибо
@vlrkrlv
@vlrkrlv Год назад
Максим, огромное спасибо! Самый понятный гайд, очень выручил
@sunuvugun
@sunuvugun Год назад
Бионсе! Всё верно, так правильно))
@user-sb1lk6nr1b
@user-sb1lk6nr1b Месяц назад
Здравствуйте! Скажите, пжл., а где можно скачать такой же Лендинг как у вас? Чтобы было понятнее о чем речь
@design_HUB
@design_HUB Месяц назад
Figma Community
@w1zardatm
@w1zardatm 8 месяцев назад
Урок классный, только не понял для чего создавать 3 варианта для компонента и добавлять мгновенный переход между первым и вторым, если можно создать 2 компонента, где первый будет началом анимации (пустым фреймом), а второй конечной точкой
@design_HUB
@design_HUB 8 месяцев назад
Чтоб удобно было вставлять в основной экран и всё было видно
@teati2948
@teati2948 5 месяцев назад
Почему допустим выезжает только текст а фон нет ?
@user-hd9dj5ut8s
@user-hd9dj5ut8s Год назад
Дякую!
@natalyalobacheva6970
@natalyalobacheva6970 Год назад
Максим, спасибо за полезный урок! Только не понимаю для чего делать средний компонент 0% непрозрачности. В начале урока вы сказали что это поможет плавности, не улавливаю связь. Буду благодарна за разъяснение этого момента.
@design_HUB
@design_HUB Год назад
спасибо за комментарий. Все верно, это для плавности. Когда элементы непрозрачны и появляются из-за границы фрейма, то не видна четкая линия их появления
@natalyalobacheva6970
@natalyalobacheva6970 Год назад
@@design_HUB спасибо за ответ!
@MarynaSavchenko-b3o
@MarynaSavchenko-b3o Месяц назад
Максим подскажите пожайлуста, я сделала все как вы сказали, но мой контент не изчезает за приделами фрейма. В чем может быть проблема??
@design_HUB
@design_HUB Месяц назад
Пришлите мне ссылку на макет в Телеграмм, отвечу в чем причина. Скорее всего, когда выбираете фрейм, справа на панеле под размерами не стоит галочка возле "Clip content"
@efremandre
@efremandre Год назад
after dalay и change to недоступны, подсвечиаются серым. Что я делаю не так? Скопировал два раза фрейм, во втором убрал все элементы, объединил в компонент. Пытаюсь настройть привязку для анимации, доступно все, кроме вот того что нужно
@design_HUB
@design_HUB Год назад
Пришли мне ссылку на макет в Телеграмм, помогу разобраться. Так долго гадать
@user-sw4tb2sn5m
@user-sw4tb2sn5m Год назад
У вас получилось разобраться в чем была проблема? У меня просто такая же...
@nastyasharmar3474
@nastyasharmar3474 Год назад
такая же проблема 😅 как вы её решили?
@design_HUB
@design_HUB Год назад
@@nastyasharmar3474 поделитесь со мной макетом, решим проблему
@au_st
@au_st 3 месяца назад
Не понимаю, в чем дело:( Появляется все сразу, а не выезжая поочередно. Это начиная с настройки анимации первого экрана. Вроде все делаю как в видео, но все равно проявляется одновременно.. Может быть вы знаете причину? Сорри за возможно тупой вопрос)) но раз 6 переделывала и все равно не получается
@au_st
@au_st 3 месяца назад
Разобралась))) Надо чтоб все элементы и группы на всех фреймах первого экрана назывались одинаково)
@vicktoriarozhnovska8560
@vicktoriarozhnovska8560 9 дней назад
Все получается но не нравится что во время просмотра показывает экран сначала весь а потом исчезает и появляется анимация. Помогите разобраться
@design_HUB
@design_HUB 8 дней назад
Уберите непрозрачность первому компоненту в наборе компонентов 1 го эрана
@clipperx148
@clipperx148 Год назад
27:00 почему так муторно делаете отступы между фреймами, можно было просто выделить сразу все фреймы и настроить за раз, или вы просто чтобы люди поняли?
@design_HUB
@design_HUB Год назад
Да
@andreyevanton
@andreyevanton Год назад
это не анимация при скролле
@design_HUB
@design_HUB Год назад
а что это?
@Mariko991
@Mariko991 Год назад
@@design_HUB им. в виду, что анимация при скролле - это при триггере "прокрутить колесо мыши", но в фигме видимо просто нет такого.
@olya4384
@olya4384 9 месяцев назад
🥰👍👍👍👍👍
@user-xy2jc4mk8w
@user-xy2jc4mk8w Год назад
Добрый день. Подскажите, делала всё как в уроке, перенесла компонент блока на сайт, но он не отражается на сайте с остальными блоками. При просмотре проекта срабатывает только анимация отдельного этого блока.
@design_HUB
@design_HUB Год назад
Добрый день! Чтоб не тыкать пальцем в небо, могу глянуть ваш проект, если поделитесь им и пришлете в телеграмм (t.me/maksmarchenko) ссылку. Причин может быть много
@user-xy2jc4mk8w
@user-xy2jc4mk8w Год назад
@@design_HUB Благодарю! Получилось. Не знаю в чём была проблема. Когда закомбайнила готовые компоненты, то не работало. А когда фремы превратила в группу компонентов, тогда всё получилось.
@design_HUB
@design_HUB Год назад
отлично!))
Далее
UI design Journey-Day 5
8:24
Просмотров 40
Коротко о моей жизни:
01:00
Просмотров 409 тыс.
Prototyping and animation in Figma
29:47
Просмотров 243 тыс.