Loading Animation/Animated Intro In Figma | Figma Tutorial
Вставка
- Опубліковано 19 сер 2024
- 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:
Apple card design using glassmorphism: • Glassmorphism Apple Ca...
Dark mode in Figma: • Enable Dark Mode Into ...
Animated Switch Buttons In Figma: • Animated Switch Button...
Neumorphic Animations in Figma: • Amazing Neumorphic Ani...
Finally UA-cam suggest me something cool 🔥❤️💝
Wow… what a great tutorial with such a therapeutical music, thank you for sharing it
Super easy and functional! Loved it thanks
good explanation and the subtitles (instead of voice) only make it better.
nicely done and it was very easy to follow and understand it. I appreciated your work bro thanks for the idea...
muchas gracias!! me sirvio muchisimo y super claro los pasos a seguir! 😃
hola, a mi no me deja porner el after delay, me aparece en gris, ¿porque sera?
wow fue más fácil de lo que pensé! gracias!!
woww, quedo muy hermoso, muchas gracias por el tutorial
Gracias me ayudo mucho a darle un poco de diferencia a mi estática 😃
Sick intro btw!
Sounds Great on the sony SXRS!
I think that's the model...
Thank you very much!!!!!!!!
thanks man it is working fine😊😊
Great tutorial! Thank you!
how to export the animation after?
U can play it and share the link Ig?
Thank you so much, I am trying to do an Alar project.
----- 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
wow easier than I expected :)
thank you very much! good music and video
Awesome, thank you!!!!
thank you... it's working
Amazing job! weldone!
excelente amigo, muchas gracias.
hago todos los pasos igual al video pero no me resulta
awesome tips thanks
is there a way to export the video/animation file after?
But in my case the circle is not expanding in first screen? Can u help?
Sumit i got the solution just check whether the circle and the rectangle have the same name and if it doesn't work increase the first screen delay time to say 2000 or 3000 , you will definitely see the animation
Tengo uh problema cuando quiero colocar el after delay, aparece en gris no me deja seleccionarlo, podrias indicarme cual seria el problema?
how did you do the big square thing.. ?
i dint get it..
Hey in my case the rectangle dosent go backside of my frame.... what to do??
Please change ur font so our eyes can focus more🎉❤
Hi, man! I really love it. It actually worked for me, but I don't know why there's any random lines shown when I play the prototype. Please help. Thank you
You might have drawn something and forgot to delete it, look in layers section if there’s anything unwanted then delete it.
I’m trying to create a react website. Would you please describe how I would incorporate this? Many thanks🙏🏾
You have to construct interactive components that gona serve to an figma plugin named Figaro and then, you can use it only by running the program onto your figma canvas project, select the interactive component that you made and the plugin will automatically generate the interactive component react-code...Tanks to ΚΛΤΤΛΧ
hi!.. can you help me, I'm trying to create this animation .. but not able to get the circle blow out effect
Give the circle and square exact same name, take care of capital and small letters as well both name should be exact same for the animation to work.
same problem. that worked for me. why does it matter if it is the same name?
@@KristenDadesho yes it worked, you should put the same name.
Please tell me that how I can create this animation in android studio, thank you
HOW can I export this file for development , thank you for you effort
HEY MAN IT WORKED FOR ME BUT IN OTHER CASE DIDNOT WORKED LIKE CHOOSING FRAME WHICH IS ALREADY IN A FRAME THEN MAKING ITS PROTOTYPE AND U ONLY TOLD IN VIDEO TO NAME SQUARE AND FRAME GIVE SAME NAME WHICH IS DONE BY ME BUT NOTHING SEEN
KINDLY HELP PLZ!
After delay was unavailable for me
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?
There must be something that you are missing, have you seen the NOTE given in the video as well as in the description about naming?
OkI checked and they are named appropriately - must be something else. Thx for your reply. @@thefigmaguy
Ok I figured it out just in case you're curious. I had placed the product name and circle in a frame and grouped them. Once I detached them, it works now.
Si può utilizzare con shopify?
Will this work on adobe xd too??
Bro how to download that picture in website
Can you add it to bravo studio I tried to but it doesn't work in bravo vision and thank you
Will try✌🏻
@@thefigmaguy thank you brother . You saving my life ❣️
@@thefigmaguy have you tried to add it on bravo studio?? I'm really waiting for the tutorial
bro where did u find the top iphone bar?
You can find it here: www.figma.com/file/2Z9EUZIj05PWXvuuvyHjlJ/Mobile-UI-kit-Community
Tell me the name of illustration u used in this animation?
flexiple.com/illustrations/
🥰
not work
I didn't grow up