10 EASY Figma Animations for Beginners In 1 HOUR 🔥| Figma Smart Animate Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ก.พ. 2025

ความคิดเห็น • 125

  • @raheelpasha4251
    @raheelpasha4251 11 หลายเดือนก่อน +14

    One of the best transition videos I have seen of Figma.. he's such a pro that I can't find him making any errors like many amateurs.. !!

  • @adithyag8693
    @adithyag8693 4 หลายเดือนก่อน +9

    button animation Normal - 0:53
    Button animation stack-3:52
    Heart animation-10:49
    infinitly spinning loader-19:43
    steps progress bar -26:27
    carousel card-32:28
    background gradient animation-38:41
    Paralax animation-45:16
    glass morphism-52:46

  • @noormerchant911
    @noormerchant911 ปีที่แล้ว +11

    Interaction is delightful candies for users when used with relevance & it helps users in their experience. All the animations you showed are really great & have pushed me to try something more of my own.

  • @abhinav8385
    @abhinav8385 ปีที่แล้ว +13

    The quality of your videos... 😍

  • @lechuguitaaaa
    @lechuguitaaaa 8 หลายเดือนก่อน +1

    You're the best, really. Most of the tutorials I watch are boring and I usually have to go back multiple times to understand what's being said, but you made it so well I even had fun! You're really easy to understand

    • @saptarshipr
      @saptarshipr  8 หลายเดือนก่อน +1

      Thank you ☺️

  • @aosis
    @aosis 9 หลายเดือนก่อน +10

    I liked this video a lot as it teaches some really good concepts. Only issue I found was the demo should be shown first and then its solution. It would help not only to excite the designer to make something new but also help some amateur one to try out making himself first and if stuck, see the solution.

  • @mohitvamsi10
    @mohitvamsi10 ปีที่แล้ว +8

    I thoroughly enjoyed this tutorial! Thank you for sharing such easy to follow methods ✨

    • @saptarshipr
      @saptarshipr  ปีที่แล้ว +1

      Your most welcome 😀🙏

    • @JITHENDERMAHARAJBPR
      @JITHENDERMAHARAJBPR 10 หลายเดือนก่อน

      @@saptarshipr Hi sir how to edit animation Explained video, like youtube creators please help me sir....i am a new youtuber my video editing like youtube creators please

  • @jayribagchi2182
    @jayribagchi2182 ปีที่แล้ว +5

    Thanksss a ton for these awesome tutorials! Please keep them coming!!

  • @A9ish23
    @A9ish23 หลายเดือนก่อน +1

    The best tutorial I've ever seen 🔥. Thanks a lot🙌

  • @DavidYuan1991
    @DavidYuan1991 ปีที่แล้ว +4

    Thank you! I've finally found a way to make animations after figma changed the "after delay trigger" that only apply to top-level frames.

  • @Arjund207
    @Arjund207 ปีที่แล้ว +6

    Thanks for sharing this tutorial, it's very well explained. I recommend doing an hour tutorial on variables that would be helpful. Also, we can use X & Y coordinates when moving any objects for smoother animations.

    • @suniljadhav1889
      @suniljadhav1889 ปีที่แล้ว

      An hour tutorial on variables is really required....

  • @prafulsutar.uxd.
    @prafulsutar.uxd. 8 หลายเดือนก่อน

    Exceptionally, your tutorials are informative and concise.
    The trippy one was the best animation of the lot.
    Thanks Sapta! See you in the next one soon.

  • @wenyanzhang7890
    @wenyanzhang7890 2 หลายเดือนก่อน +1

    Really useful for beginner!!!

  • @Pratyushz
    @Pratyushz ปีที่แล้ว +1

    Thoroughly enjoyed this tutorial. Thanks, gonna try these now :D

  • @ceejayviii
    @ceejayviii 9 หลายเดือนก่อน +1

    Bro the heart animation was sick💯👌

  • @akanshasdiary
    @akanshasdiary ปีที่แล้ว +1

    The animations were pretty cool and well explained. Thanks Santa for this :)

    • @anuranmukherjee9022
      @anuranmukherjee9022 ปีที่แล้ว

      Yeah, Sapta is almost a Santu for designers like us! 😄

  • @minakshipandey404
    @minakshipandey404 7 หลายเดือนก่อน

    You are Amazing 😍 Love it Sapta, Thanks for the details.

  • @sanjaykumarca8592
    @sanjaykumarca8592 ปีที่แล้ว +1

    you killed it bro, learnt many things in 58 min I feel

  • @andres1814ap
    @andres1814ap 10 หลายเดือนก่อน +1

    Amazing course! Thank you!

  • @fareedmohamed1504
    @fareedmohamed1504 3 หลายเดือนก่อน +2

    Thank a lot for the masterclass.

  • @shashwatmanjul5119
    @shashwatmanjul5119 ปีที่แล้ว +1

    This tut is really good the instructions are very clear i just loved it 👍

  • @ayazqureshi9385
    @ayazqureshi9385 6 หลายเดือนก่อน

    I'm Figma Lover. and I like the way you are explaining each part of animation... New Subscriber here thanks alot... I'm waiting to see more eXtreme Complex Animation Using Fimga for Website and Mobile App Too... Once again Thank you so much... Lots of Respect from Pakistan ...

  • @JulieShipman-w4g
    @JulieShipman-w4g ปีที่แล้ว +1

    Thank you for a great tutorial!

  • @buttercup9700
    @buttercup9700 ปีที่แล้ว +2

    Amazing content and the presentation:)I was trying to follow along but for the first animation I used Auto layout and it seems the animation did not work well.And then tried exactly like yours :Group then frame and then it worked.Is there any reason behind it?.

  • @unpocoloco23
    @unpocoloco23 4 หลายเดือนก่อน +1

    For the 7th animation (cards scrolling), instead of creating component states, the Horizontal scrolling in prototype would have done the same animation. Thoughts ?

  • @UXUIWorld123
    @UXUIWorld123 10 หลายเดือนก่อน

    Awesome tutorial 😊

  • @MobileMonk
    @MobileMonk ปีที่แล้ว +1

    Really Loved your Explanation on the animations...But how do you handover animations to developers?

  • @graphixseeker
    @graphixseeker 11 หลายเดือนก่อน +1

    9th one is my favourite 🔥

  • @palaparthiprakash
    @palaparthiprakash ปีที่แล้ว +1

    Quite informative .. keep it up 👍

  • @menakachandrasekhar6485
    @menakachandrasekhar6485 ปีที่แล้ว +1

    Simple and clear explanation! Very useful to share with my mentees. 😊

  • @wicky8120
    @wicky8120 3 หลายเดือนก่อน

    Hello first of all your tutorial was very help learned alot from it thank you so much
    Second i have a small question what if want it to go from stage three to stage 2 then stage 1 like we see in apps it doesn't go all the way to the first one

  • @hiuchichan7061
    @hiuchichan7061 11 หลายเดือนก่อน

    0 degrees, 120 degrees and 240 degrees will make it easier to set up a rotation animation. Especially easier for someone with OCD.

  • @OtakuOrigins
    @OtakuOrigins 5 หลายเดือนก่อน

    Amazing tutorial, very helpuful ❤

  • @geekthegeek730
    @geekthegeek730 11 หลายเดือนก่อน

    just wow! I learned a lot

  • @zahid-n8p
    @zahid-n8p 3 หลายเดือนก่อน

    Great!

  • @RahulVerma-uq5mr
    @RahulVerma-uq5mr ปีที่แล้ว

    Amazing tutorial Sapta thanks

  • @jhonsnow534
    @jhonsnow534 ปีที่แล้ว +2

    Bro im learning web dev but i can't understand backend part
    So im thinking
    UX UI + frontend part for good salary
    Is this good ? Help me

  • @navalsharma375
    @navalsharma375 ปีที่แล้ว

    a very useful tutorial for beginner like me

  • @laurariveros4495
    @laurariveros4495 2 หลายเดือนก่อน

    thanksss super usefull

  • @abhichatterjee9064
    @abhichatterjee9064 ปีที่แล้ว

    Thank you very much Sapta for this kind of video....need more videos on Protopie Animation

  • @sumanmukherjee1641
    @sumanmukherjee1641 ปีที่แล้ว +1

    Hello Sapta,
    I would like to know how you manage your time, especially during the ongoing big Bengali Durga Puja festival. You are still uploading videos 😳, and I appreciate your dedication 👏. All your videos are very helpful, including this one.
    Subho Nabami.

    • @saptarshipr
      @saptarshipr  ปีที่แล้ว +1

      Thanks lot, Suman! Shubho Nobomi to you too 😀 I had shot this one before puja 😅

    • @sumanmukherjee1641
      @sumanmukherjee1641 ปีที่แล้ว

      Great 👍

    • @sumanmukherjee1641
      @sumanmukherjee1641 ปีที่แล้ว

      Are you coming today at Gachibowli (Utsav Culture Association) to watch the Chandrobindu band's performance?

  • @mrbl1986
    @mrbl1986 4 หลายเดือนก่อน

    great tutorial Sir! Can I also transfer the animations in Figma to Framer?
    the animations are easier to create in Figma, the question is how I can integrate them into websites

  • @RajeshwarSingh-h1j
    @RajeshwarSingh-h1j 11 หลายเดือนก่อน

    love it bhai !!

  • @RuaHiraishi
    @RuaHiraishi 5 หลายเดือนก่อน +1

    how do you do the hold and drag ??? ( newbie )

  • @Thingwithlegs
    @Thingwithlegs 7 หลายเดือนก่อน +9

    Dear Sapta this is great but extremely difficult to engage, you overly repeat things again and again in your speech. Overall incredible work but leaving that tiny feedback. Cheers

  • @UttamCodelogicx
    @UttamCodelogicx 3 หลายเดือนก่อน

    Hi, this is awesome, one request to you please make a video for How we export this prototype animation in to GIF or Video. That is very helpful to us

  • @Stressgaming2002
    @Stressgaming2002 ปีที่แล้ว +1

    can you do a step by step i.e what buttons are you pressing for which operation

  • @imanshahin5903
    @imanshahin5903 11 หลายเดือนก่อน

    great animation number 7

  • @arijay5211
    @arijay5211 ปีที่แล้ว

    thanks for sharing, you're so cool 😎 😎

  • @yashwanthsk4612
    @yashwanthsk4612 ปีที่แล้ว

    Post more videos on animation, loved the way you explained☺

  • @lionelmourya
    @lionelmourya 11 หลายเดือนก่อน

    Thank you it was very helpful. Please upload these type of simple tings then slowly slowly upgrading to pro

  • @GeetSona
    @GeetSona 11 หลายเดือนก่อน

    very helpful Thanks :)

  • @anukrititripathi152
    @anukrititripathi152 10 หลายเดือนก่อน

    Thankyou so much!

  • @paavamkutty
    @paavamkutty ปีที่แล้ว

    The 7th one can be done in an easier way by using horizontal scrolling action.

  • @vaibhavbansal007
    @vaibhavbansal007 11 หลายเดือนก่อน +2

    Quick question. How are we gonna handoff it to developers??

    • @mahrukhimran5486
      @mahrukhimran5486 8 หลายเดือนก่อน

      Did you find the answer?

    • @hammedsaddam5696
      @hammedsaddam5696 6 หลายเดือนก่อน

      ​@@mahrukhimran5486Did you?

    • @mahrukhimran5486
      @mahrukhimran5486 6 หลายเดือนก่อน

      @@hammedsaddam5696 nope

  • @SheheryarSattar-c9k
    @SheheryarSattar-c9k 11 หลายเดือนก่อน

    such a great video but one thing you have to tell more detail on animation in your video you miss minors points which will be complicated to understand by begineers overall knowldege is perffect i like your way to teach like this

  • @Phill456-n6h
    @Phill456-n6h 10 หลายเดือนก่อน

    Hey Saptarshi! When you create one instance of it on the Preview panel, it does not animate, for me. What am I missing? Do you use alt to copy it? Is this preview panel just a frame? Any information would be awesome!

    • @tanyamishra8768
      @tanyamishra8768 9 หลายเดือนก่อน

      Preview panel is just a frame, correct. You can just use Copy and Paste, that also works. Alt also works.

  • @shilpichakraborty5421
    @shilpichakraborty5421 ปีที่แล้ว

    Amazing!

  • @usamamunir4415
    @usamamunir4415 ปีที่แล้ว

    thanks for making this

  • @gehadmagdyelkhouly96
    @gehadmagdyelkhouly96 8 หลายเดือนก่อน

    you are prefect really thanks a lot

  • @poulamimajumder337
    @poulamimajumder337 5 หลายเดือนก่อน

    In the progress bar animation, how can I loop the animation in the preview window? After reaching 3, it doesn't automatically return to 1

  • @uifry
    @uifry ปีที่แล้ว

    Well Explained.

  • @hamzahassan
    @hamzahassan ปีที่แล้ว

    Thank you so much bro

  • @SisiBisi-zh1cj
    @SisiBisi-zh1cj 8 หลายเดือนก่อน

    Thank you so much

  • @samandysimeon2991
    @samandysimeon2991 8 หลายเดือนก่อน

    Please, how were you able to bring the circle behind the text? I tried it and it’s going behind the text and frame.

  • @vmartme
    @vmartme ปีที่แล้ว

    Thanks Friend! it's there any way to make figma typewriter animation?

  • @Dhileep0382
    @Dhileep0382 ปีที่แล้ว

    Brother, in my tool, there is some changes. In animation, you use mostly on click tab but I have on tap. So are these same?
    And if I design a toggle button, so I select on tap for one time, so again I can't change 'on tap' for default type to prototype(reverse)....why brother?😢😢

  •  11 หลายเดือนก่อน

    THANKS!!!! WOW

  • @rajeshphotography3670
    @rajeshphotography3670 ปีที่แล้ว

    Thanks alot

  • @suniljadhav1889
    @suniljadhav1889 ปีที่แล้ว

    An hour tutorial on variables is really required....

  • @sandeepsanju7350
    @sandeepsanju7350 ปีที่แล้ว

    6:42 How do i take that rectangle and put in the canvas.

  • @massivemotivation
    @massivemotivation 6 หลายเดือนก่อน

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

  • @a.janani2038
    @a.janani2038 9 หลายเดือนก่อน

    Bro could you please tell me... what is ux...I can't understand clearly about the ux...

  • @nehasalma9083
    @nehasalma9083 ปีที่แล้ว

    nice video but try to make a little basic like which key are you using. with this thankyou for the helpful video

  • @ZohaibSakandar
    @ZohaibSakandar 5 หลายเดือนก่อน

    thank you bro

  • @moosarazeek4902
    @moosarazeek4902 4 หลายเดือนก่อน +2

    Hey I am beginner who is not able to follow this tutorial well cause I don't know the shortcuts he use and not getting the exact same results why dragging the circle and all

    • @Navin____
      @Navin____ หลายเดือนก่อน

      He is speaking too fast

  • @mahammushtaq4262
    @mahammushtaq4262 6 หลายเดือนก่อน

    I create a button using layout. I dont know why 1st animation is not working here because everytime I add th circle .It will added into to layout dont go back.

  • @Dhrumin-yl4fp
    @Dhrumin-yl4fp 9 หลายเดือนก่อน

    Is there any plugins for animation bcz I have make the buttons but no effects is showing as I click on it please help me sir

  • @himankgupta325
    @himankgupta325 ปีที่แล้ว +2

    5TH ANIMATION IS SLIGHTLY COMPLICATED
    HEY SAPTARSHI CAN YOU PLEASE MAKE A WHOLE VIDEO ON HOW TO USE THE ANGLE IN FIGMA SO THAT THIS CONFUSION CAN BE RESOLVED FOR FOREVER
    BY THE WAY THIS IS SECOND VIDEO WHICH I WATCH AT YOUR CHANNEL AND YOUR VIDEOS ARE QUITE INTERISTING THAT'S WHY I BECOME STUDENT OF YOU.
    THANKS FOR SUCH DEEP AND QUALITY CONTENT.
    I UNDERSTOOD ALL 4 ANIMATION BUT I AM FACING PROBLEM IN THE 5TH ANIMATION I DO ALL THING BUT MY LOADER IS NOT ROTATING

  • @channarayappam5062
    @channarayappam5062 2 หลายเดือนก่อน

    Which fonts did he use?

  • @rinkoizumi6411
    @rinkoizumi6411 10 หลายเดือนก่อน

    That parallax XD I imagine how my friend feel frustating while coding it

  • @keysangyonthan
    @keysangyonthan ปีที่แล้ว +7

    that rupee symbol search XD

    • @saptarshipr
      @saptarshipr  ปีที่แล้ว +3

      The struggle is real 🤣

  • @WassimHouari-i8h
    @WassimHouari-i8h 7 หลายเดือนก่อน

    Thanks à lot

  • @MindMatrix-ng8tq
    @MindMatrix-ng8tq 6 หลายเดือนก่อน

    nice

  • @introvertedboyshubham7828
    @introvertedboyshubham7828 11 หลายเดือนก่อน

    figma has now been paid sir

  • @arghadeepgoswami5597
    @arghadeepgoswami5597 หลายเดือนก่อน

    Infinity Spinning loader isn't working eventhough i followed the exact same steps...does anyone have any solution or could identify my mistake?

  • @geekgamer3686
    @geekgamer3686 หลายเดือนก่อน

    DO SOME MICRO INTERACTIONS VIDEO MY FRIEND

  • @aka_1763
    @aka_1763 5 หลายเดือนก่อน

    I'm having problem in creating that loading ellipse

  • @TheSAMRIDH
    @TheSAMRIDH 9 หลายเดือนก่อน

    This is an Important Video 😅

  • @akashsood-j9i
    @akashsood-j9i 11 หลายเดือนก่อน

    how we export the gif of these component for developer

  • @MehakImran-ig3vn
    @MehakImran-ig3vn 6 หลายเดือนก่อน

    how to make child in of first two Animation?

  • @MineBeastYT
    @MineBeastYT 9 หลายเดือนก่อน

    3:38 how to do that

  • @arifsarker4620
    @arifsarker4620 ปีที่แล้ว

    Can you give me please Fig file?

  • @letscreate6625
    @letscreate6625 4 หลายเดือนก่อน

    i found a gem

  • @BlackTint-q3x
    @BlackTint-q3x 8 หลายเดือนก่อน

    3:04 I can't have these things on my figma

  • @SezinAltugan
    @SezinAltugan 9 หลายเดือนก่อน

    That is orange not yellow. Sorry, color theory education was traumatic for me 8:36

    • @saptarshipr
      @saptarshipr  9 หลายเดือนก่อน

      😛😆

  • @SehrishMoujahid
    @SehrishMoujahid 11 หลายเดือนก่อน +1

    i subscribe u

    • @saptarshipr
      @saptarshipr  11 หลายเดือนก่อน

      Thank you 😀

  • @RobiulIslam-l9r
    @RobiulIslam-l9r 11 หลายเดือนก่อน

    Bro help me 😭

  • @snehankodutta971
    @snehankodutta971 11 หลายเดือนก่อน +1

    Not a good teacher

  • @soldier4082
    @soldier4082 ปีที่แล้ว

    👎👎👎