No video :(

Parallax Scroll Effect - Figma Tutorial

Подписаться 46 тыс.

Просмотров 92 тыс.

50% 1

Work with my design studio → designme.agency
Master UI design for $9 with my new ebook!
👉 howtodesignbet...
Guys, I'm sorry to say but the Prototyping Masterclass is discontinued. I will be working on a new Framer program instead! More details soon :)
In this tutorial, we'll take a closer look at how to create parallax scroll effects in Figma. At the time, the only way to mimic this effect is by adding a number of drag triggers or adding a scroll bar. In the following episode, we'll discuss the first use case.
Here's a chapter breakdown:
00:00 - Intro
00:31 - Adding your designs
02:40 - Adding mockups
05:15 - Adding remaining frames
11:30 - Connecting frames
12:03 - Prototype Preview & Fixes
12:41 - Prototyping Masterclass
13:20 - Outro
----------------------------------------------
P.S. If you're interested in learning web, mobile, or Figma design, feel free to check out my Figma course and my design ebooks!
For mobile designers 👇
howtodesignbet...
For website designers & freelancers 👇
howtodesignbet...
My Figma Mastery video course 👇
howtodesignbet...
----------------------------------------------
Connect with me 👋
Instagram - / uiadrian
Twitter - / uiuxadrian
Linkedin - / adrian-kuleszo
Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!

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

16 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 67

@minkzoo Год назад

Hey Adrian! Just wanted to drop a quick comment to say thanks for the awesome design content! Keep up the great work and keep those videos coming. You're an inspiration! 👍🔥

@uiadrian Год назад

Thanks a lot Stevanus! Glad to have you here 🙌

@snehapandey2130 9 дней назад

superb such a great tutorial keep share more video and smooth understanding tutorial 🔥🔥🔥keep grow

@yakubyilmaz3506 Год назад

Finally a good tutorial on this effect, you explain it very well and you do it on live which is helpful! Great mic too

@335smileyface Год назад

Another amazing tutorial which makes even more excited about UI/UX and this whole learning process ! Thank you for what you do, I am forever grateful 😇🙏

@lloveis Год назад

Adrian!! Thank you very much for sharing with your knowledge and teaching us for free. Scroll design is my favorite and wanted to learn it for a long time. Thank you once again.

@vivlogs9752 Год назад

Awesome tutorial Adrian ! 🤩🤩 Next time can you build an app from start to finish showing all the passages in figma? That would be so useful! 🥹🥹thank you 🙏🙏

@IamShashi98 Год назад

I may be late on commenting but, the clock design on Instagram is sick…❤ I love it and this tutorial tooo… thanks for sharing your knowledge on Figma for upcoming web designers.. I’ll buy every thing on your gum road once I get my first job😢…

@sergelyon 4 месяца назад

the correct name of this vid should be "Parallax Drag Effect", you didn't use Scroll

@mohsinop4647 Год назад

overall best content ever on a youtube channel thanks alot

@adeleyejames8551 Год назад

Been waiting for this bro. See this on your Instagram page. Thank tho

@uiadrian Год назад

No worries! Hope it was helpful 👋

@mustaqahmedali1527 Год назад

Amazing 🤩 let try this one. For my upcoming projects

@uiadrian Год назад

Thanks! Good luck with your projects Mustaq!

@ericaamos3019 10 месяцев назад

Hey Adrian! I am REALLY glad to see your longer form videos on RU-vid! I watch your IG tutorials a lot! Can you please make a video on how to make 3D illustrations move. Like having little motion effects like bouncing, hover etc… thanks! 🎉

@mohammedrazim 7 месяцев назад

Love the fact that all the keys being pressed is mentioned

@FlyByWheels Год назад

Thankyou for the wonderful tutorial 🎉

@uiadrian Год назад

My pleasure! 😊

@tinamindrul4140 10 месяцев назад

I enjoy the sound with your mic so much!

@yashassbhandari1114 7 месяцев назад

Amazing video man, thanks for the tutorial!

@CARSSTREETNIGHTS 11 месяцев назад

Hi Adrian ! I did what you said, but the pages not go up and I want it to move with the mouse scroll movement, not with the drag and drop method. how can I do that Thanks

@jirowang110 22 дня назад

Mine is still a bit choppy when I drag. How do you get it to be a smoother transition?

@JohnXionidis Год назад

Awesome tutorial thank you!

@uiadrian Год назад

Thanks John! Glad I could help :)

@JohnXionidis Год назад

@@uiadrian Help? Your channel is an amazing gem on youtube, hope it grows a lot!

@nwachukwunwankwo2416 Год назад

is there a way to have the figma prototype actually use the parallax effect normally instead of using the drag feature?

@nishant7083 Год назад

Your first video and this video really made me think about design Hey brother how about a skillshare course ??

@alizszakacs5552 Год назад

Hi Adrian! Thanks for the amazing content as usual! I love your ebook as well and just purchased the Figma mastery course, but I wonder - is there a certificate to look forward to at the end of the course? Again, you are such an inspiration! 🙏🚀

@DivyeshNandwana 4 месяца назад

very help full video to beginners designer 👌👌👌👌👌👌

@CLOWNSTRAY 5 месяцев назад

Hey! Can you do a liquid fab button animation tutorial?

@therealdeal2247 Год назад

Oh yeahhh!

@uiadrian Год назад

🔥🔥

@user-td2dq4hp5u Год назад

Awesome 🙌

@anonymous-sz8jq 3 месяца назад

heyy how did get that header from? please help

@DungBui-mw1ix Год назад

Like first Watch later Thank u Adrian!!

@ITaims-ju3lb Год назад

:scream::scream::scream:Advance Figma Magic' Tips youtube.com/@DD.DesignStudio?sub_confirmation=1

@ahumblerequest5222 Год назад

Can we do this effect while scrolling with mouse wheel

@uiadrian Год назад

Not directly, but we could add a scroll bar and add an "On drag" trigger to it. I believe @TimGabe created a tutorial on this before :)

@Alsa971 Год назад

Do you have the entire Figma course ?

@adelaposse4379 10 месяцев назад

Is anyone struggling with the drag prototype effect in Figma? mine has like a stuck and slow flow

@amruta1817 5 месяцев назад

👍👍👍👍 thanx bro u sharing a amazing vedio🥳🙏🙏

@saurabhsarkar9817 5 месяцев назад

Hey, I have a question, when design all of thing autolayout is needed?

@LiiGitonga1 Год назад

Hi Adrian, Quick question .... How did you add the background visual around teh 5:12 timestamp?

@uiadrian Год назад

It's a design I created using this method 👉 instagram.com/p/CrLHNRNg8os/

@KEpi_Gaming Год назад

Please provide these 3 Photos that you screenshot and added in the frame

@hermesg2344 10 месяцев назад

Bonjour Mr Adrian, j’apprécie vraiment ce que vous faites et j’aimerais savoir si vous faites aussi des formations en Français sur Figma

@hellokitkath3329 Год назад

Hi! Do you have a practice file for this? Thank you!

@maryamashraf3033 Год назад

Sir please upload more vidoes

@priyanshusingh5192 10 месяцев назад

Hii Sir, I need your help to understand about UX/UI designing..... regularly I am consuming your designing content on Instagram and I want to know about figma 3D design how can we convert figma to WordPress..... I have lots of confusion Sir please reply back

@souravgoswami5858 10 месяцев назад

Thanks man

@abdullahigiwa2719 10 месяцев назад

Adrian please can you scroll back up? Is it possible?

@user-cz3jt1jn1g Год назад

@arjunvegeta 7 месяцев назад

can you please this figma file?

@javi7299 9 месяцев назад

biggg fannnnnn

@valueinvesting. Год назад

❤❤🎉

@uiadrian Год назад

🎉 🙏

@gorasia3568 Год назад

First,

@uiadrian Год назад

This deserves a cookie 🍪 Thanks for dropping by!

@rahul_lsh Год назад

❤w❤~~

@uiadrian Год назад

🙏

@JhonHalomoanSiregar Год назад

Plis sub indo 🙏

@user-eu5ep7ui8u Год назад

"please dont be on a drag interaction and actually be on scroll" thumbs down, waste of time. cause all we all naturally drag when scrolling down a webpage!

@uiadrian Год назад

What an idiotic comment. I explicitly state that there was no scroll trigger in Figma. Go waste someone else's time