Create PARALLAX SCROLL EFFECT In Figma | Figma Tutorial
Vložit
- čas přidán 28. 08. 2024
- #figma #parallax #figmaanimation
In this video, I'll show you how to create parallax scrolling animation in Figma. If you found this video useful then don't forget to like, comment, and share this video.
Image Link: www.freepik.co...
Check Out Previous Videos
Fingerprint Animation: • FINGERPRINT SCANNING A...
Drop Down Animation: • How to Create Interact...
Onboarding Animation: • Create App ONBOARDING ...
UI Design Challenges: • Daily UI Design Challe...
UI Design Resouces: • UI Design Resources
Figma Animation Tutorial Playlist: • Playlist
Keywords: figma, figma tutorial, parallax animation, parallax scrolling animation, parallax scroll effect, figma prototypes, figma tutorials, figma tutorials for beginners, parallax animation in figma, website animation in figma
@10:10 You can drag and select multiple prototype arrow paths. You can hold shift to select even more. This Dave's you time from doing one at a time
Awesome work!
Thanks a lot!
I want to follow this but I don't understand the separating the foreground and background in AI. The layers are not seperate like what you have in the tutorial.
Thats a nice question but you can ungroup all the layers in AI, then select your desired layer copy it ctrl +C and then paste ctrl + V directy to figma, and repeat this process until you get all your desired layers seperated.
@@009hawks that's a lot or unnamed groups and layers ! How can i separate the?🥲
Love it! Very helpful, just what I was looking for, thank you! ❤
Glad it was helpful!
that's amazing! thank you, very clear! great job ;-)
Glad it helped!
i found new figma legend bro love you
❤
Its amazing 😊
Good job
Thank you so much!
It is an amazing tutorial
Thank you!
You solved my doubt in seconds❤
Glad it helped you
Tip: Use grid view may seems situational but it's VERY useful!.. specially if you're new.....
Wonderful demonstration. Thank you for the tutorial. Could you link me to where you got the image and how you separated the background?
Thank you!
Please check the description for the image link and I have used Adobe Illustrator to remove the background.
THANKS BRO
U GAVE ME AN IDEAA TO TEST MY SKILLS
Great!
Best video of the day... ❤
Thank you ♥
Thank you so much!
You're welcome!
Great demonstration
Thank you!
very helpful, thank you
Glad it was helpful!
That's facking Awesome 🍪
Thank you!
guys how do you separate the background and frontground of the image
❤❤Great! I appreciate for it. Thanks!❤❤
Glad you liked it
You can press and hold the space bar while moving elements around without throwing them out of the frame.
Yeah!
Very helpful
Glad it helped
Nice tutorial ❤
Thank you! 😊
Thank you, sir
Welcome!
Awesome video but what tool was used in creating the different individual elements? Like are there tools that be used to remove the whole background and leave the moon?? Or the other trees? You get my question right?
I have used the Adobe Illustrator to separate the background.
Great
Thank you!
How did you make part of the paralloax text to go behind the tree
You need to separate the background of the image
Loved this... But can someone help me to publish this as a dedicated website pls
Vamos❤
how to add AI file in figma help me
Show love and subscribe. Thank you. Quick question is it possible to implement this into Wordpress (elementor) or better done without elementar or other page builders. Just wondering… thank you 😊
Yes, you can implement into WordPress using page builders.
¡Genial!
damnnn😍😍😍
Thanx Bro
Welcome!
nice
Thanks
How to separate the background and foreground?
You can use Adobe Illustrator to separate the background
Do you have a link to that background asset you are using in this tutorial?
Check the description for the asset link
is scroll and drag is samething?
No, that's what I was going to ask, about how can I do it with scrolling. Because it's different. To drag is to click and move the cursor and scrolling would be using the mouse scroll up and down
Hi, where did you get these images? Also, how did you separate the foreground and background?
You can get these images from Freepik and I have used Adobe Illustrator to separate the background.
@@pixxelex Thank you!
Image should be downloaded in which format
Download the Adobe Illustrator file
This is NOT a Figma tutorial because I must to change and save images in Photoshop
btw how to separate the image from its background, help me out in new to this.
I've used Adobe Illustrator to separate the background
please what did u use to remove the background
I have used Adobe Illustrator to remove the background
Bro how did you separate the image from its background without the background being cut at 0:19? Please explain.
I've used Adobe Illustrator for removing the background
@@pixxelex Bro please explain in a video i need it. It's a request from your subscriber.
Just copy the foreground layers (inside Adobe Illustrator) and paste them inside the Figma. Same with the background layers.
Very cool! How would you get this to html?
Thank you! and you have to code it manually
From where did you get these pictures
Where can I search for?
Check the description, I have given the image link
It's on drag not a scroll tutorial for that too
Yeah, it's just a prototype
Sweeeet
Thanx!
Your tutorial is great and I've learned many new things. But please use your own voice and explain all the things. For example you're telling what to do with the next frame but you're not explaining why we have to make changes in the previous frames.
(And also the AI voice is annoying)
Thank you so much for your feedback. Will try to add my own voice in the future videos.
How to seperate BG and foreground
You can use Adobe Illustrator
thank you
@@pixxelex
Can you post a video on it
@@pixxelex
Get some premium AI voice to narrate your videos. Or a different one....this free one is overused and fatigued to death. Other than that, thanks.
Thank you for your suggestion
Thank you! How about on scroll ?
Welcome! It's just a prototype