Splash Screen Animation in 6 Minutes (Figma Tutorial)

Поділитися
Вставка
  • Опубліковано 15 лис 2024

КОМЕНТАРІ • 117

  • @pixelrubbish
    @pixelrubbish 9 місяців тому +23

    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 Рік тому +22

    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  Рік тому +1

      that’s sooo nice to hear, Gideon 🤩 thank you for sharing this kind comment with me!! 🙏

  • @theanie_
    @theanie_ 14 днів тому +1

    I tried it with my own project, and it worked!!! thank you so much

  • @creatorsmafia
    @creatorsmafia Рік тому +9

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

  • @landoreece
    @landoreece Рік тому +9

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

    • @TimGabe
      @TimGabe  Рік тому

      much appreciated, Lando! 🤩

  • @JoyceOnuorah-lb5yg
    @JoyceOnuorah-lb5yg 5 місяців тому +2

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

  • @madhoundes
    @madhoundes Рік тому +2

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

    • @TimGabe
      @TimGabe  Рік тому

      it really does!! happy you liked it, Ahmad 🤩

  • @icarmelyne
    @icarmelyne Рік тому +4

    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  Рік тому +2

      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

  • @neon7874
    @neon7874 Рік тому +2

    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 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

      that’s awesome to hear, Jesus 🥳

  • @EmangIya-x7n
    @EmangIya-x7n 10 місяців тому +1

    thanks for the tutorial, im waiting for the next content

    • @TimGabe
      @TimGabe  10 місяців тому

      thank you for commenting, friend!!

  • @davetheglitch_
    @davetheglitch_ Рік тому +3

    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  Рік тому +1

      hey Dave!! that’s a very good content idea, I’ll keep that in mind. thanks a lot, my friend 🥳💜

  • @not2late2liberate
    @not2late2liberate 3 місяці тому

    Very cool, I love it! Great job. Thanks for explaining so well. Subscribing!

  • @maryphinewandera2646
    @maryphinewandera2646 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

      that's so nice to hear, Mary! 🤩

  • @HassanOmariprofile
    @HassanOmariprofile Рік тому +1

    wow smart, looks amazing

    • @TimGabe
      @TimGabe  Рік тому

      right? it's cool!!

  • @burimislami1349
    @burimislami1349 8 місяців тому +4

    Great and helpful video Tim!
    How would you export this for the developers to place it in app?

    • @henryoncode
      @henryoncode 5 місяців тому

      i would also like to know this

    • @ironclock
      @ironclock Місяць тому

      You wouldn't. This tutorial is completely useless because it cannot be used on iOS/Android at all. In iOS you would need to recreate the animation using UIView, Core Animation, or using a JSON (Lottie) animation. Don't know about Android

  • @RyanFogelsong
    @RyanFogelsong Рік тому +3

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

    • @TimGabe
      @TimGabe  Рік тому

      i'm using just a regular screen recorder for that (quicktime player on mac)

    • @JoeBillionzz
      @JoeBillionzz 4 місяці тому

      @@TimGabe pls how do i record on figma

  • @FlutterUniq
    @FlutterUniq Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

      thanks a lot for supporting!!

  • @liorcohen2800
    @liorcohen2800 Рік тому +2

    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  Рік тому

      there is no straight export, but you could work closely with a dev to have them replicate it!

  • @marclindfors8670
    @marclindfors8670 Рік тому +1

    Love your videos! ❤

    • @TimGabe
      @TimGabe  Рік тому

      thanks a lot Marc, definitely appreciate the kind words 💜

  • @sarahigbinosa3004
    @sarahigbinosa3004 Рік тому +1

    Thank you. well explained.

    • @TimGabe
      @TimGabe  Рік тому

      appreciate it, Sarah! 😃

  • @meowlgmeowmeow
    @meowlgmeowmeow Рік тому +2

    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 😃🙏

  • @prashlovessamosa
    @prashlovessamosa Рік тому +1

    Well explained thank you.

    • @TimGabe
      @TimGabe  Рік тому

      thank you for commenting, Prashant! 😃

  • @cesaremasola
    @cesaremasola Рік тому +1

    Very useful and well explained, thanks!

    • @TimGabe
      @TimGabe  Рік тому +1

      thank you Cesare! 😃

  • @farhadsamadov3598
    @farhadsamadov3598 10 місяців тому +1

    Loved you content, you have earned a new subscriber!

    • @TimGabe
      @TimGabe  10 місяців тому

      that's amazing. thanks for the nice comment, farhad!

  • @andrescastillo07
    @andrescastillo07 Рік тому +4

    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  Рік тому +1

      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 Рік тому +1

      @@TimGabe hahaha we're connected! That's great! I'll look forward to that video. and thanks for answering my question! 😁

    • @TimGabe
      @TimGabe  Рік тому +1

      @@andrescastillo07 of course, happy to help!! 🤩

  • @kunalkanwar2675
    @kunalkanwar2675 Рік тому +1

    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: ua-cam.com/play/PLOIq79MWqv85s7lYuRPCqHvqBFIGOdPsV.html

  • @azoozsaleh8331
    @azoozsaleh8331 Рік тому +1

    we waiting for you ♡

    • @TimGabe
      @TimGabe  Рік тому

      thanks for the support, Azooz! 🤩

  • @yessaelparra1065
    @yessaelparra1065 Рік тому +1

    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?

  • @0xstk
    @0xstk Рік тому +1

    very informative video 👍

    • @TimGabe
      @TimGabe  Рік тому

      glad you liked it, my friend!!

  • @occasionallyhuman
    @occasionallyhuman Рік тому +2

    you look like Bronn from Game of Thrones

    • @TimGabe
      @TimGabe  Рік тому

      haha, that's definitely a first!!

  • @itr1667
    @itr1667 Рік тому +1

    il use this as my homeworkd XD

    • @TimGabe
      @TimGabe  Рік тому

      sounds good, happy it's helpful 🤩

  • @sameerhussain2579
    @sameerhussain2579 Рік тому +1

    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

  • @asifullahkhan3070
    @asifullahkhan3070 4 місяці тому

    Thank you

  • @gonihata
    @gonihata 2 місяці тому

    Your tutorial is great, but I don't know how to hand off to the developer. Could you share any tips to convert this one to code or something?

  • @ArifDewi1331
    @ArifDewi1331 Рік тому +1

    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 😄

  • @YasmeenAlzoghbi
    @YasmeenAlzoghbi 4 місяці тому

    So good❤

  • @vyse-sen
    @vyse-sen Рік тому +1

    thanks

    • @TimGabe
      @TimGabe  Рік тому +1

      thanks for commenting, my friend 😃

  • @userfissher
    @userfissher 5 місяців тому +1

    all tools are free, right?

  • @carlal4808
    @carlal4808 Рік тому

    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  Рік тому

      thanks for the support!!

  • @purrfect_kitty_hub
    @purrfect_kitty_hub Рік тому +1

    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  Рік тому

      you'll have to do a screen recording 😃

  • @HaMeeda
    @HaMeeda 7 місяців тому +1

    my question is, how do you hand this off to developers?

  • @suhairp3539
    @suhairp3539 6 місяців тому

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

  • @shineydas129
    @shineydas129 6 місяців тому

    can such splash screens be used for websites?

  • @Scottyhutch1
    @Scottyhutch1 4 місяці тому

    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.

    • @ironclock
      @ironclock Місяць тому +1

      You can't. This tutorial is completely useless because it cannot be used on iOS/Android at all. In iOS you would need to recreate the animation using UIView, Core Animation, or using a JSON (Lottie) animation. Don't know about Android

  • @dtriptv9093
    @dtriptv9093 Рік тому +1

    Im very beginner...how did you put the fade in?

    • @TimGabe
      @TimGabe  Рік тому

      using the smart animate option - i've got a bunch of videos on my channel if you wanna dig deeper 😃

  • @brunaabeijon2903
    @brunaabeijon2903 Рік тому +1

    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 😃

  • @cdexzswzaqME
    @cdexzswzaqME 3 місяці тому

    how can I use this on web
    like is there any option to convert it to gif or what ?

  • @vaishalimanjare5636
    @vaishalimanjare5636 Рік тому +1

    1000th like

    • @TimGabe
      @TimGabe  Рік тому

      wohooo! thanks a lot!!

  • @creativeideas8071
    @creativeideas8071 Рік тому

    hey my animation isnt working like this can you help me out?

  • @Ana-xy6zq
    @Ana-xy6zq Рік тому +1

    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  Рік тому +1

      hard to explain in text, i'm afraid 😩 it should work if you follow the tutorial step by step 🙏

    • @Ana-xy6zq
      @Ana-xy6zq Рік тому

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

  • @billtz.3213
    @billtz.3213 6 місяців тому

    what is the hastag bg i dont get it I cant find it

  • @caroladiazm.2434
    @caroladiazm.2434 9 місяців тому

    How he align the form automatically?

  • @auliarahmah9595
    @auliarahmah9595 11 місяців тому +1

    how to fade it out?

    • @TimGabe
      @TimGabe  11 місяців тому

      with opacity!

  • @HtmlCss-ib3gw
    @HtmlCss-ib3gw 2 місяці тому

    Plz font name❤

  • @mdwakifalam2077
    @mdwakifalam2077 Рік тому +1

    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 Рік тому +1

      you need to click and select the whole frame on top left rather than from inside!

    • @TimGabe
      @TimGabe  Рік тому

      this! 😃

  • @Dnyanesh134
    @Dnyanesh134 8 місяців тому

    why is it not moving to the next frame as it should...it does when i click tho

    • @mahaeb8328
      @mahaeb8328 8 місяців тому

      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

  • @easyorigami478
    @easyorigami478 3 місяці тому

    wat is font

  • @kehkashananwar8508
    @kehkashananwar8508 Рік тому +1

    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

  • @shahnawazkaratela800
    @shahnawazkaratela800 Рік тому +1

    hey! how you clipped that text in step-2

    • @TimGabe
      @TimGabe  Рік тому

      with a frame and clip content checked (i think)!

  • @muhammadhuzaifamujeeb
    @muhammadhuzaifamujeeb Місяць тому

    chat gpt suggest me your video

  • @diocat
    @diocat День тому

    This tutorial is completely useless because it cannot be used on iOS/Android at all.

  • @modayshwood9415
    @modayshwood9415 Рік тому +1

    Hi Tim
    How can I contact you ..
    There is a small job 4u
    .i need your help

    • @TimGabe
      @TimGabe  Рік тому

      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 🙏