Splash Screen Animation in 6 Minutes (Figma Tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ส.ค. 2024

ความคิดเห็น • 110

  • @pixelrubbish
    @pixelrubbish 6 หลายเดือนก่อน +15

    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 ปีที่แล้ว +18

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

  • @creatorsmafia
    @creatorsmafia ปีที่แล้ว +7

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

  • @JoyceOnuorah-lb5yg
    @JoyceOnuorah-lb5yg 2 หลายเดือนก่อน +1

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

  • @landoreece
    @landoreece ปีที่แล้ว +7

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      much appreciated, Lando! 🤩

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

  • @not2late2liberate
    @not2late2liberate 29 วันที่ผ่านมา

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

  • @madhoundes
    @madhoundes ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

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

  • @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 🥳💜

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

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

  • @maryphinewandera2646
    @maryphinewandera2646 ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that's so nice to hear, Mary! 🤩

  • @user-me2bp7ph6o
    @user-me2bp7ph6o 8 หลายเดือนก่อน +1

    thanks for the tutorial, im waiting for the next content

    • @TimGabe
      @TimGabe  8 หลายเดือนก่อน

      thank you for commenting, friend!!

  • @FlutterUniq
    @FlutterUniq ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thanks a lot for supporting!!

  • @marclindfors8670
    @marclindfors8670 ปีที่แล้ว +1

    Love your videos! ❤

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thanks a lot Marc, definitely appreciate the kind words 💜

  • @HassanOmariprofile
    @HassanOmariprofile ปีที่แล้ว +1

    wow smart, looks amazing

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      right? it's cool!!

  • @burimislami1349
    @burimislami1349 6 หลายเดือนก่อน +3

    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

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

  • @cesaremasola
    @cesaremasola ปีที่แล้ว +1

    Very useful and well explained, thanks!

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      thank you Cesare! 😃

  • @farhadsamadov3598
    @farhadsamadov3598 7 หลายเดือนก่อน +1

    Loved you content, you have earned a new subscriber!

    • @TimGabe
      @TimGabe  7 หลายเดือนก่อน

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

  • @sarahigbinosa3004
    @sarahigbinosa3004 ปีที่แล้ว +1

    Thank you. well explained.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      appreciate it, Sarah! 😃

  • @RyanFogelsong
    @RyanFogelsong ปีที่แล้ว +3

    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 2 หลายเดือนก่อน

      @@TimGabe pls how do i record on figma

  • @liorcohen2800
    @liorcohen2800 11 หลายเดือนก่อน +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  10 หลายเดือนก่อน

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

  • @prashlovessamosa
    @prashlovessamosa ปีที่แล้ว +1

    Well explained thank you.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you for commenting, Prashant! 😃

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

    • @yessaelparra1065
      @yessaelparra1065 ปีที่แล้ว

      I'm a FIGMA beginner, I really love your channel

  • @azoozsaleh8331
    @azoozsaleh8331 ปีที่แล้ว +1

    we waiting for you ♡

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thanks for the support, Azooz! 🤩

  • @YasmeenAlzoghbi
    @YasmeenAlzoghbi 2 หลายเดือนก่อน

    So good❤

  • @dailymemies
    @dailymemies ปีที่แล้ว +1

    very informative video 👍

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      glad you liked it, my friend!!

  • @asifullahkhan3070
    @asifullahkhan3070 หลายเดือนก่อน

    Thank you

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

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

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

  • @userfissher
    @userfissher 3 หลายเดือนก่อน +1

    all tools are free, right?

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

  • @itr1667
    @itr1667 9 หลายเดือนก่อน +1

    il use this as my homeworkd XD

    • @TimGabe
      @TimGabe  9 หลายเดือนก่อน

      sounds good, happy it's helpful 🤩

  • @cdexzswzaqME
    @cdexzswzaqME หลายเดือนก่อน

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

  • @HaMeeda
    @HaMeeda 5 หลายเดือนก่อน +1

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

  • @occasionallyhuman
    @occasionallyhuman ปีที่แล้ว +2

    you look like Bronn from Game of Thrones

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      haha, that's definitely a first!!

  • @vaishalimanjare5636
    @vaishalimanjare5636 ปีที่แล้ว +1

    1000th like

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      wohooo! thanks a lot!!

  • @titan2969
    @titan2969 ปีที่แล้ว +1

    thanks

    • @TimGabe
      @TimGabe  10 หลายเดือนก่อน +1

      thanks for commenting, my friend 😃

  • @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  9 หลายเดือนก่อน

      you'll have to do a screen recording 😃

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

  • @suhairp3539
    @suhairp3539 3 หลายเดือนก่อน

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

  • @Ana-xy6zq
    @Ana-xy6zq 10 หลายเดือนก่อน +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  10 หลายเดือนก่อน +1

      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

  • @easyorigami478
    @easyorigami478 หลายเดือนก่อน

    wat is font

  • @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  10 หลายเดือนก่อน

      this! 😃

  • @shineydas129
    @shineydas129 3 หลายเดือนก่อน

    can such splash screens be used for websites?

  • @creativeideas8071
    @creativeideas8071 ปีที่แล้ว

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

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

  • @billtz.3213
    @billtz.3213 4 หลายเดือนก่อน

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

  • @caroladiazm.2434
    @caroladiazm.2434 6 หลายเดือนก่อน

    How he align the form automatically?

  • @Dnyanesh134
    @Dnyanesh134 6 หลายเดือนก่อน

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

    • @mahaeb8328
      @mahaeb8328 6 หลายเดือนก่อน

      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

  • @auliarahmah9595
    @auliarahmah9595 9 หลายเดือนก่อน +1

    how to fade it out?

    • @TimGabe
      @TimGabe  9 หลายเดือนก่อน

      with opacity!

  • @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  10 หลายเดือนก่อน

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

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