Auto Typing Text Animation in Figma. Typewriter Effect with Figma Interactive Component
HTML-код
- Опубликовано: 2 окт 2024
- 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
Love you ahah
Literally came to look just that. You are loved. Thanks
Hero! Thank you!
THANK YOU
Thank you very much for this tutorial. Been working on some interaction designs and autotyping was a major constraint for me.
Great Job
You’re welcome. I am glad I could help 🙏
Thanks for this tutorial.. You are amazing brother
bro your contents are really great, i appreciate the work you do honestly👏👏
You’re going to make me cry 🥹. Thank You so much.
@@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!
@@philiposarodion8906 yes it’s possible
@@femijohn please how can I do it? 🙏🏼
Very easy to understand. Thank you
Thank You 🙏
I found this really helpful and well put together. Thank you !
You’re welcome 😊🙏
Thanks, it's exactly what i looking for
You’re welcome 🙏
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!
You’re welcome 🥺
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?
Oh yes, interactive component can help you achieve this nicely.🙏
@@femijohn do you by any chance have a tutorial on that please?
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
Thanks for the tip 🙏
There is a plug-in that create typing effect called typeff
Please, can you tell me why my first letter is not staying at the same place when others are appearing?
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
Ah, that’s what I missed))) thank you, it works🫶
@@anigrigoryan1951 you’re welcome 🥺
I want to add more than 2 text how to do it please help me
Amazing!! Just what i was looking for in a project I was trying to do. Thanks!
Glad I could help!
this is really good.. thanks man!
You’re welcome.
Such an amazing vedio 👍easy to understand, but I am having Ane trouble in this that my text is stretching can you please help?
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
@@femijohn I had the same problem and it's solved! Thanks again for this great tutorial 😊😊😊
@@JessicaBianconi you’re welcome 😊🙏
Did the same thing but it is not functioning
The text disappears whenever I try to enlarge the size of the component
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
@@femijohn Thanks for your prompt feedback! 😜😜
@@ralphkapgang3687❤️ 🚀
I guess this would be very easier now with Variables
Thank you so much
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.
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.
That was brilliant! thank you so much.
You’re welcome. I appreciate your kind words 😊
Hi bro why the next word doesn't appear when i large the frame?
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
@@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
very easy to understand, please release more videos
Sure, thank you 🙏 🤗
Amazing, this helped me put the last piece on my UI/UX portfolio
Thank you
Good bro very helpful video❤❤❤❤❤❤
I’m glad
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
Would be cool if it stopped after the second word and a period got added. 😀
Mmm right. That makes sense 🤔😋
Thanks. Very easy to understand.
Thank you so much, FemiJohn!!!
You're welcome😊
Dope stuff, I just needed this for my new project
You’re welcome ☺️
👏👏
Sir it's not working in my prototype
And you have no clue what might be wrong? How can I help?
Thank you so much, this is exactly what I needed!
You’re welcome 🙏
Thank you for this great tutorial! Keep up the good work man!😆
You’re very welcome. 😊
Very well explained and easy to do
Thank you so much 🙂
Thank you so much brother!
You’re welcome 🥺
Thank you so much!
You're welcome!
thank you so much
You're welcome
thank you!!!!🥰
You’re welcome 😊
Thank bro
You’re welcome
Thank you Femi
This was helpful. Thanks
👍
Thank You 🙏
Nice ✌🏽
Thank you so much
You’re welcome. 🥺
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
@@femijohn okay I will do that now...let me go to your Instagram
@@ohagoromonyinyechukwuj7305 okay cool.
Great tutorial! Thank you!
You’re very welcome 🥺🙏
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
Make sure the starting timer for your after delay is at 0. And carefully go through the prototype again to be sure
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!
@@miguellopes5645 it’s fine. My DM is always open if you ever run into any challenge in Figma. Thank You so Much 🙏🤗
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!
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.
You’re welcome. I’m glad I could help. I’ve added my social handles. Thanks 😊
My bro this was helpful. your content is genuinely helpful. Thanks @Thefemijohn
You’re welcome. I really appreciate your kind words.