Animate Text in Figma Like a Pro | Figma Tutorial
HTML-код
- Опубликовано: 14 ноя 2022
- In this video, I'm going to show you how to create an advanced changing text animation in Figma quickly.
Remember to subscribe: bit.ly/3US49pf
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/4aVc7pR
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
Bro is this free ?
i would like to thank you for the tutorial. it's CLEAR CUT, explain BIT BY BIT, and without talking about non-related stuff. SPOT ON. It really helps me, bro. Truly. I wish you the best in life, and may someday, someone did the same to you that EASE YOUR LIFE BY A LOT.
You are very welcome. Thank you very much.
Learned so much without wasting any moment. Perfect
Glad you liked it.
Thank you so much for this much needed tutorial. It helped me a lot ❤
Glad it helped! You are very welcome.
Great video Arash, Thank you for everything, Please keep going
Thank you so much.
Amazing! I just want to try it.
I love it! Thanks again for this useful video.
Glad you enjoyed it!
This is the second video of yours that I watched and I subscribed. You make it look easy and simple.
Welcome aboard! Thank you.
HI Arash, I'm new to UI/UX design but i've already learned a lot from your videos
Hi. Great to hear!
Perfect tutorial video everrrrrr man ....small ..precise to the point 💯💎🔥
Appreciate it!
Thanks a ton arash for providing such amazing tutorials 👏
No problem. Glad you liked them.
Thanks man it worked I am soo happy keep uploading more videos like this 🙏🏻🙏🏻
No problem 👍
thank u so much! u literaly saved me with this tutorial❤❤❤
No problem.
Thanks, Arash, really helpful!
Glad it was helpful!.
👏👏👏 Thank you so much for this tutorial sir I'm your big fan from the Philippines.
Thank you so much for creating this video! It has helped me add a little extra something to my project I'm working on for my final exam! 😊👍
You are so welcome! Glad it was helpful.
Thank you so much 😃😍
Thank you so much for this I love it!
No problem.
First vid and you have a new sub
Thank you
thanks...it was so useful, please keep going.
No problem. Thank you.
great video short and sweet. would love to see how you did the opening leaf text animation next!
Thank you so much Adam. Glad you liked it. The intro animation was done in Adobe After Effects.
I tried it and mehn it was sleek. I always love Arash's video. He is a good teacher🤗😘
Thanks a lot. It's very nice of you.
Thank youuu so much!!! really helped me out :D
No problem. Glad it helped.
I LOVE YOUR VIDEO AND YOUR PRONOUNTATION AMAZING
Thank you so much.
Thank you so much. your videos are best.
So nice of you. Glad you liked them.
Thanks, man. It Was a great tutorial. I was looking for something like how to maintain the Margin and padding of a design so that I can easily explain it to the web designer. Another thing is how to study user experience to make a case to start the UI design. What should I think or follow to start a project?
You are welcome. Great to hear that. You can use Zeplin for design handoff. I'll noted your questions for future video ideas.
Subscribed! Fantastic tutorial an very well presented.
Thank you. Welcome to the channel.
youre amazing. my hero indeed
Thank you so much.
that moment in 3:00 or so is the most rewatch moment and for beginners it was really confusing to understand why we had to take out stuff from frame . But thanks for the video !
how to export this page as a animated video
thank you! great tutorial :D
No problem. Thanks.
very quick learning. amazing, tnx
Thank you so much. Glad it helped.
You are AMAZING!
Thank you so much.
Thanks you for your tutorial brother
You are welcome.
THANKS A LOT THIS TUTORIAL IS GREAT KUDOS
You're welcome! Glad it helped.
Arash!! Where have you been all my life?
I'm so grateful to God to have stumbled upon your channel. You're such a great teacher, you sure know how to explain very complicated topics in simple terms. I'm just 4 months old in UI/UX and I must say the journey so far has been fun and sometimes I doubt myself but having come across your channel I now have hope. It would be a pleasure to be mentored by you. I await your response. Thank you so much.
Thank you very much. That's very kind of you. Glad you are enjoying your journey. Never lose hope, I'm sure you can make it.
@@DesignWithArash Thank you so much Arash🤗
Thank you so much........learnt in less than a min
No problem.
Thanks a lot for this video😇
You're most welcome. 😊
Can you tell me what model of glasses are you wearing in this video? thanks in advance
a helpful video, thanks a lot Arash😍
My pleasure.
is there any Gutenberg block so i could put multiple texts inside it so the texts fade in and fade out one after another ?
Awesom! Thx!
No problem!
Amazing.....thanks a lot ❤
No problem.
you are osm men dosent wasting time you just come on to the main point i love your this thing thats the reasone why i always watch MR.Arsh
Thank you so much. I'm glad you like my teaching style.
thank u so much your video or so help full thanks
No problem.
May i know how to get the gradient that you used....in flutter i guess
thanks!
No problem!
thaks your video is to good and the way you teach one bye one love it
Thank you. Glad you like it.
Thanks man
No problem.
thank you
No problem.
❤ love you bro.
🙏🏻❤
Hi, I love your videos. Glad I dropped by on your channeland subscribe. I am always having problems exporting my work after creating motions. What is the best way to export it to mp4. format? Thanks!
Hi Dianne,
Thank you so much. I'm glad you liked my content. Well, unfortunately not. You can record your screen though. It will get the job done.
perfect
Thanks.
wow, sick.
what plugin did you use
Hey, Arash
this animation thing sometimes happen and sometimes don't
is there any alternate way to do the same?
thanks great video, but don't know why my text changing by fade animation, rather than scroll up, even I have chossed smart animation to all 3 layer of text rather than fade, the one thing I have done different is that, when creating 3 layer of frame text I thought we need to just write 3 different text to one that need to change, so I didn't follow your select frame which hides some text, just wrote text in 3 line and add prototype animation, thought It asked animation, as we choose smart animation, rather than fade, but it fading
Thank you so much for all videos.Why instead of simply writing faster you duplicate the text and then write faster?You are an awsome teacher.
No problem. It's just a habit.
Thank you so much.
Thanks
No problem.
Can this same effect work with objects/logos?
Hello Arash, I love your videos, but one question, after we're all done creating the whole design, is it possible to make it into an actual site? Is this Figma is only for us to create prototype design? Someone once told me that Figma is only a platform for us to create prototype and it cannot be publish directly like SquareSpace. Sorry for asking, i'm new here.
tnx arash🤩😍
No problem.
Awesome 🤩🙌
Thanks.
thank you:)
You're welcome!
nice.. its amazing sir tq..
Thanks.
thank u bhai
No problem.
thank you it was so useful! clould you please make video how to create dark
Glad you found it useful. A dark what?
Thanks you indeed interesting
Thank you.
This is great - thank you! I still don't really understand what exactly I did, but it's working 😆 I was wondering - how can I go back and add more frames to the component? Like say if I wanted to add more rotations?
Hey why I am not unable to select the frame and the text can you please explain
Hi arash , great . Thanks
Thank you.
@@DesignWithArash May write me important and popular plugins in figma ? thanks
broh i can't use one prototype action twice in free version in figma...should i buy a paid version to use it?
How do I export it? It’s for a case study on my website.
thanku
No problem.
amazing
Thanks a lot.
hi harsh why I can not see the animation when I preview the website design
Hi Arash, firstly a big Thank you for providing a simplified tutorial for text animation. It is indeed very helpful for beginners like me.
Secondly, I tried following the same steps as above, but as soon as I select the text + clip content text> right click and select 'Frame selection' ..the text is getting disappeared. If I take your example, only 'Faster' text is shown and the previous text to it is getting vanished. pls help!
First select the box with the 'dynamic' text (faster etc.), then select the box with the 'static text' (manage your projects), then hit 'frame selection'.
tysm... got it!@@moonwire058
Hey Arash I will hug you for sure when ever we would meet. you are awsome
Hi. Thank you so much. So are you.
Hey bro, you're the best
Thank you.
It's really simple and cool. But how can we make it look, like, never ending? What I mean is that frame 3 retuns back to frame 1 from bottom to top, can we make it cyclic so that frame 3 goes to frame 1 like frame 1/2 goes to frame 2/3? Hope you get what I mean))
I get what you mean. Obviously we cannot simply connect the last frame to the first one so you should just duplicate the cycle multiple times. It's not ideal but that's how we can do it.
Thanks a lot Exactly what i was looking for. But, is there any possibility to export it to run a figma animation on a live webpage. Export as animated svg (?)
No problem. I have a video about it on the channel. You can check it out.
New subscribers here! Thank you
Welcome! Thank you.
After delay is not working
I've tried it on frames it's working fine but not with component set. Help me with it. I followed exactly the same steps as said in the video
That was perfect
Thank uuuuuuuuuuuuuuuuuuuuuuu
No problem. Thank you.
not that much, after one hour I'm still missing some points :(
thanks...sir
No problem.
Hello, can you please create a video on how to export text animation?
Hey, I am new to Figma and I am trying to create a effect that strikes out the existing text in a frame. I have few ideas to do it but I am not pleased with the animation effect. Can you please do a tutorial on that? Or provide a video link if its already out there
Hi, sure. I'll think about it.
How do you export Figma animations like text, buttons, etc and use it on a real website? Can you do a video on this?
Awesome video....thanks alot...but didn't understand last part when u used assets what is hero ? Is it an asset or u made a new website or what is this plz explain this
Thank you. Yes, it's a hero section I already prepared for this example.
Hi, is there a way to export the whole animation as an SVG file or to export it as a lottie file?
Very good🎉
I wanted to ask one thing to u
In naukri its showing with figma they need html css also so coding is required? To become a good ux designer?
No, coding is not required to become a good UX designer.
That's cool
Thank you.
Hi, i like this tutorial but i have a big problem, on the second frame I can't select the change to properties to go on the third one there is just Frame 1 and Frame 2, if you could help don't decline!
edit: found out, I just recreated the all thing and it's working! Thanks for your tutorial!
Glad it's resolved.
it is beautiful. but how did u make that beautiful web probably landing page as well? do u have any video on that?
Thank you. I will publish a video about that.
Amazing, Can you explain how to do the same animation, but using scroll instead dealy?
Thanks. Sure.
Hey arash, so i copied your demo just to get the idea but when i clip the content by the moving frame, it only shows "faster" since that was the only one shown when clipped how can i add in "with ease " and "Efficiently" to the clipped content. (i added them to a frame like you showed so it shouldve worked under normal circumstances).
Hi. Just type all the words and then check the Clip Content checkbox. Then you can select the text layer and move it up using the arrow keys on your keyboard.
Thanks a lot. It surely was extremely helpful. But how do i export it as a gif to add on my behance or other presentations? (if there's anyone out there who knows how to export gifs directly from figma, please let me know)
No problem. There are a few plugins for exporting GIF files but they won't work in this case. You can instead record your screen and then convert your video into a GIF file. I hope it helps.
@@DesignWithArash Thanks a lot Arash. I tried it with a screen recorder and it got the job done.
Neat!
Thanks.
I can’t interact the frames when i group them in a component
Hey, Arash! Not a figma question, but - how would you create this scrolling headline in Elementor? Custom CSS?
Hey. I'm not sure. I don't use Elementor.
Got it sort of working with ChatGPT-level CSS, thanks! @@DesignWithArash