Learn how to create an auto typing text animation effect in Figma the easiest way. With detailed explanation. You will also learn about component, variants and component text property. Please don't forget to subscribe and drop a comment.
Make sure that after you created the component now you need to double click into the text "easier" and under constraints make sure it says left and center. Otherwise the text will move all the time when you try to reveal the word
@@femijohn Bro a request, Is it possible to make the animated words show in different colours? like "Faster" in blue, the other word in Yellow, stuvs like that. I'd appreciate it if it's possible and you can show us. ama in love with it already!
Uhm, I’m not sure. But, what you can do is hit shift + A on the text. To add auto layout on it. You can set all padding to 0 if you want. But that should make the word stop moving when you try to make other letters visible. Please let me know if this works
Hi Femi. Thank you for this very helpful and concise video. I'm wondering since Figma has variables now, is there a way to do this with just one component instead of duplicating multiple variants?
Uhm, I’m not sure. But, what you can do is hit shift + A on the text. To add auto layout on it. You can set all padding to 0 if you want. But that should make the word stop moving when you try to make other letters visible. Please let me know if this works
Hit shift + A on the text to add auto layout to just the text, then you might remove all the paddings on around it. Or hit Cmd + Shift + G to frame the text. It should work when you do this
i have a problem of transiting from one word to the other, since the after delay is limited to one trial. kindly advice so that i can link the first auto type to the second auto type
Sorry about that, try hitting shift + A on the text to make an auto layout object and remove all paddings or frame selection on the text. Let me know if this works
This is a great fix! Thank you for this. Do you know how to then export this like an animation? All my export options are stills only of the first frame/variant.
Thank, but no. I don't know how to export animations like this. they are currently just for prototyping. Although a new plugin to export as lottie files is out, but it wasn't made for prototypes like this.
2:49 what command did you use to reveal the rest of the text? I was dragging it but only the masked letter along with the line showed up while the rest of the words did not appear, could you help me out? Thanks!
Thanks very much for this great tutorial. I was able to create this cool animation. Now my issue is how do I export it to HTML? I tried Anima but it does not render the animation. I am lost now. Can you hep me?
Thanks but, I feel like creating it like this works for just Figma prototyping. You’ll need to use gif creating plugins to create it with a different approach or use JavaScript.
Hey! I followed your steps but got confused with two things: - After creating the component and adding all those variants, I cant resize the rectangle unless I detach the instance. However I did not see you do that! - After setting up the after delay as you did, I also copied the component from the assets section to my "Main" frame but the prototype doesn't even start. Seems that after delay is not working. I'd be grateful for any tips! Thanks for the video :)
Okay, first you won’t be resizing just the rectangle. Because the rectangle and the text was used to create a masked group. at 1:15. This masked group is then turned into a component that have multiple variants that can be resized. So you’re resizing the component or it’s variants and not the rectangle
It is now working. I did option + drag this time instead of cmd + D and then I could resize the mask group with no problem. Sorry for the beginner question eheh. Subscribed!
Bro, this was very easy to understand. Thank you very much for this 👏🏽 👏🏽 👏🏽 Please add your twitter and IG to your about page. Want to follow you on there.
Good evening...please as I drag my component it's missing..can't see the other letters...I don't know what I'm not doing well I have rewatched the videos countless times
@@ohagoromonyinyechukwuj7305 please try referencing to a particular point or timestamp in the video, so I’ll understand where exactly you’re having issues. Or send a screenshot as dm on any of my social handles
