Animate Text in Figma Like a Pro | Figma Tutorial

have you ever wanted to create a professional looking text animation in figma if so you pick the right video because in this video I'm gonna show you how to make this Advanced text animation in figma in just 5 minutes so let's begin alright to create this effect we need two different text layers we need a text layer as our static text and we need another text layer as our moving text I'm going to create a text layer so let me write manage your projects just like that and I'm gonna make it bold then I'm gonna decrease its width like this and here we are going to put our moving text okay so now I'm gonna duplicate this text move it to the right side and here I'm gonna write faster just like this and this time we can change the type of this text to other width like that and let me bring this text down okay just align it with your other text layer next let me go ahead and change its color I'm gonna have a gradient for this text let me quickly create a gradient I'm going to use purple and this light purple just like that don't worry about the color you can always adjust it later so something like this should work very well now I'm gonna double click on this text I'm gonna hit enter to create a new line and let's write our second word let's write with ease okay hit enter and let's write efficiently now we need to create somehow a mask here okay we can use a mask but instead I'm going to show you a good trick instead of using a mask we can just right click on this text and we can click on frame selection so we are going to basically put this text in inside a frame you see now we have frame one here alright and then I'm going to decrease the height of this Frame just like this and just check this checkbox that says clip content right here so basically we mask the other two words here and that's exactly what we need now I'm going to select these two texts basically we have one frame and one text layer right click here and again click on this Frame selection to create another frame let's rename it to frame one okay and now we can duplicate it hit Ctrl U or command D once again duplicate it next what we need to do is this we need to double click on our text layer inside this Frame that we created and we need to just move it up I can use the arrow keys on my keyboard to move this text up just like this if you want to perfectly align it with this text layer you can just put it outside this Frame and align it with the Baseline of this other text and put it inside again just like that let's do the same thing for the other text I'm gonna select it and move it up just like that let me align it quickly it's perfectly aligned and I'm gonna put it inside this Frame all right so far so good now we need to select these three frames and we need to head over to the toolbar and click on this little arrow okay this drop menu opens and we need to click on create component set as soon as I do that this component set will be created and inside we have our variants if you don't know what variants are make sure to check out my video on variants you can find the link on the top right corner but for now we just need to head over to the Prototype tab here and we need to make them interactive we need to create an interaction here how can we do that it's very simple I'm gonna select the first one I'm gonna left click on this plus button and try to connect it to the next variant right here and this interaction details menu pops up from here I'm going to change the trigger to after delay the duration is set to 800 milliseconds it's fine I'm gonna change the animation type from instant to Smart animate and here I'm gonna set it to easing and out back you can choose whatever option you want here you can choose for example bouncy quick it's totally up to you but I really prefer this one it looks very good let me adjust the duration to maybe 600 milliseconds and now we need to repeat this process for the other variants I'm gonna select this Frame now and I'm going to create a new interaction just like this here change the trigger to after delay don't change this duration here because we want them to be the same we don't need to change anything else and finally I'm gonna select this one the last one and connect it to our first frame just like this change the trigger to after delay and the rest is fine and we are basically done now let me show you how you can use it I'm gonna go to assets and from here I'm going to drag and drop my component right into my design and in case you want to modify the colors here you can simply head over to the selection colors right here and adjust the color as you wish you can also modify the gradient let me go ahead and change the gradient quickly all right I really like this one now let's give it a try and see how it looks I'm going to select my frame and preview it there we go here is our beautiful and smooth animation alright guys I hope you enjoyed this video if you found it useful please don't forget to subscribe and hit the like button if you want to learn more about responsive web design make sure to check out this video on the screen have an awesome day and see you next time

Channel: DesignWithArash

Views: 187,564

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, text animation

Id: TFWoG0062jU

Length: 5min 41sec (341 seconds)

Published: Tue Nov 15 2022