Тёмный

Создание потрясающих анимаций прокрутки в Figma ✦ Creating Stunning Scroll Animations in Figma 

Halo Lab
Подписаться 1,9 тыс.
Просмотров 36 тыс.
50% 1

Семинар рассчитан больше на дизайнеров, потому что вы сможете повторить все шаги шаг за шагом во время просмотра видео, а также получите домашнее задание. Но разработчикам и менеджерам также будет интересно понять процесс и функциональность анимации.
Вы узнаете, как:
- создавать анимации;
- делать живую презентацию своего дизайна;
- быть более понятным для клиента в его идеях;
- создавать WOW-эффект :)
- стать ближе к figma.
Ссылка: www.sendpotion...
Ссылка на макет: www.figma.com/...
**********************************************************
The workshop is designed more for designers, because you will be able to repeat all the steps step by step while watching the video, and then you will also get homework. But developers and managers will also be interested in understanding the process and functionality of animations.
You will learn how to:
- create animations
- make a live presentation of your design
- be more clear for a client in his ideas
- make WOW effect :)
- get closer to figma
Reference: www.sendpotion...
Layout link: www.figma.com/...
**********************************************************
● Website - www.halo-lab.com
● Instagram - / halolabteam
● Dribbble - dribbble.com/h...
● Behance - www.behance.ne...

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

 

7 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 51   
@eva_masson
@eva_masson 2 года назад
Наконец-то! Хоть кто-то объяснил, как можно делать подобные анимации в Фигме) Спасибо большое! Жаль, конечно, что пока только через костыли. Надеюсь, Фигма расщедрится и добавит в следующем каком-нибудь обновлении When scroll
@halolabtv
@halolabtv 2 года назад
Спасибо вам за обратную связь! Рады помогать :)
@siadsgn
@siadsgn 2 года назад
это самый адекватный урок по анимации в фигма, еще не видела, чтобы кто-то использовал именно вариативность компонентов и смарт анимейт, просто облегчил жизнь мне :)
@maisjandesign
@maisjandesign 2 года назад
Рады помогать) У нас еще много полезного на канале
@_material_girl
@_material_girl 2 года назад
Аааа, спасибо!!!!!! Реально первое видео, где объясняется как анимацию переносим в макет!
@kseniashabanova4220
@kseniashabanova4220 2 года назад
Привет! Впервые, кажется, комментирую видео на ютубе. Супер полезный ролик, спасибо большое!!!
@maisjandesign
@maisjandesign Год назад
Спасибо, приятно читать такие комментарии🖤
@patryhofficial
@patryhofficial Год назад
Блин с Difference прикольно придумал взял на заметку.
@thaiwithme9879
@thaiwithme9879 2 года назад
огонь!! очень понравилась лекция!! делайте побольше такого контента! вы крутые, ребята!
@MrHoma94
@MrHoma94 2 года назад
Очень круто мужик! Спасибище!)) Почти сайт Apple🙂
@user-xh8lb7kl2w
@user-xh8lb7kl2w 2 года назад
ААА спасибо :) Наконец то кто то объяснил. спасибо :)
@olgaprishivalko1047
@olgaprishivalko1047 Год назад
Ура! Такой ценный урок! Спасибо большое. Давно слежу за работой halolabteam, Ваш дизайн узнаю среди тысячи! А тут ещё такой годный материал на ютубе!
@helgasheretovich5989
@helgasheretovich5989 Год назад
Супер контент!!! Спасибо!!! Ответили на вопросы, на которые не могла найти ответа!!!))) Пожалуйста, больше такого контента😊🙌🙌🙌🙏🙏🙏
@anton_youtube_1
@anton_youtube_1 2 года назад
Офигенный урок, спасибо большое!
@dasktown6969
@dasktown6969 2 года назад
Вы потрясающий !)
@bisiyahaya6142
@bisiyahaya6142 2 года назад
Wow this is one crazy animation 💯👍
@rusfungame
@rusfungame Год назад
Thanks for lessons
@rybka_moya
@rybka_moya Год назад
Спасибо! Интересно и полезно
@bigbanan4184
@bigbanan4184 2 года назад
Спасибо, я точно узнал больше о фигме
@andremin
@andremin Год назад
Как делать анимацю на кнопку в шапке ? При скроле чтобы опускалась до нужного блока а кнопка меняла цвет?
@maisjandesign
@maisjandesign Год назад
попробуйте этот урок ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-piZlQbjK2LA.html
@artemasoap
@artemasoap Год назад
Взрослая канитель!!!
@user-ul2de3ch2w
@user-ul2de3ch2w Год назад
Спасиб😂
@mirofficial1049
@mirofficial1049 Год назад
как понять, что ты связь на параллакс делаешь on click? типа этот параллакс происходит после клика что ли? Но ты же скроллишь? Короче как сделать так, чтобы у меня на всём лендинге работал параллакс во время скролла?
@maisjandesign
@maisjandesign Год назад
Это имитация скролла. К сожалению у фигмы нет пока анимации на скролл.
@Mikl07
@Mikl07 Год назад
Но в итоге получилась анимация не при скролле, а при клике( Или просто потом когда передаем верстальщику то говорить что это при скролле? А то вы сказали что надо уточнить, что это именно при клике
@maisjandesign
@maisjandesign Год назад
Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊 Выше так же ответил)
@Mikl07
@Mikl07 Год назад
@@maisjandesign спасибо большое)
@alex_massa
@alex_massa 7 месяцев назад
👏🤝👍
@tapcryptonow
@tapcryptonow 2 года назад
Подскажите, если делать такую анимацию к примеру в principle, насколько это имеет смысл? Спрашиваю, чтобы понять, что лучше учить) спасибо
@maisjandesign
@maisjandesign 2 года назад
Принцип анимации практически одинаковый. Но лучше учить фигму так как все собрано в одном месте
@andrewhoang8611
@andrewhoang8611 Год назад
то есть это не анимация скролла. а анимация при клике. будет ли проблема у верстальщика? ведь нужно сделать анимацию при скролле
@maisjandesign
@maisjandesign Год назад
Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊
@Emmilien_
@Emmilien_ 11 месяцев назад
Ребята, привет! Спасибо вам за урок! Скажите, пожалуйста, почему после завершения анимации меня перекидывает на первый экран вместо того, чтобы оставаться там, где я кликаю? Я делала по вашему видео клик для горизонтального скролла, но меня перекидывает на первый экран зачем-то
@alenaarkhipova4431
@alenaarkhipova4431 2 года назад
Урок супер. Подскажите, пожалуйста, есть ли возможность настроить difference эффект так, чтобы при попадании текста на цветной фон/фотографию он был белого или черного цвета, а не инвертирован? Или может знаете плагин решающий эту проблему? Никак не могу найти решение
@maisjandesign
@maisjandesign Год назад
Если вам нужна фиксация и анимация то только такой сложный вариант имитации. Или же с помощью маски, если вам не нужна анимация
@user-ti8fo7vt3l
@user-ti8fo7vt3l Год назад
Не понимаю почему у меня два слоя цвета над кнопкой сливаются в один и получается при наведении верхний слой просто накрывает кнопку? то есть я делал два слоя цвета над кнопкой, а едет при ховере один
@maisjandesign
@maisjandesign Год назад
Вы оба слоя смещали с разной дистанцией в первом состоянии?
@user-ti8fo7vt3l
@user-ti8fo7vt3l Год назад
@@maisjandesign а какая дистанция должна быть у двух этих слоев? В макете просто один над другим
@maisjandesign
@maisjandesign Год назад
Какой таймкод? Так могу точнее понять и подсказать
@user-ti8fo7vt3l
@user-ti8fo7vt3l Год назад
@@maisjandesign а эти два слоя как надо размещать? Строго один под другим или нижний должен вылезать?
@guess1154
@guess1154 Год назад
@@maisjandesign начиная с 10:13, такая же проблема
@manulisch
@manulisch 2 года назад
подскажите, пожалуйста, как видео вставили такое?
@maisjandesign
@maisjandesign 2 года назад
Figma поддерживает gif формат. Так что можно ставить гифку и в превью оно будет проигрываться
@ptrworship
@ptrworship Год назад
Фигма уже поддерживает небольшие по размеру фрагменты видео 🙌🏻😁 ура
@AnnyFanny85
@AnnyFanny85 7 месяцев назад
а как сделать анимацию именно по скролу а не клику ?
@maisjandesign
@maisjandesign 6 месяцев назад
Такой функции пока нет в Figma
Далее
ПРИКОЛЫ НАД БРАТОМ #shorts
00:23
Просмотров 3,1 млн
Friends
00:32
Просмотров 958 тыс.