[0:00]Have you ever wanted to create a professional looking text animation in Figma? If so, you picked the right video, because in this video, I'm going to show you how to make this advanced text animation in Figma in just five minutes.
[0:13]So let's begin. All right, 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.
[0:25]I'm going to create a text layer, so let me write manage your projects, just like that, and I'm going to make it bold.
[0:34]Then I'm going to decrease its width like this, and here we are going to put our moving text, okay? So now I'm going to duplicate this text, move it to the right side, and here I'm going to write faster.
[0:48]Just like this, and this time we can change the type of this text to auto width, like that, and let me bring this text down, okay? Just align it with your other text layer.
[0:59]Next, let me go ahead and change its color. I'm going to 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.
[1:11]Don't worry about the color. You can always adjust it later. So, something like this should work very well.
[1:19]Now, I'm going to double click on this text. I'm going to 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.
[1:32]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.
[1:47]So we are going to basically put this text inside a frame. You see now we have frame one here. All right. And then, I'm going to decrease the height of this frame, just like this.
[1:56]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.
[2:05]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.
[2:16]Let's rename it to Frame one, okay? And now we can duplicate it, hit control D or command D.
[2:24]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.
[2:32]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.
[2:49]Just like that. Let's do the same thing for the other text. I'm going to select it and move it up, just like that. Let me align it quickly. It's perfectly aligned, and I'm going to put it inside this frame. All right, so far so good.
[3:05]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.
[3:17]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.
[3:27]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.
[3:40]How can we do that? It's very simple. I'm going to select the first one. I'm going to left click on this plus button and try to connect it to the next variant right here.
[3:47]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 going to change the animation type from instant to smart animate.
[4:03]And here I'm going to set it to ease in 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.
[4:17]Let me adjust the duration to maybe 600 milliseconds, and now we need to repeat this process for the other variants. I'm going to select this frame now, and I'm going to create a new interaction, just like this.
[4:30]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 going to select this one, the last one, and connect it to our first frame, just like this.
[4:46]Change the trigger to after delay, and the rest is fine, and we are basically done.
[4:52]Now let me show you how you can use it. I'm going to go to assets and from here I'm going to drag and drop my component right into my design.
[5:01]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.
[5:13]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.
[5:20]I'm going to select my frame and preview it. There we go. Here is our beautiful and smooth animation.
[5:27]All right, guys, I hope you enjoyed this video. If you found it useful, please don't forget to subscribe and hit the like button.
[5:35]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.
