Website Animation in Figma: Master Smart Animate, Component, and Variant by Animation a web Page.
Вставка
- Опубліковано 24 лип 2022
- Learn how to create nice looking animation on the elements of your website and master the use of smart animate, Component, variants and masking to achieve beautiful transitions on your website design using only Figma
Find the Link to the Community File Here
www.figma.com/community/file/...
Awesome, thanks for sharing 👍
I love how patiently you walk us through designing in Figma. Your videos have helped me A LOT in my UI/UX journey.Thank you very much. You're a lifesaver
You’re welcome 🙏. I appreciate your kind words 🥹
This is lovely it’s nice to have you back.
Thank You 🙏
Using the Varient-Funtion of the figma for animation is very impressive.
This tutorial is so helpful, you just earned a subscriber, thank you for being amazing.
Thank you so much. 😊
Like your video. It's very easy to follow. Thanks!
You’re welcome 🙏🤗
your video was great! Thanks for the effort you put in.
You’re very welcome 🙏
very good instruction, thank you so much
You’re welcome 😊
Thank you very much I love your teaching because that was step by step and learn slowly. :)
You're welcome, thank you for the kind words😊
Wow thats brilliant, thank you 🙏🙏🙏
You’re welcome 😊
Amazing idea to use a mask, thank you🤝
You’re welcome 🙏
It was great. I tried to it it myself and I could do it. Thank you.
You’re welcome 😊🙏
My new favourite channel
Thank you. I appreciate 🥹🤗
nice what i looking i get it ..thanks Brother .....make more video like this 👍
Sure I will. You’re welcome
you have done your job well brother you guided us in a good way and teach every thing step by step thnku for this
It's my pleasure
do we need to convert this to html ,css? or we can directly get from figma?
This is greatness👏
Thank you 🙏
thank you soo much for soo much knowledge............
You’re welcome 🥂
i don't understand when we should frame element and when we should mask element?
You are a life saver❤😢
Thank you 😊
Is there any possibility to get code of this animation?
That is great thanks, I recreated with price tabel and it works, but I would like to ask you how to export it with the animation?
Maybe screen record
This tutorial is very helpful
Glad you think so!😊
Thanks for sharing
You’re very welcome
please could you share the file I'm a student and love to play with it. 😊👍love the video, thanks
hey why you use mask? can't we use the element without mask?
It's very helpful, thank you bro 🙂
You’re very welcome 😊 🙏
@@femijohn thank you 🙂🙂
GOD BLESS YOU BROTHER❤❤❤
Thank You so much.
Hi Femi, great tutorial as usual. Did you create the arrow yourself? If yes, could you please do a tutorial on it. Thank you.
You’re welcome didn’t create that arrow myself. But I can, and I’ll make a video on that using the pen tool
@@femijohn Where did you get this arrow ?
I cannot see the animation after following all the steps
Awesome as always femi🥳
Thank You Gibson for always being there to cheer. I want you to know that I appreciate you. 🙏
@@femijohn you are always welcome bro🤝
Thanks ❤ brother
Welcome
super helpfull
Thank You 😊
Thank you
You’re welcome 🙏
Hi Fem, in which format you export the animated UI, I mean if we want to share it on Dribble with animation on it. Thanks!
You can get a screen record of the figma prototype
Nice video! Loved it... How can one create a mobile responsive version of this?
Thank you. I will explain better on responsiveness soon. But I hope you can find other resource to help with that right. 🙏
I cannot see the animation, after following each of the steps
k is to scale and v to move tool? Please can you share the link to the post in the figma community. Thank you, I would actual try to implement this on what I am working with hopes I get it. *fingers crossed*
You’re welcome. I’ll share it as soon as I upload it, soon.
Wow thanks alot
Please can you teach us how to add video and gif to our design and make it play in the prototype
You’re welcome. Okay, I’ll make a video on that, thank you. 🤗
@@femijohn you are welcome
I will be expecting
wow wow wooowwwwww 🤩🤩🤩🤩🤩🤩🤩🤩
🥺😊🤭 thank you, thank you
Mine isn’t floating
I think this guy is also good like Brendan I have subscribed and also activate the notice bell but try to include the link in your description section
Thank you so much. I’ll make sure I include links often 🙏
@@femijohn but atleast I was able to understand and acheive it
Quick question,I realised you cope and paste the components . I've actually not tried copying and pasting a component,I always just select them from the asset option,will the components be in the asset section or is there a reason you stuck to copying and pasting them
It’s the same thing. I just don’t want to be opening the assets panel all the time. Copying and pasting gives you the same component instance in the asset panel.
Thank you
Hello , instead of masking can we not just frame them ?
Oh yes. Definitely
👌
Thanks 🙏
My good friend.. let us link up na
Sure man, hit me up on any of my socials in the about section 😊
hi, although i follow all the steps i can't replicate the animation. how come?
Sorry about that, what exactly are you having trouble with.
Instead of using the rectangle>mask method on the text frame..Can't you just make it a frame
Yes you can just make it a simple frame
Nice...well done! but the animation is too linear.
Thank you 🙏
Sir
I like this web pages design please send me same design 🤞🤝 on my email id.