Auto Typing Text Animation in Figma. Typewriter Effect with Figma Interactive Component

[@rufailateefah]

This is an amazing and carefully recorded tutorial. I never got lost for once. After watching different tutorials, I finally got it right. Thank you!

[@femijohn]

You’re welcome 🥺

[@amywu6829]

Tip: after linking the variants together, you can select them all at once and adjust the prototype settings at the same time. Saves a lot of time

[@femijohn]

Thanks for the tip 🙏

[@faizanrazzaq9276]

Awesome Work Mate!

[@meierjoe]

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

[@matteoromano5648]

Love you ahah

[@juanfelipeblanco1033]

Literally came to look just that. You are loved. Thanks

[@ThePinkPixie3]

Hero! Thank you!

[@amywu6829]

THANK YOU

[@jamiefox4857]

I owe you a beer

[@hihi9674]

Amazing!! Just what i was looking for in a project I was trying to do. Thanks!

[@femijohn]

Glad I could help!

[@alexdejesus4048]

Very nice, thank you for this video.

[@ademuyiwaoluwanifemi7273]

Thanks for this tutorial.. You are amazing brother

[@geetalib]

Very well explained and easy to do

[@femijohn]

Thank you so much 🙂

[@AkhigbeCourage]

Thank you very much for this tutorial. Been working on some interaction designs and autotyping was a major constraint for me. Great Job

[@femijohn]

You’re welcome. I am glad I could help 🙏

[@luyentran816]

very easy to understand, please release more videos

[@femijohn]

Sure, thank you 🙏 🤗

[@philiposarodion8906]

bro your contents are really great, i appreciate the work you do honestly👏👏

[@femijohn]

You’re going to make me cry 🥹. Thank You so much.

[@philiposarodion8906]

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

[@femijohn]

@@philiposarodion8906 yes it’s possible

[@philiposarodion8906]

@@femijohn please how can I do it? 🙏🏼

[@_w1zzz]

Very easy to understand. Thank you

[@femijohn]

Thank You 🙏

[@ayodejiadeyeye6460]

Dope stuff, I just needed this for my new project

[@femijohn]

You’re welcome ☺️

[@MarcusParry]

I found this really helpful and well put together. Thank you !

[@femijohn]

You’re welcome 😊🙏

[@Dolabomi_Peace]

Thank you so much, FemiJohn!!!

[@femijohn]

You're welcome😊

[@hrithiksoni3119]

Such an amazing vedio 👍easy to understand, but I am having Ane trouble in this that my text is stretching can you please help?

[@femijohn]

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

[@JessicaBianconi]

@@femijohn I had the same problem and it's solved! Thanks again for this great tutorial 😊😊😊

[@femijohn]

@@JessicaBianconi you’re welcome 😊🙏

[@taiwoolorunfemi3728]

Thanks. Very easy to understand.

[@dutuavi9144]

Thank you for this great tutorial! Keep up the good work man!😆

[@femijohn]

You’re very welcome. 😊

[@SolomFoz]

That was brilliant! thank you so much.

[@femijohn]

You’re welcome. I appreciate your kind words 😊

[@modupekay]

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?

[@femijohn]

Oh yes, interactive component can help you achieve this nicely.🙏

[@modupekay]

@@femijohn do you by any chance have a tutorial on that please?

[@Foxpoxcrox]

Thanks, it's exactly what i looking for

[@femijohn]

You’re welcome 🙏

[@cslandcsland]

There is a plug-in that create typing effect called typeff

[@chukwubikechijiokepatrick9534]

Nice ✌🏽

[@mosesadekoje3107]

this is really good.. thanks man!

[@femijohn]

You’re welcome.

[@adeoyeafeez3464]

This was helpful. Thanks

[@parthtiwari1893]

Thank you so much, this is exactly what I needed!

[@femijohn]

You’re welcome 🙏

[@footscore]

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

[@jadegenga]

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.

[@femijohn]

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.

[@rluismodesto]

Thank you so much!

[@femijohn]

You're welcome!

[@winterrunion8741]

Great tutorial! Thank you!

[@femijohn]

You’re very welcome 🥺🙏

[@olumidebenjamin6418]

Thank you Femi

[@NargessShabani]

I guess this would be very easier now with Variables

[@anigrigoryan1951]

Please, can you tell me why my first letter is not staying at the same place when others are appearing?

[@femijohn]

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

[@anigrigoryan1951]

Ah, that’s what I missed))) thank you, it works🫶

[@femijohn]

@@anigrigoryan1951 you’re welcome 🥺

[@nuovibusiness]

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?

[@femijohn]

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.

[@vijaysrivathsun5191]

Thank you so much brother!

[@femijohn]

You’re welcome 🥺

[@skibidicommentz]

I want to add more than 2 text how to do it please help me

[@loras2263]

Hi bro why the next word doesn't appear when i large the frame?

[@femijohn]

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

[@loras2263]

@@femijohn when is i hit shift+A? before i make it to component? and what is paddings on figma? sorry i ask too much, i just learn figma

[@ralphkapgang3687]

Did the same thing but it is not functioning The text disappears whenever I try to enlarge the size of the component

[@femijohn]

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

[@ralphkapgang3687]

@@femijohn Thanks for your prompt feedback! 😜😜

[@femijohn]

@@ralphkapgang3687❤️ 🚀

[@Bruna-o8h]

👏👏

[@ayodejiadeyeye6460]

Thank bro

[@femijohn]

You’re welcome

[@alicekasr]

thank you!!!!🥰

[@femijohn]

You’re welcome 😊

[@fr._.1602]

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!

[@ohagoromonyinyechukwuj7305]

Thank you so much

[@femijohn]

You’re welcome. 🥺

[@ohagoromonyinyechukwuj7305]

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

[@femijohn]

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

[@ohagoromonyinyechukwuj7305]

@@femijohn okay I will do that now...let me go to your Instagram

[@femijohn]

@@ohagoromonyinyechukwuj7305 okay cool.

[@miguellopes5645]

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 :)

[@femijohn]

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

[@femijohn]

Make sure the starting timer for your after delay is at 0. And carefully go through the prototype again to be sure

[@miguellopes5645]

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!

[@femijohn]

@@miguellopes5645 it’s fine. My DM is always open if you ever run into any challenge in Figma. Thank You so Much 🙏🤗

[@souleater0815]

Would be cool if it stopped after the second word and a period got added. 😀

[@femijohn]

Mmm right. That makes sense 🤔😋

[@meenakshisavasiya]

Sir it's not working in my prototype

[@femijohn]

And you have no clue what might be wrong? How can I help?

[@loransshamas]

👍

[@femijohn]

Thank You 🙏

[@brightezumah2900]

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.

[@femijohn]

You’re welcome. I’m glad I could help. I’ve added my social handles. Thanks 😊

[@bhavingohil4811]

My bro this was helpful. your content is genuinely helpful. Thanks @Thefemijohn

[@femijohn]

You’re welcome. I really appreciate your kind words.

[@07_delsemariska68]

thank you so much

[@femijohn]

You're welcome

[@SmrutiTiwari-u1g]

Thank you so much