Website Animation in Figma: Master Smart Animate, Component, and Variant by Animation a web Page.

[@shaloma6228]

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

[@femijohn]

You’re welcome 🙏. I appreciate your kind words 🥹

[@Stylebyreme]

This is lovely it’s nice to have you back.

[@femijohn]

Thank You 🙏

[@user-ma1so2ns12on]

Using the Varient-Funtion of the figma for animation is very impressive.

[@241084sunrise]

Great Explanation - Step by Step...

[@femijohn]

You're Welcome, Thank You.

[@Aalimraan]

My new favourite channel

[@femijohn]

Thank you. I appreciate 🥹🤗

[@sadiatariq-lo4bi]

super and clean work i really like it beother

[@femijohn]

Thank you very much

[@HamzaAhmed-l2u]

you have done your job well brother you guided us in a good way and teach every thing step by step thnku for this

[@femijohn]

It's my pleasure

[@ftoommohd1035]

Great job brother! But I don’t know why it didn’t work with me - I followed you step by step

[@olusolaafikode853]

Awesome, thanks for sharing 👍

[@shrishti93]

i don't understand when we should frame element and when we should mask element?

[@iamhoustynforbes]

This tutorial is so helpful, you just earned a subscriber, thank you for being amazing.

[@femijohn]

Thank you so much. 😊

[@SisiBisi-zh1cj]

Thank you so much

[@femijohn]

You're most welcome

[@confidencedavid9623]

your video was great! Thanks for the effort you put in.

[@femijohn]

You’re very welcome 🙏

[@prakashanuvadia8870]

nice what i looking i get it ..thanks Brother .....make more video like this 👍

[@femijohn]

Sure I will. You’re welcome

[@Diyas_world]

do we need to convert this to html ,css? or we can directly get from figma?

[@seyedehsahelahmadi]

Thank you very much I love your teaching because that was step by step and learn slowly. :)

[@femijohn]

You're welcome, thank you for the kind words😊

[@osemudiamenineomon1415]

You are a life saver❤😢

[@femijohn]

Thank you 😊

[@emanfatima5801]

thank you soo much for soo much knowledge............

[@femijohn]

You’re welcome 🥂

[@lorrainekanana3094]

This is greatness👏

[@femijohn]

Thank you 🙏

[@danishachaudary141]

hey why you use mask? can't we use the element without mask?

[@IntheBellyofaWhale]

Amazing idea to use a mask, thank you🤝

[@femijohn]

You’re welcome 🙏

[@ohagoromonyinyechukwuj7305]

Wow thanks alot Please can you teach us how to add video and gif to our design and make it play in the prototype

[@femijohn]

You’re welcome. Okay, I’ll make a video on that, thank you. 🤗

[@ohagoromonyinyechukwuj7305]

@@femijohn you are welcome I will be expecting

[@printempo202]

Like your video. It's very easy to follow. Thanks!

[@femijohn]

You’re welcome 🙏🤗

[@thesoundscope1]

GOD BLESS YOU BROTHER❤❤❤

[@femijohn]

Thank You so much.

[@shivamoeini1920]

It was great. I tried to it it myself and I could do it. Thank you.

[@femijohn]

You’re welcome 😊🙏

[@sofijakovacevic6492]

How can we make purple lines on the background?

[@calvinwilliams729]

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

[@femijohn]

Thank you so much. I’ll make sure I include links often 🙏

[@calvinwilliams729]

@@femijohn but atleast I was able to understand and acheive it

[@abisolakanyinola2852]

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*

[@femijohn]

You’re welcome. I’ll share it as soon as I upload it, soon.

[@sarahigbinosa3004]

Hi Femi, great tutorial as usual. Did you create the arrow yourself? If yes, could you please do a tutorial on it. Thank you.

[@femijohn]

You’re welcome didn’t create that arrow myself. But I can, and I’ll make a video on that using the pen tool

[@palakvarshney8018]

@@femijohn Where did you get this arrow ?

[@zakipatel7579]

I cannot see the animation after following all the steps

[@adied7725]

please could you share the file I'm a student and love to play with it. 😊👍love the video, thanks

[@ogunleyejuliet4101]

Hello , instead of masking can we not just frame them ?

[@femijohn]

Oh yes. Definitely

[@aiswaryaharidas5706]

This tutorial is very helpful

[@femijohn]

Glad you think so!😊

[@jithinbabu8481]

It's very helpful, thank you bro 🙂

[@femijohn]

You’re very welcome 😊 🙏

[@jithinbabu8481]

@@femijohn thank you 🙂🙂

[@ikennagibson3933]

Awesome as always femi🥳

[@femijohn]

Thank You Gibson for always being there to cheer. I want you to know that I appreciate you. 🙏

[@ikennagibson3933]

@@femijohn you are always welcome bro🤝

[@chizzy4370]

Nice video! Loved it... How can one create a mobile responsive version of this?

[@femijohn]

Thank you. I will explain better on responsiveness soon. But I hope you can find other resource to help with that right. 🙏

[@mahdimiad]

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?

[@hameedsain6436]

Maybe screen record

[@adriandemir7699]

Is there any possibility to get code of this animation?

[@Aalimraan]

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

[@femijohn]

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.

[@Aalimraan]

Thank you

[@luyentran816]

very good instruction, thank you so much

[@femijohn]

You’re welcome 😊

[@khabbas7911]

Wow thats brilliant, thank you 🙏🙏🙏

[@femijohn]

You’re welcome 😊

[@veroniquesalesse3080]

Thanks for sharing

[@femijohn]

You’re very welcome

[@UmairUlhaque]

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!

[@metinkucuk734]

You can get a screen record of the figma prototype

[@aestheticlover6305]

wow wow wooowwwwww 🤩🤩🤩🤩🤩🤩🤩🤩

[@femijohn]

🥺😊🤭 thank you, thank you

[@daviddan__]

super helpfull

[@femijohn]

Thank You 😊

[@anjolaakinosun]

Thank you

[@femijohn]

You’re welcome 🙏

[@zakipatel7579]

I cannot see the animation, after following each of the steps

[@zurum7825]

Instead of using the rectangle>mask method on the text frame..Can't you just make it a frame

[@femijohn]

Yes you can just make it a simple frame

[@rossellasacco1886]

hi, although i follow all the steps i can't replicate the animation. how come?

[@femijohn]

Sorry about that, what exactly are you having trouble with.

[@odiniyaprince1499]

My good friend.. let us link up na

[@femijohn]

Sure man, hit me up on any of my socials in the about section 😊

[@Theisraelite]

Thanks ❤ brother

[@femijohn]

Welcome

[@ebohneche2692]

Mine isn’t floating

[@deeteekay6859]

Nice...well done! but the animation is too linear.

[@femijohn]

Thank you 🙏

[@Tima.Fard.]

👌

[@femijohn]

Thanks 🙏

[@vidhyadharsansare7278]

Sir I like this web pages design please send me same design 🤞🤝 on my email id.