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!!!
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 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
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!
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 ❤️
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) ☺️
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?
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?
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!
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.
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 😢
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: ruclips.net/p/PLOIq79MWqv85s7lYuRPCqHvqBFIGOdPsV
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.
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
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 ;(
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 🙏
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!! 🙏
The step-by-step explanation and clear demonstration make it easy to follow and understand the process.
Love these tutorials. As someone mentioned already, they’re really well explained. Keep it up 👍🏾
much appreciated, Lando! 🤩
This a great tutorial, it's just straight to the point and easy to understand. I love it, thank you.
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
This is dope , basicly mastering after delay making endless animation possiblites !
it really does!! happy you liked it, Ahmad 🤩
thanks for the tutorial, im waiting for the next content
thank you for commenting, friend!!
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
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
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
wow smart, looks amazing
right? it's cool!!
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 💜
Very cool, I love it! Great job. Thanks for explaining so well. Subscribing!
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 🥳💜
Good keep make videos like this , i relly like this type of content ❤
thanks a lot for supporting!!
Loved you content, you have earned a new subscriber!
that's amazing. thanks for the nice comment, farhad!
I love your videos, i'm learning more about this. The prototype is a art
that’s awesome to hear, Jesus 🥳
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!! 🤩
Thank you for that. My animation actually worksand looks insanely cool.
that's so nice to hear, Mary! 🤩
Love your videos! ❤
thanks a lot Marc, definitely appreciate the kind words 💜
Thank you. well explained.
appreciate it, Sarah! 😃
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 😃🙏
Very useful and well explained, thanks!
thank you Cesare! 😃
Well explained thank you.
thank you for commenting, Prashant! 😃
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
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 😄
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
very informative video 👍
glad you liked it, my friend!!
we waiting for you ♡
thanks for the support, Azooz! 🤩
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?
So good❤
il use this as my homeworkd XD
sounds good, happy it's helpful 🤩
Thank you
Hi
What did you mean by the background rectangle and how its added?
my question is, how do you hand this off to developers?
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!!
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 😃
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: ruclips.net/p/PLOIq79MWqv85s7lYuRPCqHvqBFIGOdPsV
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 😃
all tools are free, right?
thanks
thanks for commenting, my friend 😃
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 😃
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.
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
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 ?
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
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! 😃
How he align the form automatically?
hey my animation isnt working like this can you help me out?
you look like Bronn from Game of Thrones
haha, that's definitely a first!!
how to fade it out?
with opacity!
what is the hastag bg i dont get it I cant find it
Plz font name❤
1000th like
wohooo! thanks a lot!!
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
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)!
wat is font
chat gpt suggest me your video
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 🙏