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.
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, 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?
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?
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
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 (?)
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
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
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?
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'.
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.
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.
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.
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.
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.
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!
Hey Arash ! thank you so much for sharing this tutorial. But i have a problem here, after following the steps, when i start the prototype the word "faster" it doesnt change, help please !
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
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
Bro is this free ?
Learned so much without wasting any moment. Perfect
Glad you liked it.
HI Arash, I'm new to UI/UX design but i've already learned a lot from your videos
Hi. Great to hear!
You deserve more subscribers, mate.
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🤗
Broo! Best best best tutorial, very concise and useful tasteful.
This is the second video of yours that I watched and I subscribed. You make it look easy and simple.
Welcome aboard! Thank you.
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.
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 !
🔥😂 thx I was actually struggling for interaction option 🔥
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 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.
Great video Arash, Thank you for everything, Please keep going
Thank you so much.
Thank you so much for this much needed tutorial. It helped me a lot ❤
Glad it helped! You are very welcome.
Thank you so much for this much needed tutorial. It helped me a lot ❤
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.
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 👍
First vid and you have a new sub
Perfect tutorial video everrrrrr man ....small ..precise to the point 💯💎🔥
Appreciate it!
OMG ! I love your content!
Thanks a lot!
youre amazing. my hero indeed
Thank you so much.
You’re a great tutor, I’m really looking forward to collaborating
Amazing! I just want to try it.
thank u so much! u literaly saved me with this tutorial❤❤❤
No problem.
Thank you so much........learnt in less than a min
No problem.
Thanks, Arash, really helpful!
Glad it was helpful!.
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.
This is awesome!! Thanks!
YOU ARE THE BEST!!
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
I love it! Thanks again for this useful video.
Glad you enjoyed it!
is there any Gutenberg block so i could put multiple texts inside it so the texts fade in and fade out one after another ?
👏👏👏 Thank you so much for this tutorial sir I'm your big fan from the Philippines.
Thank youuu so much!!! really helped me out :D
No problem. Glad it helped.
a helpful video, thanks a lot Arash😍
My pleasure.
Subscribed! Fantastic tutorial an very well presented.
Thank you. Welcome to the channel.
I love this! Any idea how to develop this using React?
I LOVE YOUR VIDEO AND YOUR PRONOUNTATION AMAZING
Thank you so much.
thank you! great tutorial :D
No problem. Thanks.
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.
very quick learning. amazing, tnx
Thank you so much. Glad it helped.
Thank you so much for this I love it!
No problem.
Thank you so much for this tutorial
thanks...it was so useful, please keep going.
No problem. Thank you.
Wonderful video. You inspire me
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.
Hey bro, you're the best
Thank you.
wonderful animation
Thanks.
you the best
🔥🔥
Thanks you for your tutorial brother
You are welcome.
Thank you so much. your videos are best.
So nice of you. Glad you liked them.
You are AMAZING!
Thank you so much.
tnx arash🤩😍
No problem.
Can you tell me what model of glasses are you wearing in this video? thanks in advance
Hey Arash I will hug you for sure when ever we would meet. you are awsome
Hi. Thank you so much. So are you.
Awesome 🤩🙌
Thanks.
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.
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.
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
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
thaks your video is to good and the way you teach one bye one love it
Thank you. Glad you like it.
Thanks a lot for this video😇
You're most welcome. 😊
Awesom! Thx!
No problem!
very helpful , thnx
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.
Thanks sir, love your tutorial, please name of app?
No problem. Thanks. It's Figma.
Thank you so much 😃😍
You're welcome 😊
THANKS A LOT THIS TUTORIAL IS GREAT KUDOS
You're welcome! Glad it helped.
nice.. its amazing sir tq..
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 man
No problem.
❤ love you bro.
🙏🏻❤
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
Amazing, Can you explain how to do the same animation, but using scroll instead dealy?
Thanks. Sure.
Hi arash , great . Thanks
Thank you.
@@DesignWithArash May write me important and popular plugins in figma ? thanks
That was perfect
Thank uuuuuuuuuuuuuuuuuuuuuuu
No problem. Thank you.
not that much, after one hour I'm still missing some points :(
Amazing.....thanks a lot ❤
No problem.
New subscribers here! Thank you
Welcome! Thank you.
Hey, Arash
this animation thing sometimes happen and sometimes don't
is there any alternate way to do the same?
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.
How do you export Figma animations like text, buttons, etc and use it on a real website? Can you do a video on this?
2:35 - its driving me mad :-) When I'm dragging the words below to come up...the whole frame moves, why is that?
SAME problem
have you fixed it?
I'm having the same problem
I've fixed it :)
To you want to share? @@rappingtornado1417
thank you For this tutorial , But I can't understand how can give the developer for use please guide me ?
thanks!
No problem!
Can this same effect work with objects/logos?
Hello, can you please create a video on how to export text animation?
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.🙏🏻🙏🏻
thank you:)
You're welcome!
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.
Ur prob got solved? Becoz even I want to know how to do it
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.
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.
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
thank you
No problem.
wow, sick.
Thanks
No problem.
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.
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.
Hey Arash ! thank you so much for sharing this tutorial.
But i have a problem here, after following the steps, when i start the prototype the word "faster" it doesnt change, help please !
Hey. No problem. Please check your trigger.
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
hey just wanted to know how can i use these prototype animation in my website as a code or convert it into code?
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.