Animate Text in Figma Like a Pro | Figma Tutorial

[@DesignWithArash]

👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX

[@Pavan-735]

Bro is this free ?

[@hasibgns]

Learned so much without wasting any moment. Perfect

[@DesignWithArash]

Glad you liked it.

[@angelgloria_15]

HI Arash, I'm new to UI/UX design but i've already learned a lot from your videos

[@DesignWithArash]

Hi. Great to hear!

[@YaraAldabe]

You deserve more subscribers, mate.

[@IjeomaFajumo-dv1ui]

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.

[@DesignWithArash]

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.

[@IjeomaFajumo-dv1ui]

@@DesignWithArash Thank you so much Arash🤗

[@naveedhasan9725]

Broo! Best best best tutorial, very concise and useful tasteful.

[@srushtibk1458]

This is the second video of yours that I watched and I subscribed. You make it look easy and simple.

[@DesignWithArash]

Welcome aboard! Thank you.

[@TaranehDerakhshani]

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.

[@DesignWithArash]

No problem. It's just a habit. Thank you so much.

[@bryce2fadeway]

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 !

[@Zestyzenitsu]

🔥😂 thx I was actually struggling for interaction option 🔥

[@MariaRivera-mz2ix]

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! 😊👍

[@DesignWithArash]

You are so welcome! Glad it was helpful.

[@egbetayoeunice4350]

I tried it and mehn it was sleek. I always love Arash's video. He is a good teacher🤗😘

[@DesignWithArash]

Thanks a lot. It's very nice of you.

[@BrowHausBeaute]

First vid and you have a new sub

[@xseenozx3856]

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

[@DesignWithArash]

Thank you so much. I'm glad you like my teaching style.

[@farshadamirshoghi9323]

Great video Arash, Thank you for everything, Please keep going

[@DesignWithArash]

Thank you so much.

[@RudiODonoghue]

YOU ARE THE BEST!!

[@orrindrilla]

Thank you so much for this much needed tutorial. It helped me a lot ❤

[@DesignWithArash]

Glad it helped! You are very welcome.

[@kishorekumarseenivasan]

Thanks a ton arash for providing such amazing tutorials 👏

[@DesignWithArash]

No problem. Glad you liked them.

[@DESCENDANT-c8r]

Thanks man it worked I am soo happy keep uploading more videos like this 🙏🏻🙏🏻

[@DesignWithArash]

No problem 👍

[@MdAbdulAziz-h7z]

Thank you so much for this much needed tutorial. It helped me a lot ❤

[@planetearthhhhhh]

Perfect tutorial video everrrrrr man ....small ..precise to the point 💯💎🔥

[@DesignWithArash]

Appreciate it!

[@AstridISanchez]

OMG ! I love your content! Thanks a lot!

[@Fjjdcreative]

You’re a great tutor, I’m really looking forward to collaborating

[@anniebose02]

Thank you so much........learnt in less than a min

[@DesignWithArash]

No problem.

[@BAMZTvOfficial]

👏👏👏 Thank you so much for this tutorial sir I'm your big fan from the Philippines.

[@AmandaThomas-z5g]

This is awesome!! Thanks!

[@charljustinedarapisa6758]

youre amazing. my hero indeed

[@DesignWithArash]

Thank you so much.

[@FedericoMontemurro-r2v]

Subscribed! Fantastic tutorial an very well presented.

[@DesignWithArash]

Thank you. Welcome to the channel.

[@mojtabajoula3246]

you the best 🔥🔥

[@niloofarnoori-x9s]

Amazing! I just want to try it.

[@snizhana.pronik]

thank u so much! u literaly saved me with this tutorial❤❤❤

[@DesignWithArash]

No problem.

[@teohpearl6266]

a helpful video, thanks a lot Arash😍

[@DesignWithArash]

My pleasure.

[@girishtarwatkar9375]

Thanks, Arash, really helpful!

[@DesignWithArash]

Glad it was helpful!.

[@davidcastillo5420]

Thank youuu so much!!! really helped me out :D

[@DesignWithArash]

No problem. Glad it helped.

[@SelfShotVideoEditor]

Hey Arash I will hug you for sure when ever we would meet. you are awsome

[@DesignWithArash]

Hi. Thank you so much. So are you.

[@mccarthyephraim]

Hey bro, you're the best

[@DesignWithArash]

Thank you.

[@shtuchka815]

I love it! Thanks again for this useful video.

[@DesignWithArash]

Glad you enjoyed it!

[@sharifurrahman2538]

very quick learning. amazing, tnx

[@DesignWithArash]

Thank you so much. Glad it helped.

[@waseembakkar]

I LOVE YOUR VIDEO AND YOUR PRONOUNTATION AMAZING

[@DesignWithArash]

Thank you so much.

[@asifullahkhan3070]

Thank you so much for this tutorial

[@natalii8366]

thank you! great tutorial :D

[@DesignWithArash]

No problem. Thanks.

[@anshadmohamed2868]

Thank you so much for this I love it!

[@DesignWithArash]

No problem.

[@PatTheRipper]

Wonderful video. You inspire me

[@niloofartorkian8401]

thanks...it was so useful, please keep going.

[@DesignWithArash]

No problem. Thank you.

[@elinaoikonomou381]

I love this! Any idea how to develop this using React?

[@designer_rafiqun]

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?

[@DesignWithArash]

You are welcome. Great to hear that. You can use Zeplin for design handoff. I'll noted your questions for future video ideas.

[@greensthecolour]

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?

[@pranayprasad4150]

Hey why I am not unable to select the frame and the text can you please explain

[@shivamoeini1920]

You are AMAZING!

[@DesignWithArash]

Thank you so much.

[@The_Blank_Life]

very helpful , thnx

[@earthgraduate726]

is there any Gutenberg block so i could put multiple texts inside it so the texts fade in and fade out one after another ?

[@Pm_mrx]

tnx arash🤩😍

[@DesignWithArash]

No problem.

[@arnicot]

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

[@DesignWithArash]

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.

[@armanuddinghazi2039]

Awesome 🤩🙌

[@DesignWithArash]

Thanks.

[@nehasalma9083]

thaks your video is to good and the way you teach one bye one love it

[@DesignWithArash]

Thank you. Glad you like it.

[@neginmatin1819]

Thank you so much. your videos are best.

[@DesignWithArash]

So nice of you. Glad you liked them.

[@shifatmasud]

❤ love you bro.

[@DesignWithArash]

🙏🏻❤

[@MONEY-cb1ju]

That was perfect Thank uuuuuuuuuuuuuuuuuuuuuuu

[@DesignWithArash]

No problem. Thank you.

[@doctorflynn5124]

not that much, after one hour I'm still missing some points :(

[@zinlin8616]

Thanks you for your tutorial brother

[@DesignWithArash]

You are welcome.

[@kiranmadad3917]

thank you For this tutorial , But I can't understand how can give the developer for use please guide me ?

[@adeebashahzadi3181]

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

[@DesignWithArash]

Thank you. Yes, it's a hero section I already prepared for this example.

[@samscam9103]

THANKS A LOT THIS TUTORIAL IS GREAT KUDOS

[@DesignWithArash]

You're welcome! Glad it helped.

[@iwonakiejno3452]

Awesom! Thx!

[@DesignWithArash]

No problem!

[@Petuk_Kolkata]

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?

[@DesignWithArash]

No, coding is not required to become a good UX designer.

[@parvinshirinova4695]

Thanks a lot for this video😇

[@DesignWithArash]

You're most welcome. 😊

[@tallalbinnasir6598]

I tried it many times but couldn't crack that why my animation was not working, I followed each and every step and settings you did. But then I realized, changing the color of the moving text makes it animate, and I tried like so many times. But the question is, what is the logic behind it? That black isn't getting animated, only colored text animates.

[@tallalbinnasir6598]

At first I thought that I was missing something while managing the frame layers, but after completing, it still wasn't working. My static and moving texts, both were default black, but at the end, as a last retort, I changed the color of moving text to red, it worked. I can't find any logic or any video on this. I don't know if this was a glitch or not but please help, it took me a whole day to figure out the problem, but I can't find logic behind it.

[@mamma_and_aayu4557]

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!

[@moonwire058]

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'.

[@mamma_and_aayu4557]

tysm... got it!@@moonwire058

[@esthernwaogu592]

wonderful animation

[@DesignWithArash]

Thanks.

[@genitho.3458]

New subscribers here! Thank you

[@DesignWithArash]

Welcome! Thank you.

[@Kevin-ou1zg]

How do you export Figma animations like text, buttons, etc and use it on a real website? Can you do a video on this?

[@arghavan8552]

thank you it was so useful! clould you please make video how to create dark

[@DesignWithArash]

Glad you found it useful. A dark what?

[@RAMAMURTHYVRO]

nice.. its amazing sir tq..

[@DesignWithArash]

Thanks.

[@MoosaMughal.1]

it is beautiful. but how did u make that beautiful web probably landing page as well? do u have any video on that?

[@DesignWithArash]

Thank you. I will publish a video about that.

[@muhammedfaris9408]

Great video, but can we stop that double scrolling to up after 2nd interaction. like the 3 rd interaction it goes two time scrolling.

[@andersnord8255]

2:35 - its driving me mad :-) When I'm dragging the words below to come up...the whole frame moves, why is that?

[@ayhembenkoli]

SAME problem

[@rappingtornado1417]

have you fixed it? I'm having the same problem

[@rappingtornado1417]

I've fixed it :)

[@andersnord8255]

To you want to share? ​@@rappingtornado1417

[@sharon_hart]

I have the newer version of FIgma and wondering if figma create component set = create multiple components or create component. Also You show 3 frames in the component one under the other but when you drag it into your webpage it shows up as one, mine stays as 3 lines. I'm confused. I'm using Figma Desktop App version 124.5.5

[@savvysu8225]

Well it is a component set = Variants of a single component with auto animation within the component He dragged and dropped the component with pre applied animation . If its confusing you... Go through your beginning lessons its easy to understand don't worry.. Just a bit of confusion which can be cleared if we recall our old lessons

[@sudeepindia]

Thanks man

[@DesignWithArash]

No problem.

[@sinhkhya]

Thank you so much 😃😍

[@DesignWithArash]

You're welcome 😊

[@mischugo]

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 (?)

[@DesignWithArash]

No problem. I have a video about it on the channel. You can check it out.

[@ShedrackEmmanuel-w6i]

Hello, can you please create a video on how to export text animation?

[@mahmoudrezamohammadnejad8286]

Hi arash , great . Thanks

[@DesignWithArash]

Thank you.

[@mahmoudrezamohammadnejad8286]

@@DesignWithArash May write me important and popular plugins in figma ? thanks

[@AnwurikaHappinessGodson-gy2hi]

Thanks sir, love your tutorial, please name of app?

[@DesignWithArash]

No problem. Thanks. It's Figma.

[@nainwayasanjay]

Amazing.....thanks a lot ❤

[@DesignWithArash]

No problem.

[@afwanradhiah7779]

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.

[@arielmoisesmaradiagarodrig9707]

Amazing, Can you explain how to do the same animation, but using scroll instead dealy?

[@DesignWithArash]

Thanks. Sure.

[@drobreDen]

wow, sick.

[@darkovitorovic1244]

Can you tell me what model of glasses are you wearing in this video? thanks in advance

[@swapnalis1483]

Great content.. You are UI design skills are awesome. Can you please make some videos on english. Your english is quite good.

[@DesignWithArash]

Thank you very much.🙏🏻🙏🏻

[@editorvijaypro]

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

[@gokhangullu]

perfect

[@DesignWithArash]

Thanks.

[@prajnarpatil4586]

thank you:)

[@DesignWithArash]

You're welcome!

[@graphiwhisper]

thanks!

[@DesignWithArash]

No problem!

[@Calorie_Coach]

thank u so much your video or so help full thanks

[@DesignWithArash]

No problem.

[@theseamuss56]

Thank you for your tutorial! I've made everything, but in the end when I copy embed code to my Behance project page, animation is absent, only static text. Can you please help me? I am a newbie in Figma.

[@reshmayamuna6565]

Ur prob got solved? Becoz even I want to know how to do it

[@samuelbula2294]

That's how you create a tutorial

[@digitalsolanki3789]

Hey, Arash this animation thing sometimes happen and sometimes don't is there any alternate way to do the same?

[@juleonasefi5230]

Can this same effect work with objects/logos?

[@vegatables3457]

thank you

[@DesignWithArash]

No problem.

[@tenalonuuka2174]

what plugin did you use

[@zohakhan-c1x]

hi harsh why I can not see the animation when I preview the website design

[@massivemotivation]

hey just wanted to know how can i use these prototype animation in my website as a code or convert it into code?

[@richasrivastava7887]

Neat!

[@DesignWithArash]

Thanks.