Animate Text in Figma Like a Pro | Figma Tutorial
Вставка
- Опубліковано 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/45KHoKJ
📸 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.
Thank you so much for this much needed tutorial. It helped me a lot ❤
Glad it helped! You are very welcome.
Learned so much without wasting any moment. Perfect
Glad you liked it.
Amazing! I just want to try it.
Great video Arash, Thank you for everything, Please keep going
Thank you so much.
I love it! Thanks again for this useful video.
Glad you enjoyed it!
Perfect tutorial video everrrrrr man ....small ..precise to the point 💯💎🔥
Appreciate it!
👏👏👏 Thank you so much for this tutorial sir I'm your big fan from the Philippines.
HI Arash, I'm new to UI/UX design but i've already learned a lot from your videos
Hi. Great to hear!
This is the second video of yours that I watched and I subscribed. You make it look easy and simple.
Welcome aboard! Thank you.
Thanks man it worked I am soo happy keep uploading more videos like this 🙏🏻🙏🏻
No problem 👍
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.
Thanks a ton arash for providing such amazing tutorials 👏
No problem. Glad you liked them.
thank u so much! u literaly saved me with this tutorial❤❤❤
No problem.
Thanks, Arash, really helpful!
Glad it was helpful!.
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.
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.
Wonderful video. You inspire me
how to export this page as a animated video
First vid and you have a new sub
Thank you so much for this I love it!
No problem.
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 !
thanks...it was so useful, please keep going.
No problem. Thank you.
Thank you so much. your videos are best.
So nice of you. Glad you liked them.
I love this! Any idea how to develop this using React?
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🤗
I LOVE YOUR VIDEO AND YOUR PRONOUNTATION AMAZING
Thank you so much.
Thank youuu so much!!! really helped me out :D
No problem. Glad it helped.
Subscribed! Fantastic tutorial an very well presented.
Thank you. Welcome to the channel.
Can you tell me what model of glasses are you wearing in this video? thanks in advance
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.
THANKS A LOT THIS TUTORIAL IS GREAT KUDOS
You're welcome! Glad it helped.
youre amazing. my hero indeed
Thank you so much.
very quick learning. amazing, tnx
Thank you so much. Glad it helped.
Thanks you for your tutorial brother
You are welcome.
thank you! great tutorial :D
No problem. Thanks.
Thanks a lot for this video😇
You're most welcome. 😊
May i know how to get the gradient that you used....in flutter i guess
You are AMAZING!
Thank you so much.
is there any Gutenberg block so i could put multiple texts inside it so the texts fade in and fade out one after another ?
a helpful video, thanks a lot Arash😍
My pleasure.
Thank you so much........learnt in less than a min
No problem.
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.
wow, sick.
Amazing.....thanks a lot ❤
No problem.
thank u so much your video or so help full thanks
No problem.
Awesom! Thx!
No problem!
wonderful animation
Thanks.
Can this same effect work with objects/logos?
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.
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
Hey, Arash
this animation thing sometimes happen and sometimes don't
is there any alternate way to do the same?
How do I export it? It’s for a case study on my website.
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!
thaks your video is to good and the way you teach one bye one love it
Thank you. Glad you like it.
what plugin did you use
thank you
No problem.
perfect
Thanks.
Awesome 🤩🙌
Thanks.
thank you it was so useful! clould you please make video how to create dark
Glad you found it useful. A dark what?
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
❤ love you bro.
🙏🏻❤
Hello, can you please create a video on how to export text animation?
Thanks man
No problem.
tnx arash🤩😍
No problem.
nice.. its amazing sir tq..
Thanks.
thank u bhai
No problem.
Thanks you indeed interesting
Thank you.
Thank you so much 😃😍
You're welcome 😊
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.
hey just wanted to know how can i use these prototype animation in my website as a code or convert it into code?
Thanks
No problem.
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
thank you:)
You're welcome!
hi harsh why I can not see the animation when I preview the website design
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.
How do you export Figma animations like text, buttons, etc and use it on a real website? Can you do a video on this?
thanku
No problem.
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.
Hi arash , great . Thanks
Thank you.
@@DesignWithArash May write me important and popular plugins in figma ? thanks
amazing
Thanks a lot.
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.
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.
Hey Arash I will hug you for sure when ever we would meet. you are awsome
Hi. Thank you so much. So are you.
thanks...sir
No problem.
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
Amazing, Can you explain how to do the same animation, but using scroll instead dealy?
Thanks. Sure.
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.
New subscribers here! Thank you
Welcome! Thank you.
Hey bro, you're the best
Thank you.
I can’t interact the frames when i group them in a component
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 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.
That was perfect
Thank uuuuuuuuuuuuuuuuuuuuuuu
No problem. Thank you.
not that much, after one hour I'm still missing some points :(
Great content..
You are UI design skills are awesome. Can you please make some videos on english. Your english is quite good.
Thank you very much.🙏🏻🙏🏻
That's cool
Thank you.
broh i can't use one prototype action twice in free version in figma...should i buy a paid version to use it?