Создание потрясающих анимаций прокрутки в Figma ✦ Creating Stunning Scroll Animations in Figma
ฝัง
- เผยแพร่เมื่อ 10 พ.ค. 2022
- Семинар рассчитан больше на дизайнеров, потому что вы сможете повторить все шаги шаг за шагом во время просмотра видео, а также получите домашнее задание. Но разработчикам и менеджерам также будет интересно понять процесс и функциональность анимации.
Вы узнаете, как:
- создавать анимации;
- делать живую презентацию своего дизайна;
- быть более понятным для клиента в его идеях;
- создавать WOW-эффект :)
- стать ближе к figma.
Ссылка: www.sendpotion.com/
Ссылка на макет: www.figma.com/file/8EURLXNWYY...
**********************************************************
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.com/
Layout link: www.figma.com/file/8EURLXNWYY...
**********************************************************
● Website - www.halo-lab.com
● Instagram - / halolabteam
● Dribbble - dribbble.com/halolab
● Behance - www.behance.net/halolab
![Уроки Figma | Бесконечный слайдер. [Фигма]](http://i.ytimg.com/vi/IzcnqjsZqa0/mqdefault.jpg)
Наконец-то! Хоть кто-то объяснил, как можно делать подобные анимации в Фигме) Спасибо большое!
Жаль, конечно, что пока только через костыли. Надеюсь, Фигма расщедрится и добавит в следующем каком-нибудь обновлении When scroll
Спасибо вам за обратную связь! Рады помогать :)
Аааа, спасибо!!!!!! Реально первое видео, где объясняется как анимацию переносим в макет!
Блин с Difference прикольно придумал взял на заметку.
Офигенный урок, спасибо большое!
огонь!! очень понравилась лекция!! делайте побольше такого контента! вы крутые, ребята!
это самый адекватный урок по анимации в фигма, еще не видела, чтобы кто-то использовал именно вариативность компонентов и смарт анимейт, просто облегчил жизнь мне :)
Рады помогать)
У нас еще много полезного на канале
Ура! Такой ценный урок! Спасибо большое. Давно слежу за работой halolabteam, Ваш дизайн узнаю среди тысячи! А тут ещё такой годный материал на ютубе!
Вы потрясающий !)
Супер контент!!! Спасибо!!! Ответили на вопросы, на которые не могла найти ответа!!!))) Пожалуйста, больше такого контента😊🙌🙌🙌🙏🙏🙏
Спасибо! Интересно и полезно
ААА спасибо :) Наконец то кто то объяснил. спасибо :)
Очень круто мужик! Спасибище!)) Почти сайт Apple🙂
Привет! Впервые, кажется, комментирую видео на ютубе. Супер полезный ролик, спасибо большое!!!
Спасибо, приятно читать такие комментарии🖤
Wow this is one crazy animation 💯👍
Спасибо, я точно узнал больше о фигме
Thanks for lessons
Взрослая канитель!!!
Спасиб😂
👏🤝👍
как понять, что ты связь на параллакс делаешь on click? типа этот параллакс происходит после клика что ли? Но ты же скроллишь? Короче как сделать так, чтобы у меня на всём лендинге работал параллакс во время скролла?
Это имитация скролла. К сожалению у фигмы нет пока анимации на скролл.
Ребята, привет! Спасибо вам за урок! Скажите, пожалуйста, почему после завершения анимации меня перекидывает на первый экран вместо того, чтобы оставаться там, где я кликаю? Я делала по вашему видео клик для горизонтального скролла, но меня перекидывает на первый экран зачем-то
Но в итоге получилась анимация не при скролле, а при клике( Или просто потом когда передаем верстальщику то говорить что это при скролле? А то вы сказали что надо уточнить, что это именно при клике
Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊
Выше так же ответил)
@@maisjandesign спасибо большое)
Подскажите, если делать такую анимацию к примеру в principle, насколько это имеет смысл? Спрашиваю, чтобы понять, что лучше учить) спасибо
Принцип анимации практически одинаковый. Но лучше учить фигму так как все собрано в одном месте
Урок супер. Подскажите, пожалуйста, есть ли возможность настроить difference эффект так, чтобы при попадании текста на цветной фон/фотографию он был белого или черного цвета, а не инвертирован? Или может знаете плагин решающий эту проблему? Никак не могу найти решение
Если вам нужна фиксация и анимация то только такой сложный вариант имитации. Или же с помощью маски, если вам не нужна анимация
Как делать анимацю на кнопку в шапке ? При скроле чтобы опускалась до нужного блока а кнопка меняла цвет?
попробуйте этот урок th-cam.com/video/piZlQbjK2LA/w-d-xo.html
то есть это не анимация скролла. а анимация при клике. будет ли проблема у верстальщика? ведь нужно сделать анимацию при скролле
Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊
подскажите, пожалуйста, как видео вставили такое?
Figma поддерживает gif формат. Так что можно ставить гифку и в превью оно будет проигрываться
Фигма уже поддерживает небольшие по размеру фрагменты видео 🙌🏻😁 ура
Не понимаю почему у меня два слоя цвета над кнопкой сливаются в один и получается при наведении верхний слой просто накрывает кнопку? то есть я делал два слоя цвета над кнопкой, а едет при ховере один
Вы оба слоя смещали с разной дистанцией в первом состоянии?
@@maisjandesign а какая дистанция должна быть у двух этих слоев? В макете просто один над другим
Какой таймкод? Так могу точнее понять и подсказать
@@maisjandesign а эти два слоя как надо размещать? Строго один под другим или нижний должен вылезать?
@@maisjandesign начиная с 10:13, такая же проблема
а как сделать анимацию именно по скролу а не клику ?
Такой функции пока нет в Figma