Parallax Scroll Effect - Figma Tutorial

Master UI design for $9 with my new ebook!

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 👇

For website designers & freelancers 👇

My Figma Mastery video course 👇

----------------------------------------------

Connect with me 👋

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!

[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! 👍🔥

[yakubyilmaz]

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

[smileyface]

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 😇🙏

[snehapandey]

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

[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.

[mohsinop]

overall best content ever on a youtube channel thanks alot

[adeleyejames]

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

[IamShashi]

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😢…

[vivlogs]

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 🙏🙏

[mustaqahmedali]

Amazing 🤩 let try this one. For my upcoming projects

[tinamindrul]

I enjoy the sound with your mic so much!

[nishant]

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

[sergelyon]

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

[ericaamos]

Hey Adrian! I am REALLY glad to see your longer form videos on Youtube! 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]

Love the fact that all the keys being pressed is mentioned

[yashassbhandari]

Amazing video man, thanks for the tutorial!

[DivyeshNandwana]

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

[alizszakacs]

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! 🙏🚀

[DungBui-mwix]

Like first
Watch later
Thank u Adrian!!

[nwachukwunwankwo]

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