Тёмный

Loading Animation/Animated Intro In Figma | Figma Tutorial 

The Figma Guy
Подписаться 4,7 тыс.
Просмотров 198 тыс.
50% 1

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...

Опубликовано:

 

10 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 64   
@gordxrohit
@gordxrohit 2 года назад
Finally RU-vid suggest me something cool 🔥❤️💝
@justinsmith6362
@justinsmith6362 3 дня назад
Excelente, esto me hara lucirme en mi entrevista de trabajo, deseenme suerte
@Alisa-inspiration
@Alisa-inspiration Год назад
Wow… what a great tutorial with such a therapeutical music, thank you for sharing it
@dianaisabelgarciaarguello265
@dianaisabelgarciaarguello265 11 месяцев назад
Super easy and functional! Loved it thanks
@user-vz3lk6ht2u
@user-vz3lk6ht2u Год назад
good explanation and the subtitles (instead of voice) only make it better.
@shah87874
@shah87874 Год назад
nicely done and it was very easy to follow and understand it. I appreciated your work bro thanks for the idea...
@maharun
@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
@evelynbravo9919
@evelynbravo9919 2 месяца назад
woww, quedo muy hermoso, muchas gracias por el tutorial
@Agoom15
@Agoom15 Год назад
muchas gracias!! me sirvio muchisimo y super claro los pasos a seguir! 😃
@danielaburgos2686
@danielaburgos2686 Год назад
hola, a mi no me deja porner el after delay, me aparece en gris, ¿porque sera?
@thegentlemandude
@thegentlemandude Год назад
Sick intro btw! Sounds Great on the sony SXRS! I think that's the model...
@katherinnesanchez8838
@katherinnesanchez8838 2 года назад
Gracias me ayudo mucho a darle un poco de diferencia a mi estática 😃
@nataliaruiz2668
@nataliaruiz2668 Год назад
wow fue más fácil de lo que pensé! gracias!!
@crhynee6203
@crhynee6203 Год назад
how to export the animation after?
@zara98_n12
@zara98_n12 Год назад
U can play it and share the link Ig?
@danielaburgos2686
@danielaburgos2686 Год назад
Tengo uh problema cuando quiero colocar el after delay, aparece en gris no me deja seleccionarlo, podrias indicarme cual seria el problema?
@ZynthyZin
@ZynthyZin 2 года назад
Thank you so much, I am trying to do an Alar project.
@sumitrawal9769
@sumitrawal9769 Год назад
But in my case the circle is not expanding in first screen? Can u help?
@angaar222
@angaar222 Год назад
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
@LAMODÉLISTE
@LAMODÉLISTE 2 года назад
Thank you very much!!!!!!!!
@17rayma
@17rayma Год назад
Great tutorial! Thank you!
@cannoncrazy225
@cannoncrazy225 2 года назад
is there a way to export the video/animation file after?
@majo53847
@majo53847 Год назад
hago todos los pasos igual al video pero no me resulta
@sidtech10
@sidtech10 2 года назад
thanks man it is working fine😊😊
@angelswhisper9436
@angelswhisper9436 2 года назад
how did you do the big square thing.. ? i dint get it..
@StarTall
@StarTall Год назад
thank you very much! good music and video
@nitinbaviskar417
@nitinbaviskar417 Год назад
Hey in my case the rectangle dosent go backside of my frame.... what to do??
@rishitakundu1865
@rishitakundu1865 Год назад
thank you... it's working
@tomashruska2171
@tomashruska2171 2 года назад
wow easier than I expected :)
@michellekarolyne
@michellekarolyne Год назад
Awesome, thank you!!!!
@balogunoluwapamilerin942
@balogunoluwapamilerin942 Год назад
Amazing job! weldone!
@jeanpierremendezreynoso7069
@jeanpierremendezreynoso7069 2 года назад
excelente amigo, muchas gracias.
@devanshbhardwaj13
@devanshbhardwaj13 2 года назад
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!
@enjoymusic2267
@enjoymusic2267 Год назад
Please tell me that how I can create this animation in android studio, thank you
@kimchill1888
@kimchill1888 2 года назад
awesome tips thanks
@ujubanton2047
@ujubanton2047 2 года назад
I’m trying to create a react website. Would you please describe how I would incorporate this? Many thanks🙏🏾
@denysferreira6635
@denysferreira6635 Год назад
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 ΚΛΤΤΛΧ
@lonetree66
@lonetree66 6 месяцев назад
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?
@thefigmaguy
@thefigmaguy 6 месяцев назад
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?
@lonetree66
@lonetree66 6 месяцев назад
OkI checked and they are named appropriately - must be something else. Thx for your reply. @@thefigmaguy
@lonetree66
@lonetree66 6 месяцев назад
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.
@adhingrha
@adhingrha 2 года назад
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
@thefigmaguy
@thefigmaguy 2 года назад
You might have drawn something and forgot to delete it, look in layers section if there’s anything unwanted then delete it.
@anonymous_reaction
@anonymous_reaction 2 года назад
Si può utilizzare con shopify?
@meenaloshini7905
@meenaloshini7905 Год назад
Will this work on adobe xd too??
@-BIM-with-me-
@-BIM-with-me- Год назад
Please change ur font so our eyes can focus more🎉❤
@Hossamaboliela
@Hossamaboliela 2 года назад
HOW can I export this file for development , thank you for you effort
@aasik9575
@aasik9575 2 года назад
Bro how to download that picture in website
@teetotee
@teetotee Год назад
After delay was unavailable for me
@universe_verses
@universe_verses 2 года назад
Can you add it to bravo studio I tried to but it doesn't work in bravo vision and thank you
@thefigmaguy
@thefigmaguy 2 года назад
Will try✌🏻
@universe_verses
@universe_verses 2 года назад
@@thefigmaguy thank you brother . You saving my life ❣️
@universe_verses
@universe_verses 2 года назад
@@thefigmaguy have you tried to add it on bravo studio?? I'm really waiting for the tutorial
@kinzaaslam4693
@kinzaaslam4693 2 года назад
Tell me the name of illustration u used in this animation?
@thefigmaguy
@thefigmaguy 2 года назад
flexiple.com/illustrations/
@vicentesanches9042
@vicentesanches9042 2 года назад
bro where did u find the top iphone bar?
@thefigmaguy
@thefigmaguy 2 года назад
You can find it here: www.figma.com/file/2Z9EUZIj05PWXvuuvyHjlJ/Mobile-UI-kit-Community
@ashokdewasi96
@ashokdewasi96 Год назад
🥰
@lifhkm19
@lifhkm19 6 месяцев назад
not work
@bekjonbekjon9399
@bekjonbekjon9399 2 года назад
I didn't grow up
@anjalibara4006
@anjalibara4006 2 года назад
hi!.. can you help me, I'm trying to create this animation .. but not able to get the circle blow out effect
@thefigmaguy
@thefigmaguy 2 года назад
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.
@KristenDadesho
@KristenDadesho 2 года назад
same problem. that worked for me. why does it matter if it is the same name?
@fanpattinson
@fanpattinson 2 года назад
@@KristenDadesho yes it worked, you should put the same name.
Далее
How to create Splash screen animation in Figma
3:51
Просмотров 10 тыс.
Design Animated Logo Splash Screen in Figma
6:19
Просмотров 72 тыс.
iPhone 16 - презентация Apple 2024
01:00
Просмотров 60 тыс.
Animate Text in Figma Like a Pro | Figma Tutorial
5:42
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 799 тыс.
5 Easy Animations in Figma - Smart Animate
5:09
Просмотров 241 тыс.
Figma Tutorial: Fake 3d Rotation in Figma
5:51
Просмотров 176 тыс.
Awesome Micro Animations With Figma Tutorial
18:09
Просмотров 271 тыс.
world's shortest Figma course
6:54
Просмотров 305 тыс.
iPhone 16 - презентация Apple 2024
01:00
Просмотров 60 тыс.