No video

Splash Screen Animation in 6 Minutes (Figma Tutorial)

  Рет қаралды 148,563

Tim Gabe

Tim Gabe

Күн бұрын

Пікірлер: 110
@pixelrubbish
@pixelrubbish 6 ай бұрын
Have you tried handing this to a developer yet? There are a few extra considerations when it comes to actually implementing these screens on iOS (and android), and you have to start on a static screen, then seamlessly pick it up once the app loads.
@gideonebikade2791
@gideonebikade2791 Жыл бұрын
I've been following your tutorials for a while now... And I must say that you've got one of the best and well structured contents for UI/UX designers. Great tutorial once again!!!
@TimGabe
@TimGabe Жыл бұрын
that’s sooo nice to hear, Gideon 🤩 thank you for sharing this kind comment with me!! 🙏
@creatorsmafia
@creatorsmafia Жыл бұрын
The step-by-step explanation and clear demonstration make it easy to follow and understand the process.
@landoreece
@landoreece Жыл бұрын
Love these tutorials. As someone mentioned already, they’re really well explained. Keep it up 👍🏾
@TimGabe
@TimGabe Жыл бұрын
much appreciated, Lando! 🤩
@JoyceOnuorah-lb5yg
@JoyceOnuorah-lb5yg 2 ай бұрын
This a great tutorial, it's just straight to the point and easy to understand. I love it, thank you.
@madhoundes
@madhoundes Жыл бұрын
This is dope , basicly mastering after delay making endless animation possiblites !
@TimGabe
@TimGabe Жыл бұрын
it really does!! happy you liked it, Ahmad 🤩
@neon7874
@neon7874 Жыл бұрын
Hey, Just wanted to drop by and let y you know that your video was seriously awesome! I mean, it was really great! As a fellow backend developer, you totally inspired me to dive into the front end stuff. Your presentation was so engaging and it got me all fired up about exploring the world of front-end development. I just wanted to say thanks for sharing your expertise and for giving me that boost of inspiration. Keep up the amazing work, bro!
@TimGabe
@TimGabe Жыл бұрын
so happy to read this. thank you so much for putting the time into a comment like this, my friend 💜
@jesusavendano5261
@jesusavendano5261 Жыл бұрын
I love your videos, i'm learning more about this. The prototype is a art
@TimGabe
@TimGabe Жыл бұрын
that’s awesome to hear, Jesus 🥳
@not2late2liberate
@not2late2liberate 20 күн бұрын
Very cool, I love it! Great job. Thanks for explaining so well. Subscribing!
@maryphinewandera2646
@maryphinewandera2646 Жыл бұрын
Thank you for that. My animation actually worksand looks insanely cool.
@TimGabe
@TimGabe Жыл бұрын
that's so nice to hear, Mary! 🤩
@davetheglitch_
@davetheglitch_ Жыл бұрын
This is amazing content, thanks for these tutorials Gabe. I guess I'm speaking for others too when I say we'd really love you to do a tutorial on after delay lol, that's one craft you've mastered and it'd be nice to share how you make use of speed and timings while animating ❤️
@TimGabe
@TimGabe Жыл бұрын
hey Dave!! that’s a very good content idea, I’ll keep that in mind. thanks a lot, my friend 🥳💜
@icarmelyne
@icarmelyne Жыл бұрын
This is my go-to channel for Figma! Incredible tutorials and tips. Thank you so much. When passing off animations to the devs, what steps should be taken?
@TimGabe
@TimGabe Жыл бұрын
being a go-to channel for Figma is exactly what I strive for!! thank you so much for the candid comment, Carmelyne! 🙏 well, maybe that's a video topic in itself! I'll add it to the list 🤩
@sameerhussain2579
@sameerhussain2579 Жыл бұрын
you pass figma files to the devs, the rest is on them to figure out
@user-me2bp7ph6o
@user-me2bp7ph6o 7 ай бұрын
thanks for the tutorial, im waiting for the next content
@TimGabe
@TimGabe 7 ай бұрын
thank you for commenting, friend!!
@marclindfors8670
@marclindfors8670 Жыл бұрын
Love your videos! ❤
@TimGabe
@TimGabe Жыл бұрын
thanks a lot Marc, definitely appreciate the kind words 💜
@HassanOmariprofile
@HassanOmariprofile Жыл бұрын
wow smart, looks amazing
@TimGabe
@TimGabe 11 ай бұрын
right? it's cool!!
@kunalkanwar2675
@kunalkanwar2675 Жыл бұрын
1. How much time it took you to become a good designer ? 2. what other applications you use for designing ?
@TimGabe
@TimGabe Жыл бұрын
it's taken me many years to feel that I can create consistently decent designs, but I guess that's the designer's curse -- you're never satisfied 😅 I love Framer! check out my playlists on it here: kzfaq.info/sun/PLOIq79MWqv85s7lYuRPCqHvqBFIGOdPsV
@cesaremasola
@cesaremasola Жыл бұрын
Very useful and well explained, thanks!
@TimGabe
@TimGabe Жыл бұрын
thank you Cesare! 😃
@monadang172
@monadang172 Жыл бұрын
Just love all your amazing videos! The instructions are pretty clear and easy to follow step by step. Keep up the good work plz
@TimGabe
@TimGabe Жыл бұрын
thanks a lot, Mona!! really appreciate it 😃🙏
@sarahigbinosa3004
@sarahigbinosa3004 Жыл бұрын
Thank you. well explained.
@TimGabe
@TimGabe Жыл бұрын
appreciate it, Sarah! 😃
@farhadsamadov3598
@farhadsamadov3598 7 ай бұрын
Loved you content, you have earned a new subscriber!
@TimGabe
@TimGabe 7 ай бұрын
that's amazing. thanks for the nice comment, farhad!
@FlutterUniq
@FlutterUniq Жыл бұрын
Good keep make videos like this , i relly like this type of content ❤
@TimGabe
@TimGabe 11 ай бұрын
thanks a lot for supporting!!
@prashlovessamosa
@prashlovessamosa Жыл бұрын
Well explained thank you.
@TimGabe
@TimGabe Жыл бұрын
thank you for commenting, Prashant! 😃
@andrescastillo07
@andrescastillo07 Жыл бұрын
Amazing as always! Can you do a video explaining the Custom spring feature and how it works? That's one of the animations that I never use because it's a little intimidating haha. Also, I always have this question about what happens if you don't set a starting Flow?
@TimGabe
@TimGabe Жыл бұрын
that’s funny Andrés, I actually have an upcoming video on that. 🤩 so stay tuned!! if you don’t set a flow starting point there is no way to play the animation (…unless you’ve created it as an interactive component and drag it into another frame that has a flow starting point) ☺️
@andrescastillo07
@andrescastillo07 Жыл бұрын
@@TimGabe hahaha we're connected! That's great! I'll look forward to that video. and thanks for answering my question! 😁
@TimGabe
@TimGabe Жыл бұрын
@@andrescastillo07 of course, happy to help!! 🤩
@burimislami1349
@burimislami1349 5 ай бұрын
Great and helpful video Tim! How would you export this for the developers to place it in app?
@henryoncode
@henryoncode 2 ай бұрын
i would also like to know this
@RyanFogelsong
@RyanFogelsong 11 ай бұрын
Love the tutorial! Is there any advice on how to export the animation once its complete?
@TimGabe
@TimGabe 10 ай бұрын
i'm using just a regular screen recorder for that (quicktime player on mac)
@user-rc3mr5pd6c
@user-rc3mr5pd6c Ай бұрын
@@TimGabe pls how do i record on figma
@azoozsaleh8331
@azoozsaleh8331 Жыл бұрын
we waiting for you ♡
@TimGabe
@TimGabe Жыл бұрын
thanks for the support, Azooz! 🤩
@asifullahkhan3070
@asifullahkhan3070 Ай бұрын
Thank you
@YasmeenAlzoghbi
@YasmeenAlzoghbi Ай бұрын
So good❤
@yessaelparra1065
@yessaelparra1065 11 ай бұрын
The thing is, after this process, what is the best way to convert all of this to code? do you have a video about it? like, the entire process from design to code? which is the best way?
@yessaelparra1065
@yessaelparra1065 11 ай бұрын
I'm a FIGMA beginner, I really love your channel
@dailymemies
@dailymemies Жыл бұрын
very informative video 👍
@TimGabe
@TimGabe Жыл бұрын
glad you liked it, my friend!!
@liorcohen2800
@liorcohen2800 11 ай бұрын
Nicely explained! thanks. I'm not sure though, can such an animation be developed based on this? Or is it for prototyping purpose? how would you hand if off to developers?
@TimGabe
@TimGabe 10 ай бұрын
there is no straight export, but you could work closely with a dev to have them replicate it!
@occasionallyhuman
@occasionallyhuman Жыл бұрын
you look like Bronn from Game of Thrones
@TimGabe
@TimGabe Жыл бұрын
haha, that's definitely a first!!
@itr1667
@itr1667 9 ай бұрын
il use this as my homeworkd XD
@TimGabe
@TimGabe 9 ай бұрын
sounds good, happy it's helpful 🤩
@sameerhussain2579
@sameerhussain2579 Жыл бұрын
Hi Tim, new subscriber here, thanks for the files in the description but, you could explain it in much more detail. For example, I had trouble following along in the frames part, how do you work around with frames, and is it important to convert them into frames or just the text elements would do? Like the text 'Splash' fading in from the left, how do i set the direction of fading elements. (left/right/top/bottom). I'll still look for more such videos in your channel playlists. So ignore this comment if you have already explained it at least once. I was trying to do something very similar but still struggled. We don't mind longer videos, especially someone like me who wants to learn from you. Keep the videos coming.
@TimGabe
@TimGabe Жыл бұрын
did you manage to solve this, Sameer? 😃
@sameerhussain2579
@sameerhussain2579 Жыл бұрын
@@TimGabe Yeah I did what I wanted to do in a mindless effort. But I am still yet to grasp this
@titan2969
@titan2969 Жыл бұрын
thanks
@TimGabe
@TimGabe 10 ай бұрын
thanks for commenting, my friend 😃
@ArifDewi1331
@ArifDewi1331 Жыл бұрын
Looks crazy cool! And how to use in in the app? Is that exportable along with animation?
@TimGabe
@TimGabe Жыл бұрын
unfortunately you can’t export these directly to work with apps. 😩 however you can give your developers the exact animations settings (timings, etc.) so that they can implement it!
@ArifDewi1331
@ArifDewi1331 Жыл бұрын
@@TimGabe than you for the answer, Tim! Poor devs 😄
@HaMeeda
@HaMeeda 5 ай бұрын
my question is, how do you hand this off to developers?
@carlal4808
@carlal4808 10 ай бұрын
Great content, thanks! The thing i don't understand is why instead of filling the frame with colour you use clip content, maybe i am missing some step 😢
@TimGabe
@TimGabe 10 ай бұрын
thanks for the support!!
@Scottyhutch1
@Scottyhutch1 Ай бұрын
Other than a great design, how can you use this in an actual app? I've created a loading icon and can't seem to export in a animated file.
@userfissher
@userfissher 3 ай бұрын
all tools are free, right?
@vaishalimanjare5636
@vaishalimanjare5636 Жыл бұрын
1000th like
@TimGabe
@TimGabe Жыл бұрын
wohooo! thanks a lot!!
@brunaabeijon2903
@brunaabeijon2903 Жыл бұрын
If I make a prototype like that is it enough for the developer to make it? We use to share a video file with him, but this way could be much more easy.
@TimGabe
@TimGabe Жыл бұрын
depending on the dev's experience, I think prototypes like these will be more than enough to convey your vision 😃
@purrfect_kitty_hub
@purrfect_kitty_hub Жыл бұрын
hi great video but how can i turn this into a gif for multiple frames in a row ? looking forward to your response
@TimGabe
@TimGabe 9 ай бұрын
you'll have to do a screen recording 😃
@suhairp3539
@suhairp3539 3 ай бұрын
Hi What did you mean by the background rectangle and how its added?
@mdwakifalam2077
@mdwakifalam2077 Жыл бұрын
I can't seem to find the "After delay" and "Drag to" features in the prototype section after the new update. Have anyone faced this issue?
@Nb33555
@Nb33555 Жыл бұрын
you need to click and select the whole frame on top left rather than from inside!
@TimGabe
@TimGabe 9 ай бұрын
this! 😃
@Ana-xy6zq
@Ana-xy6zq 10 ай бұрын
Hello, how do you make the frames fade and then appear and do the animation the same with the text, the truth is I didn't fully understand it, I tried it in my figma but it didn't turn out as expected ;(
@TimGabe
@TimGabe 10 ай бұрын
hard to explain in text, i'm afraid 😩 it should work if you follow the tutorial step by step 🙏
@Ana-xy6zq
@Ana-xy6zq 10 ай бұрын
@@TimGabe Yes, I did it haha my mistake was that I grouped the text and the circle and ungrouped it and it worked correctly haha
@dtriptv9093
@dtriptv9093 Жыл бұрын
Im very beginner...how did you put the fade in?
@TimGabe
@TimGabe 11 ай бұрын
using the smart animate option - i've got a bunch of videos on my channel if you wanna dig deeper 😃
@cdexzswzaqME
@cdexzswzaqME 26 күн бұрын
how can I use this on web like is there any option to convert it to gif or what ?
@auliarahmah9595
@auliarahmah9595 8 ай бұрын
how to fade it out?
@TimGabe
@TimGabe 8 ай бұрын
with opacity!
@caroladiazm.2434
@caroladiazm.2434 6 ай бұрын
How he align the form automatically?
@creativeideas8071
@creativeideas8071 Жыл бұрын
hey my animation isnt working like this can you help me out?
@shineydas129
@shineydas129 3 ай бұрын
can such splash screens be used for websites?
@Dnyanesh134
@Dnyanesh134 5 ай бұрын
why is it not moving to the next frame as it should...it does when i click tho
@mahaeb8328
@mahaeb8328 5 ай бұрын
Figma is a design app it won't make it animated you have to make it animated with the help of coding such as python,css,html etc
@kehkashananwar8508
@kehkashananwar8508 Жыл бұрын
how the Splash text fades out?
@TimGabe
@TimGabe Жыл бұрын
you simply change the opacity to 0% 😃
@kehkashananwar8508
@kehkashananwar8508 Жыл бұрын
@@TimGabe aaaahhh! I thought there is some other technique that makes your interactions so smooth.. cool man
@billtz.3213
@billtz.3213 3 ай бұрын
what is the hastag bg i dont get it I cant find it
@easyorigami478
@easyorigami478 28 күн бұрын
wat is font
@shahnawazkaratela800
@shahnawazkaratela800 11 ай бұрын
hey! how you clipped that text in step-2
@TimGabe
@TimGabe 10 ай бұрын
with a frame and clip content checked (i think)!
@modayshwood9415
@modayshwood9415 11 ай бұрын
Hi Tim How can I contact you .. There is a small job 4u .i need your help
@TimGabe
@TimGabe 11 ай бұрын
hey Moday! my email is contact@timgabe.com, but i rarely take on small projects nowadays since i don't have a lot of time outside of work and content creation 🙏
Master Figma’s Sticky Scroll in 4 Minutes
3:54
Tim Gabe
Рет қаралды 55 М.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 784 М.
🩷🩵VS👿
00:38
ISSEI / いっせい
Рет қаралды 18 МЛН
Comfortable 🤣 #comedy #funny
00:34
Micky Makeover
Рет қаралды 16 МЛН
Figma Advanced Animations
19:41
Flux Academy
Рет қаралды 121 М.
How to create Splash screen animation in Figma
3:51
Ricardo Costa
Рет қаралды 8 М.
Design Animated Logo Splash Screen in Figma
6:19
Average Design Dude
Рет қаралды 68 М.
How to create futuristic interfaces in figma [Tutorial]
54:53
don't panic
Рет қаралды 37 М.
Website Animations Using ONLY Figma
15:21
Flux Academy
Рет қаралды 278 М.
Figma Smart Animate for Beginners (2022 Tutorial)
9:51
Tim Gabe
Рет қаралды 48 М.
Awesome Micro Animations With Figma Tutorial
18:09
developedbyed
Рет қаралды 268 М.
Top 2024 Web Design Trends
5:32
Codex Community
Рет қаралды 570 М.
Design Better Than 99% of UI Designers
14:52
Tim Gabe
Рет қаралды 197 М.
Easy Simple Splash Screen Animation in Figma🔥
4:33
Uniqs Academy
Рет қаралды 2,2 М.
🩷🩵VS👿
00:38
ISSEI / いっせい
Рет қаралды 18 МЛН