Splash Screen Animation in 6 Minutes (Figma Tutorial)
Вставка
- Опубліковано 27 лип 2024
- Many of your favourite mobile apps use animated splash screens as a secret trick to create that professional feel. In this short tutorial we learn how to create them ourselves inside of Figma.
🔴 Working File: timgabe.com/resources/figma-s...
Timecodes
00:00 Intro
00:24 Step 1
01:29 Step 2
05:20 Step 3
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
The step-by-step explanation and clear demonstration make it easy to follow and understand the process.
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.
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!!!
that’s sooo nice to hear, Gideon 🤩 thank you for sharing this kind comment with me!! 🙏
This a great tutorial, it's just straight to the point and easy to understand. I love it, thank you.
Love these tutorials. As someone mentioned already, they’re really well explained. Keep it up 👍🏾
much appreciated, Lando! 🤩
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 ❤️
hey Dave!! that’s a very good content idea, I’ll keep that in mind. thanks a lot, my friend 🥳💜
This is dope , basicly mastering after delay making endless animation possiblites !
it really does!! happy you liked it, Ahmad 🤩
Love your videos! ❤
thanks a lot Marc, definitely appreciate the kind words 💜
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!
so happy to read this. thank you so much for putting the time into a comment like this, my friend 💜
I love your videos, i'm learning more about this. The prototype is a art
that’s awesome to hear, Jesus 🥳
So good❤
Thank you
Thank you for that. My animation actually worksand looks insanely cool.
that's so nice to hear, Mary! 🤩
Very useful and well explained, thanks!
thank you Cesare! 😃
wow smart, looks amazing
right? it's cool!!
thanks for the tutorial, im waiting for the next content
thank you for commenting, friend!!
Good keep make videos like this , i relly like this type of content ❤
thanks a lot for supporting!!
Well explained thank you.
thank you for commenting, Prashant! 😃
Thank you. well explained.
appreciate it, Sarah! 😃
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?
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 🤩
you pass figma files to the devs, the rest is on them to figure out
Hi
What did you mean by the background rectangle and how its added?
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?
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) ☺️
@@TimGabe hahaha we're connected! That's great! I'll look forward to that video. and thanks for answering my question! 😁
@@andrescastillo07 of course, happy to help!! 🤩
very informative video 👍
glad you liked it, my friend!!
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?
there is no straight export, but you could work closely with a dev to have them replicate it!
Just love all your amazing videos! The instructions are pretty clear and easy to follow step by step. Keep up the good work plz
thanks a lot, Mona!! really appreciate it 😃🙏
Great and helpful video Tim!
How would you export this for the developers to place it in app?
i would also like to know this
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.
did you manage to solve this, Sameer? 😃
@@TimGabe Yeah I did what I wanted to do in a mindless effort. But I am still yet to grasp this
we waiting for you ♡
thanks for the support, Azooz! 🤩
1. How much time it took you to become a good designer ?
2. what other applications you use for designing ?
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: ua-cam.com/play/PLOIq79MWqv85s7lYuRPCqHvqBFIGOdPsV.html
Love the tutorial! Is there any advice on how to export the animation once its complete?
i'm using just a regular screen recorder for that (quicktime player on mac)
@@TimGabe pls how do i record on figma
hey my animation isnt working like this can you help me out?
what is the hastag bg i dont get it I cant find it
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.
thanks
thanks for commenting, my friend 😃
How he align the form automatically?
can such splash screens be used for websites?
how can I use this on web
like is there any option to convert it to gif or what ?
Looks crazy cool! And how to use in in the app? Is that exportable along with animation?
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!
@@TimGabe than you for the answer, Tim! Poor devs 😄
wat is font
il use this as my homeworkd XD
sounds good, happy it's helpful 🤩
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?
I'm a FIGMA beginner, I really love your channel
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 😢
thanks for the support!!
my question is, how do you hand this off to developers?
hi great video but how can i turn this into a gif for multiple frames in a row ? looking forward to your response
you'll have to do a screen recording 😃
Loved you content, you have earned a new subscriber!
that's amazing. thanks for the nice comment, farhad!
1000th like
wohooo! thanks a lot!!
Im very beginner...how did you put the fade in?
using the smart animate option - i've got a bunch of videos on my channel if you wanna dig deeper 😃
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.
depending on the dev's experience, I think prototypes like these will be more than enough to convey your vision 😃
all tools are free, right?
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?
you need to click and select the whole frame on top left rather than from inside!
this! 😃
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 ;(
hard to explain in text, i'm afraid 😩 it should work if you follow the tutorial step by step 🙏
@@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
why is it not moving to the next frame as it should...it does when i click tho
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
you look like Bronn from Game of Thrones
haha, that's definitely a first!!
how to fade it out?
with opacity!
how the Splash text fades out?
you simply change the opacity to 0% 😃
@@TimGabe aaaahhh! I thought there is some other technique that makes your interactions so smooth.. cool man
hey! how you clipped that text in step-2
with a frame and clip content checked (i think)!
Hi Tim
How can I contact you ..
There is a small job 4u
.i need your help
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 🙏