Loading Animation/Animated Intro In Figma | Figma Tutorial

Showing how to create loading animation/animated intro using wipe transition animation in Figma.

Note: "The name of the circle & the square should be the same otherwise the wipe animation won't work".

Like. Share & Subscribe to the channel for more design related stuff

More Useful Videos:

[gordxrohit]

Finally YouTube suggest me something cool 🔥❤️💝

[Alisa-inspiration]

Wow… what a great tutorial with such a therapeutical music, thank you for sharing it

[dianaisabelgarciaarguello]

Super easy and functional! Loved it thanks

[shah]

nicely done and it was very easy to follow and understand it. I appreciated your work bro thanks for the idea...

[vzlkhtu]

good explanation and the subtitles (instead of voice) only make it better.

[thegentlemandude]

Sick intro btw!
Sounds Great on the sony SXRS!
I think that's the model...

[maharun]

Design part

00:25 Start

00:35 Duplicate the frame
00:41 Delete all the elements present in it
00:49 Now again duplicate the new frame

01:01 add you logo to the first frame
01:25 create a circle around the logo
01:45 add color to the circle
02:07 name the circle

02:28 create a rectangle of full screen size
02:42 give the rectangle roundness of 200
03:02 give the same name to the rectangle and circle

03:16 add the rectangle to the second frame
03:24 give the 2nd frame same color as the circle

Prototype
03:47 prototype the first frame to the second

Then follow along

[justinsmith]

Excelente, esto me hara lucirme en mi entrevista de trabajo, deseenme suerte

[Agoom]

muchas gracias!! me sirvio muchisimo y super claro los pasos a seguir! 😃

[evelynbravo]

woww, quedo muy hermoso, muchas gracias por el tutorial

[cannoncrazy]

is there a way to export the video/animation file after?

[nataliaruiz]

wow fue más fácil de lo que pensé! gracias!!

[katherinnesanchez]

Gracias me ayudo mucho a darle un poco de diferencia a mi estática 😃

[StarTall]

thank you very much! good music and video

[ZynthyZin]

Thank you so much, I am trying to do an Alar project.

[lonetree]

Great tutorial. I saw something similar on another video but yours was better. Still, I followed your steps to the letter and I cannot get it to work. The circle does not animate and grow to encompass the screen before the home page slides in. It just sort of fades in. I can't account for it as all my settings are identical to yours. Any thoughts?

[sumitrawal]

But in my case the circle is not expanding in first screen? Can u help?

[anjalibara]

hi!.. can you help me, I'm trying to create this animation .. but not able to get the circle blow out effect

[danielaburgos]

Tengo uh problema cuando quiero colocar el after delay, aparece en gris no me deja seleccionarlo, podrias indicarme cual seria el problema?

[ujubanton]

I’m trying to create a react website. Would you please describe how I would incorporate this? Many thanks🙏🏾