Splash Screen Animation in 6 Minutes (Figma Tutorial)

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.

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!

[gideonebikade]

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

[creatorsmafia]

The step-by-step explanation and clear demonstration make it easy to follow and understand the process.

[landoreece]

Love these tutorials. As someone mentioned already, they’re really well explained. Keep it up 👍🏾

[JoyceOnuorah-lbyg]

This a great tutorial, it's just straight to the point and easy to understand. I love it, thank you.

[pixelrubbish]

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.

[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 ❤️

[madhoundes]

This is dope, basicly mastering after delay making endless animation possiblites !

[jesusavendano]

I love your videos, i'm learning more about this. The prototype is a art

[maryphinewandera]

Thank you for that. My animation actually worksand looks insanely cool.

[neon]

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!

[cesaremasola]

Very useful and well explained, thanks!

[mebppho]

thanks for the tutorial, im waiting for the next content

[monadang]

Just love all your amazing videos! The instructions are pretty clear and easy to follow step by step. Keep up the good work plz

[FlutterUniq]

Good keep make videos like this, i relly like this type of content ❤

[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?

[andrescastillo]

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?

[suhairp]

Hi
What did you mean by the background rectangle and how its added?

[burimislami]

Great and helpful video Tim!

How would you export this for the developers to place it in app?

[liorcohen]

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?

[RyanFogelsong]

Love the tutorial! Is there any advice on how to export the animation once its complete?