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

Поділитися
Вставка
  • Опубліковано 28 вер 2024

КОМЕНТАРІ • 114

  • @noormerchant911
    @noormerchant911 10 місяців тому +8

    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.

  • @Arjund207
    @Arjund207 11 місяців тому +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 10 місяців тому

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

  • @Thingwithlegs
    @Thingwithlegs 3 місяці тому +5

    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

  • @jayribagchi2182
    @jayribagchi2182 11 місяців тому +3

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

  • @jhonsnow534
    @jhonsnow534 10 місяців тому +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

  • @ayazqureshi9385
    @ayazqureshi9385 2 місяці тому

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

  • @EmilyByrne2023
    @EmilyByrne2023 5 місяців тому

    Great, great video! It would have been helpful if you had played the animation at the beginning of each segment so viewers know whether it's useful to them before going through all the steps.

  • @andres1814ap
    @andres1814ap 6 місяців тому

    Amazing course! Thank you!

  • @samandysimeon2991
    @samandysimeon2991 4 місяці тому

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

  • @paavamkutty
    @paavamkutty 9 місяців тому

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

  • @RahulVerma-uq5mr
    @RahulVerma-uq5mr 11 місяців тому

    Amazing tutorial Sapta thanks

  • @gehadmagdyelkhouly96
    @gehadmagdyelkhouly96 4 місяці тому

    you are prefect really thanks a lot

  • @navalsharma375
    @navalsharma375 8 місяців тому

    a very useful tutorial for beginner like me

  • @WassimHouari-i8h
    @WassimHouari-i8h 2 місяці тому

    Thanks à lot

  • @rinkoizumi6411
    @rinkoizumi6411 6 місяців тому

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

  • @arijay5211
    @arijay5211 9 місяців тому

    thanks for sharing, you're so cool 😎 😎

  • @shilpichakraborty5421
    @shilpichakraborty5421 11 місяців тому

    Amazing!

  • @aka_1763
    @aka_1763 28 днів тому

    I'm having problem in creating that loading ellipse

  • @MindMatrix-ng8tq
    @MindMatrix-ng8tq 2 місяці тому

    nice

  • @sandeepsanju7350
    @sandeepsanju7350 8 місяців тому

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

  • @MehakImran-ig3vn
    @MehakImran-ig3vn 2 місяці тому

    how to make child in of first two Animation?

  • @suniljadhav1889
    @suniljadhav1889 10 місяців тому

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

  • @BlackTint-q3x
    @BlackTint-q3x 4 місяці тому

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

  • @arifsarker4620
    @arifsarker4620 10 місяців тому

    Can you give me please Fig file?

  • @RobiulIslam-l9r
    @RobiulIslam-l9r 7 місяців тому

    Bro help me 😭

  • @soldier4082
    @soldier4082 9 місяців тому

    👎👎👎

  • @aosis
    @aosis 5 місяців тому +9

    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.

  • @abhinav8385
    @abhinav8385 11 місяців тому +9

    The quality of your videos... 😍

  • @raheelpasha4251
    @raheelpasha4251 7 місяців тому +7

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

  • @keysangyonthan
    @keysangyonthan 11 місяців тому +7

    that rupee symbol search XD

    • @saptarshipr
      @saptarshipr  11 місяців тому +3

      The struggle is real 🤣

  • @mohitvamsi10
    @mohitvamsi10 11 місяців тому +7

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

    • @saptarshipr
      @saptarshipr  11 місяців тому +1

      Your most welcome 😀🙏

    • @JITHENDERMAHARAJBPR
      @JITHENDERMAHARAJBPR 6 місяців тому

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

  • @buttercup9700
    @buttercup9700 10 місяців тому +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?.

  • @adithyag8693
    @adithyag8693 2 дні тому

    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

  • @DavidYuan1991
    @DavidYuan1991 10 місяців тому +3

    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.

  • @himankgupta325
    @himankgupta325 10 місяців тому +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

  • @mrbl1986
    @mrbl1986 11 днів тому

    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

  • @poulamimajumder337
    @poulamimajumder337 Місяць тому

    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

  • @mahammushtaq4262
    @mahammushtaq4262 2 місяці тому

    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.

  • @a.janani2038
    @a.janani2038 5 місяців тому

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

  • @vaibhavbansal007
    @vaibhavbansal007 7 місяців тому +2

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

  • @MobileMonk
    @MobileMonk 10 місяців тому +1

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

  • @massivemotivation
    @massivemotivation 2 місяці тому

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

  • @Stressgaming2002
    @Stressgaming2002 11 місяців тому +1

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

  • @SehrishMoujahid
    @SehrishMoujahid 6 місяців тому +1

    i subscribe u

  • @palaparthiprakash
    @palaparthiprakash 11 місяців тому +1

    Quite informative .. keep it up 👍

  • @stranger.140
    @stranger.140 Місяць тому

    Can't we do both hover and on click together?

  • @ceejayviii
    @ceejayviii 5 місяців тому +1

    Bro the heart animation was sick💯👌

  • @RuaHiraishi
    @RuaHiraishi Місяць тому

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

  • @JulieShipman-w4g
    @JulieShipman-w4g 10 місяців тому +1

    Thank you for a great tutorial!

  • @TheSAMRIDH
    @TheSAMRIDH 5 місяців тому

    This is an Important Video 😅

  • @lechuguitaaaa
    @lechuguitaaaa 4 місяці тому +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

  • @graphixseeker
    @graphixseeker 6 місяців тому +1

    9th one is my favourite 🔥

  • @MineBeastYT
    @MineBeastYT 5 місяців тому

    3:38 how to do that

  • @snehankodutta971
    @snehankodutta971 7 місяців тому +1

    Not a good teacher

  • @sumanmukherjee1641
    @sumanmukherjee1641 11 місяців тому +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  11 місяців тому +1

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

    • @sumanmukherjee1641
      @sumanmukherjee1641 11 місяців тому

      Great 👍

    • @sumanmukherjee1641
      @sumanmukherjee1641 11 місяців тому

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

  • @SezinAltugan
    @SezinAltugan 5 місяців тому

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

  • @shashwatmanjul5119
    @shashwatmanjul5119 9 місяців тому +1

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

  • @Pratyushz
    @Pratyushz 11 місяців тому +1

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

  • @PhillBueno
    @PhillBueno 5 місяців тому

    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 5 місяців тому

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

  • @letscreate6625
    @letscreate6625 20 днів тому

    i found a gem

  • @lionelmourya
    @lionelmourya 7 місяців тому

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

  • @vmartme
    @vmartme 8 місяців тому

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

  • @OtakuOrigins
    @OtakuOrigins Місяць тому

    Amazing tutorial, very helpuful ❤

  • @Dhileep0382
    @Dhileep0382 8 місяців тому

    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?😢😢

  • @hiuchichan7061
    @hiuchichan7061 7 місяців тому

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

  • @SheheryarSattar-c9k
    @SheheryarSattar-c9k 6 місяців тому

    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

  • @Dhrumin-yl4fp
    @Dhrumin-yl4fp 4 місяці тому

    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

  • @minakshipandey404
    @minakshipandey404 3 місяці тому

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

  • @rajeshphotography3670
    @rajeshphotography3670 8 місяців тому

    Thanks alot

  • @nehasalma9083
    @nehasalma9083 9 місяців тому

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

  • @menakachandrasekhar6485
    @menakachandrasekhar6485 11 місяців тому +1

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

  • @prafulsutar.uxd.
    @prafulsutar.uxd. 4 місяці тому

    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.

  • @akashsood-j9i
    @akashsood-j9i 7 місяців тому

    how we export the gif of these component for developer

  • @hamzahassan
    @hamzahassan 10 місяців тому

    Thank you so much bro

  • @abhichatterjee9064
    @abhichatterjee9064 11 місяців тому

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

  • @ZohaibSakandar
    @ZohaibSakandar Місяць тому

    thank you bro

  • @GeetSona
    @GeetSona 7 місяців тому

    very helpful Thanks :)

  • @introvertedboyshubham7828
    @introvertedboyshubham7828 7 місяців тому

    figma has now been paid sir

  • @yashwanthsk4612
    @yashwanthsk4612 11 місяців тому

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

  • @imanshahin5903
    @imanshahin5903 7 місяців тому

    great animation number 7

  • @usamamunir4415
    @usamamunir4415 8 місяців тому

    thanks for making this

  • @SisiBisi-zh1cj
    @SisiBisi-zh1cj 4 місяці тому

    Thank you so much

  • @anukrititripathi152
    @anukrititripathi152 6 місяців тому

    Thankyou so much!

  • @UXUIWorld123
    @UXUIWorld123 6 місяців тому

    Awesome tutorial 😊

  • @akanshasdiary
    @akanshasdiary 11 місяців тому +1

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

    • @anuranmukherjee9022
      @anuranmukherjee9022 11 місяців тому

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

  • @geekthegeek730
    @geekthegeek730 7 місяців тому

    just wow! I learned a lot

  • @sumanmukherjee1641
    @sumanmukherjee1641 11 місяців тому +1

    In Gachibowli, Chondrobindu band is performing tonight.
    Aapni aschen ki? @saptarshi

  • @RajeshwarSingh-h1j
    @RajeshwarSingh-h1j 7 місяців тому

    love it bhai !!

  •  6 місяців тому

    THANKS!!!! WOW

  • @uifry
    @uifry 11 місяців тому

    Well Explained.

  • @sanjaykumarca8592
    @sanjaykumarca8592 7 місяців тому +1

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

  • @sankar_mobile_photography6696
    @sankar_mobile_photography6696 7 місяців тому

    Thank Yu So much give me more knowlege

  • @Bakchod_launde
    @Bakchod_launde 7 місяців тому

    i tried several times but cant find out how (press and hold funtion works) ? @saptarshi please help

    • @SheerDesigns
      @SheerDesigns 5 місяців тому

      Select the content, then press alt key and while holding alt drag the content...
      (Making copy of content )