Creating parallax with variables — Figma tutorial

In this tutorial we will create a real working parallax effect in Figma. Not faking it!

Chapters:
00:00 Intro
00:22 On the high level
00:38 Creating variables
02:53 Variable-based cursor tracker
08:05 Creating parallax layers
09:38 Setting parallax strength

Follow me here:

Music from Uppbeat:

[skoooots]

You are a goddamn god and I cant express how much I appreciate you right now

[soumilkumar]

Love the fact that we can learn and access the Figma file as well! Thanks for the amazing efforts and videos! You've got a subscriber :)

[jessicalima]

Not often I comment on videos, but I'm doing it here so more people can watch this one. Amazing tutorial, truly. Thank you for sharing your knowledge. Just subscribed to your channel.

[atb]

wow this is pretty advanced stuff here...awesome job! thnx for sharing

[fopesanchezebhota]

Now this is absolutely Never thought it'd be possible. But this right here? Genius!!!

[MariusLeica]

This video is amazing! It's realy show your skills and knowledge of figma. Thank you very much for your work and I really hope you can make more of this in the future!

[kraucifer]

Снимаю перед тобой шляпу, это очень крутая огромная и крутая работа.

[thiagotorelli]

WOW! Dude! This is INSANE! When I read the title of the video and saw the thubnail, the only thought in my mind was "IN FIGMA?!?! THE FUCK?!?!".

Amazing video! Congrats

[anmoljuneja]

Superb! Loved each second of the video

[emmygraphics]

Love your video bro, please keep creating more

[uiuxshoaib]

Bro it went through me head :D But its awesome, I need to rewatch it.

[saturnivideomaker]

WHAT THE :D OH WOW, YOU'RE SO AMAZING

[KakashiMendu]

Got the sub and like bud ! Would love the follow up of breaking down the illustration for parallax <3

[pheeh]

Дуже круто, я б навіть сказав ахуєнно!
Awesome stuff as allways! Thanks for sharing!

[amer]

Man thank you so much for the effort, i'm sure you heard about Framer, can you release a video about how we can do the same thing in Framer?

[brianamazzio]

I'm trying this out myself, but like others and I am running into the problem where you can't run 2 interactions simultaneously. I've downloaded the figma community file and trying to figure out what the "hack" is that you invented. So far, I can't figure it out. Can you help? This is positively amazing! best tutorials I've ever found for Figma prototyping an animation...

oh! and I figured you would be the guy if any to figure out a few more hacks that would push figma limits... Do you have a solution for movement along a curve?

[clipsdestroyer]

Great tutorial man, i love it. can u show how to generate the image for parallax effect?

[helios]

this is blackmagic 🔥 with this mouse direction-aware technique, maybe there's a way to make working rotative buttons ? ...

[felix-ngdl]

When you finished creating variables for X and Y, why didn't you show the results in the prototype?
My response: The X cursor works well, but when you create a variable for the Y cursor, the X cursor does not work because the Y cursor covers the X cursor frame.

[felix-ngdl]

me Again, not all UIUXs understand the instructions you make, they will comment that cursor X can work well, but when cursor Y is created, cursor

not all uiux can find out where the problem is..

for me, X and Y won't work at the same time because in your video you made the X frame an autolayout, and in the figma file you didn't explain step by step

I'm not trying to say you're wrong or anything, as a uiux I'm trying to find a way why this can't work and indeed I checked there was an error in the video you made.

If others follow your video instructions then they will be just as confused as to why X and Y can't work at the same time.

my answer is because in your video frame X you create autolayout