Figma tutorial : Designing a full Website with Scrolling Animation in figma

Designing a full web design scroll animation in figma, parallax scroll animation in figma, website prototype in figma, landing page animation figma, carousel animation figma, figma scroll interaction,figma, scroll animation website, figma sticky header on scroll, mouse scroll animation figma, figma auto scroll animation, website prototype in figma
Hey there, welcome to my channel! Today, I'm going to show you how to make your website design more exciting by adding cool scroll animations using Figma. Imagine your website coming to life as users scroll through it - that's what we're aiming for! I'll break down the process into easy steps, so even if you're new to design, you'll follow along just fine.
We'll learn how to make elements move, fade, or change as people scroll down the page. By the end of this video, you'll have the skills to make your website stand out and keep visitors hooked.
Let's dive in and transform your designs into immersive experiences!
If you have any suggestions for improving the design don't forget to comment below
Like 👍| Comment 👇 | Subscribe 🙏
My Favorite Book for Ux Design
Laws of UX:- amzn.to/4bs3Tqp
Download the Source File via the link and start creating!
vidscape.gumro...
let's Connected:-
Instagram: / vidscape_code
LinkedIn: / roushan-sharma-51a032202
My affiliate links:-
Note:- If you purchase anythig from here it will be a small help to me
Laptop :-amzn.to/3UuFg6j
Mouse:- amzn.to/49pcPer
keyboard:- amzn.to/3upf82i
Stand:- amzn.to/3SzxYvG
Tabs:- amzn.to/487VIge
Hire Freelancer from fiverr:-
video editing:- bit.ly/3OxIja8
logo designer:- bit.ly/3w2bHik
UxUi Designer:- bit.ly/49sedgh
Watch more :-
Redesign Uber website figma | Uber web design figma
:- • Redesign Uber website ...
Headphone website design in figma (part -1) | Figma tutorial
:- • Headphone website desi...
how to create mockups using figma plugins | figma mockup tutorial
:- • how to create mockups ...
food Delivery App design in figma with Prototype | Mobile App Design
:- • food Delivery App desi...
Tags:-
#figmatutorial #figma #webdesign
#uiuxdesign #designprocess #userexperience #creativedesign
#websitedevelopment #digitaldesign #designinspiration #uiuxdesigner #landingpage #figmaforbeginners #figmadesign #figmaanimation
____________________________________________
Music track: Tech by Aylex
Source: freetouse.com/...
Royalty Free Music for Videos (Safe)
Music Info: Groove Day - Soul-Prod Music.
Music Link: bit.ly/373YC76

[@VidscapeCode]

Download the source file via the link and start creating!
vidscape.gumroad.com/l/vrzone

[@pranjaljain2721]

I can't see image file in the description. Can u plz add?

[@VidscapeCode]

@pranjaljain2721 Just tap on the above link and pay the minimum amount for my efforts and download the Source files along with the design template

[@KwameGyanko]

@@VidscapeCode no we want it for free 🙃

[@patelpratik6803]

Genius bro i didn't knew how to create that effect on existing design and i learn from you , thnaks a lot❤❤❤

[@TatakaeGaming06]

You just gained a new subscriber ❤

[@sairohith2121]

Thank bro best project practice keep going make more videos 🎉

[@DanilMuzikNew]

I want to collaborate with you for our website landing page projects, can you do it?

[@SamnericOlubs]

Bro I totally got lost in the aspect of creating components for prototyping... It's not giving same result as yours. for example the hero section. I duplicated the glassy section so I can turn to component which i did but when I was adding the components back to the original frame so it could prototype, it is not working... can you please give a breakdown on the prototyping aspect?

[@SamnericOlubs]

It's not just component you created but variant. Thank you

[@VidscapeCode]

My Favorite Book for Ux Design
Laws of UX:- amzn.to/4bs3Tqp

[@rajajieating]

i made it thanks

[@hafsasuleman582]

How did you slightly down the card frame from the first frame ??? I have literally been trying for the past 2 hours but I failed.

[@Marketingtool1]

@@hafsasuleman582 zoom out and select the layer to move it

[@UIdrafts]

loved it

[@MansimranKaur-ut1zg]

Hi Sir, actually that small image which u have used on the top is not their in the drive which u have provided. Can u please add that image.

[@JansicleTeodoro]

Hi there! I stumbled upon your video and have a question. Can I create a landing page in Figma and then export it to Elementor? I work in online sales and want to know if it's possible.
Also, can I add a video container in Figma? If so, how do I do it?

[@TheNowFocusExperience]

awesome design

[@TobiAgara]

How do I get the image

[@chainatown8809]

so clean, can you give us the figma file pleaaase ?

[@MubeenShan-fu1zm]

good video very use full

[@darkhitech]

Doing daily UIUX, at day 1

[@cbijay]

Where did you get those images ?

[@ShreyaSoftintra]

what to do if constraints section is not visible

[@nischaln5758]

Can you check it out

[@aliyahdaniel289]

how can i get the image use in this design

[@VidscapeCode]

Check description

[@aliyahdaniel289]

@@VidscapeCode thank you very much

[@aliyahdaniel289]

the very little image the vr itself how can i get it

[@meshwahirpara1709]

I didn't get from vr zone

[@JasonChalfant-b2z]

Thomas Sarah Gonzalez Richard Miller Brian

[@memimo17]

It would have been better if you had added your Instructions

[@real_editz31]

Ye end m ‘google play. App store ' wala icon or assets kha se liye if anyone can suggest me

[@maedehraja6760]

کاش لینک صفحه فیگماشو بزاری🫠🫠

[@MuhammadShehriyar-u7y]

Dude, Please create a detail on website design using variables, components etc.... Means a proper project type please please please 😢😢

[@arjunmk8034]

Great tutorial video. I really loved your efforts. Waiting for more interesting tutorials 😊❤

[@umairjaved.786]

Thanks Vidscape Code. It is very informative video. Thanks again🥰

[@JerrellMerica-c8z]

Gonzalez Jennifer Harris Brenda Brown Maria

[@Just.emmy12]

This is so clean

[@narayondas7522]

Need more 😊

[@Historypress-pq4ng]

Thanks for your help Vidscape.

[@DigitalUnveil-byhadi]

Bro! your thumbnails are outstanding. Which app do you use?

[@abey1424]

bro i need photo
😔😔

[@abrahammateoaquino185]

Everything was going good unitl i placed the components, when i play the simulation everything goes black y don't work, some help?

[@Cognition-Lane-AV11]

love it! how can i use it as function website should i code it or convert it to code or what ?

[@VidscapeCode]

Yes, you can use the Figma plugin called "figma into html", but I suggest you have a little knowledge of coding, it might help... And thanks for watching, I hope you enjoyed it !

[@ThePawanKrTiwari]

Bro you missed some images in drive you've provided to use that you're using in this project, Update if it possible.

[@MuhammadFaisal-mp4gm]

It's not work 😔

[@md.shahadathossain4639]

Virtual not vartual

[@Afsharocksss]

Wow amazing video thnx for this tutorial ...very much needed yr ...gbu❤😊

[@mbrdesigns24official]

google play ka jo use kiya apne kya bolty isko.. Icon he khety hain and where i can find it from ?

[@rajajieating]

i made it thanks

[@SuhanaRani-c1h]

why this website design not working in mobile? its fully blank in mobile.

[@sandeepv1306]

Loved it.. but my doubt is how to publish this as website

[@VidscapeCode]

If you want to make it a real website, you'll need to code it

[@andressarichelen37]

​@@VidscapeCode
Voce não pode simplesmente pagar por uma plataforma como a hostinger ou Framer pra tornar esse site real?

[@Mvddgg]

I have a problem , my oval gradient in first section is out of the frame when i duplicate it for prototype

[@lajmoneyyoung]

POETRY

[@SooryaNarayananAramana]

Ok, but how do I convert the entire figma file into a website?

[@sarmad6166]

Can you provide me with the final figma design, i want to convert it into website using html and css?

[@HansJosef-vf1hg]

Thx made

[@Ariyudha-hc2tt]

Wow, inspirative design. gonna add it to my moodboard

[@buosas1572]

can u share the pallete? tnx

[@VidscapeCode]

I'll add it to the file

[@markfrancisa.osiana566]

@@VidscapeCode I'm waiting for the pallete too, I've checked the file, but still the same :(

[@RavikumarGattu]

It will be good if you explain what you doing

[@IPGMediaCo]

How did you export this design?

[@nischaln5758]

There are other images missing in the drive

[@egzonshala8168]

can you provide colors please

[@VidscapeCode]

I'll add it to the file

[@bhushandewangan2739]

Prototyping not happen in my work

[@rajabiswas8018]

please share the color pallate

[@VidscapeCode]

#100425, #DC00D3, #0CFAF5, #ECECEC

[@iamsalonitayal]

morph plugin not working :((

[@shabnamaara1809]

Day 1 of ui/ux project

[@MeaganAshleyy]

whats happening at the end? after you place the component set frame on top of the frame, i get lost. are you deleting something?

[@VidscapeCode]

Yes, I've removed the normal frame and replaced with a set of components, so that it will animate

[@TaleTroverAI]

amazing vid g keep it up

[@TaleTroverAI]

Hey I have a question, when you replace the existing frames with the new component frames do you delete them? Or do you just overlay the new above the previous ones? Hope you understand! Thank you so much.

[@real_editz31]

Yes, he dlt them.

[@terezabritta4906]

Thanx... I had the same problem :D

[@real_editz31]

Can you plz tell me from where to get those images

[@dany0o]

Full responsive?

[@mbrdesigns24official]

so helpful

[@mudasirazhar]

Amazing bro

[@charlesjnr9072]

How did you remove the background in the first pic

[@VidscapeCode]

Plugin "remove bg"

[@charlesjnr9072]

@@VidscapeCode okay thanks.was going through the comments I saw you said you can’t directly publish this website you have to code it what if I don’t know how to code? Any other way to publish without coding my self or coding at all

[@nbbfactsshorts8614]

wow sir

[@LaYLoRaimova-y2j]

🔥🔥🔥🔥

[@VillageTuber.]

nice

[@UJJWALBHUYAN-vy3ln]

Can you provide the colour please

[@VidscapeCode]

#100425, #DC00D3, #0CFAF5, #ECECEC

[@powerguardgamer7754]

u didnt add image files in discriptions

[@VidscapeCode]

I am really sorry.. please wait, I will add

[@Mofumofu-rw5eb]

it seems like ai images

[@shaha_alam]

Excellent

[@vinodkashyap-jl3lw]

Bro ye simple h

[@vinodkashyap-jl3lw]

But your channel is not simple😊

[@geronelo1435]

Espectacular, gracias por el aporte

[@DeborahOke-tj5nt]

this is so nice... I'm a new web designer this is a source of inspiration to me

[@waliexpert9380]

Great job. Loved it