Counter & Slider - Number animation in Figma using Smart Animate

Поделиться
HTML-код
  • Опубликовано: 20 окт 2024

Комментарии • 87

  • @salen9086
    @salen9086 2 года назад +4

    0:59 How do I make the vertical stack-up numbers disappear after it's in the frame? I even clicked on clip content but it still reveals all the numbers.

    • @udayrajsathe
      @udayrajsathe  Год назад

      Sorry for delayed response. I was away.
      You have to turn on Clip content for doing that.

  • @susanwang1004
    @susanwang1004 3 года назад +1

    I love how you describe what we need as "ingredients" xD

  • @rinayeong7740
    @rinayeong7740 3 года назад +3

    Exactly what I was searching for. You do great, short, informative videos!

  • @axelaxelaxe
    @axelaxelaxe Год назад

    wow this was so clever of you

  • @mikagunter9534
    @mikagunter9534 Год назад

    I finally got the second option to work. However, I havew multiple purchase objects a shopping cart summary page. Only one frame at a time will allow me to have a value of 1 or greater. I have to zero out all other cart items in order to increment another. What am I doing wrong?

  • @jaksheshpatel1021
    @jaksheshpatel1021 Год назад

    How this counter can be update to cart simultaneously when we press + icon

  • @luciaalejandramartosreano6208
    @luciaalejandramartosreano6208 2 года назад

    ThanK you Udayraj! I was struggling with this. However, I feel stagnant because I can´t move up or down my stack of numbers. I Selected it, then I pressed Shift + arrow up and down, but nothing happend. Would you help me? I´ll apreciate it so much.

    • @udayrajsathe
      @udayrajsathe  2 года назад

      It may be because you selected the number layer instead of the Frame containing all numbers. Can you try that?

  • @diacy710902
    @diacy710902 2 года назад

    This video was great !!!! Thanks for sharing the tutorial, it was simple, easy and very clearly to understand, very helpful!!!

  • @alenachuyankova
    @alenachuyankova 2 года назад

    I am SOOOO THANKFUL! YOU ARE GENIOUS!

  • @dashanagorniuk4095
    @dashanagorniuk4095 Год назад

    Thank you so much! You are fantastic!

  • @s0nia.t
    @s0nia.t 2 года назад

    waittt how do you shift the list of numbers up??? I dont know how to move the numbers on my Mac keyboard 😩😩😩😩

    • @udayrajsathe
      @udayrajsathe  2 года назад

      Sorry for late reply. I used Shift + Arrow key on my Mac.
      Did you figure it out already?

  • @maryamabaee332
    @maryamabaee332 2 года назад

    Thanks. I have a question. How can i press add to Craft and See at The same time number in the Basket on top of page ?

    • @udayrajsathe
      @udayrajsathe  Год назад

      Sorry for delayed response. Is this resolved already?

  • @michaelfawaz6483
    @michaelfawaz6483 3 года назад

    Great video, just one quick question where exactly is the clip contain icon? That’s not the same as masking is it ?

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      When you select a frame, you can see clip content icon in top right 'Frame' properties section.
      It's similar to masking as it hides all content outside frame outlines.

  • @jackieqiu7139
    @jackieqiu7139 2 года назад +1

    Hi thanks for the tutorial, was simple and easy to follow! Appreciate the work!

  • @sindhu1345
    @sindhu1345 4 года назад

    Hey this video was great was could it be possible to very clearly explain which frame you moved the components into because I was seeing the left panel all along and lost context a little bit.
    but still a great video, very helpful :)

  • @Carlos-dm5fo
    @Carlos-dm5fo 2 года назад

    thanks for the great video!

  • @tanvipunjabi7286
    @tanvipunjabi7286 3 года назад

    Thanks for this amazing video @Udayrah Sathe. Can you please point out where you have implemented draggable slider in the Prototyping Video for which the link I found in the description. Was not able to find prototype for Draggable Slider. It has Drag/Swipe cards. Thanks.

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Hey thanks & sorry for late reply. Have you found the link already?

  • @jaksheshpatel84
    @jaksheshpatel84 Год назад

    how to create shopping cart animation when user click add to cart button

  • @Valeria-wm4eu
    @Valeria-wm4eu 2 года назад

    Hi Udayraj, when I copy the counter that is on the screen (the main one) and pastes it, so I can have different counters on the same screen they don't work simultaneously. Only works if I use one counter at a time..

    • @udayrajsathe
      @udayrajsathe  2 года назад

      You can now use this as Interactive component as use it simultaneously :)

  • @Mondobongo88
    @Mondobongo88 2 года назад

    unfortunately numbers don't stop in this case, its jsut an animation from 1 to 10. Whats the secret to stop the progress bar and make it show a number there?

    • @udayrajsathe
      @udayrajsathe  Год назад

      We have to create multilpe steps for multiple stop points. Its much easier now with Interactive components.

  • @ishaartworks
    @ishaartworks 3 года назад

    Amazing 🤩
    i just signed up for protopie's i year trial using college id. Should i first start prototyping in figma or directly using protopie..what's your opinion. Is figma enough for intermediate level animations?

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      Not all projects require ProtoPie Features. It’s a great tool though and my favourite one for creating High Fidelity Prototyping.
      You can start learning it once you’re comfortable with Figma Prototyping techniques. You can create fairly decent animations within Figma.

    • @ishaartworks
      @ishaartworks 3 года назад

      @@udayrajsathe Thankyou 😄

  • @iba8164
    @iba8164 2 года назад

    Hello Udayraj
    Thks for the video. I am new to Figma. Can I have the first minute of the video in slower steps.

    • @udayrajsathe
      @udayrajsathe  2 года назад

      I can try explaining. Ping me on Linkedin or Insta. Would love to help.

  • @mateusbistene
    @mateusbistene 2 года назад

    Great job, Man! Is there any way to simulate a filter that generates one tag that coresponds to each criteria I eventually choose in the filter? Like, If choose "movies" in a filter with many criterias, and one of them is the option "movies" or "series", so a tag "movies" is created and so on. Another thing, is there a way to show these tags acording to the same order as I filter them while I use the filter?

    • @udayrajsathe
      @udayrajsathe  2 года назад +1

      Possible but we need to create tons of interactions / screens. Figma doesn't have conditional logic yet.

    • @mateusbistene
      @mateusbistene 2 года назад

      ​@@udayrajsathe that's what i figured, there's no easy way to do that, thanks for replying

  • @-katrina
    @-katrina 2 года назад

    This is great - but how do I use this component on another frame? If I wanted to add this to a form, how do I do that?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      We can convert this into an interactive component. Then you can easily use that multiple times in any frame.

  • @Unknown-uy2hh
    @Unknown-uy2hh 2 года назад

    dude this doesnt work for multiple counters in a page....it works only for one counter if u have five counters it doesnt work simultenoulsy ......it works on by one ......until and unless the first counter ends u cant interact with the second counter......please telll me some solutions.

    • @udayrajsathe
      @udayrajsathe  2 года назад

      The solution is to create Interactive component for this counter. Then you can add multiple counters on page and interact with them simultaneously 😊
      Interactive component update wasn’t available when I recorded this tutorial.
      Feel free to ping me on LinkedIn or Insta if you need more help

  • @ClareClark
    @ClareClark 2 года назад

    I don't have the option to use clip content, and you go really fast, but I am getting somewhere haha maybe Figma has updated since this tutorial

    • @udayrajsathe
      @udayrajsathe  2 года назад

      Connect with me on Instagram or LinkedIn. Would love to help. I’m sure it’s a easy fix

  • @sanjuranjit6783
    @sanjuranjit6783 3 года назад

    I like your counter & slider animation video. So can you show me an another tutorial regarding input typing field in Figma.... Please help me ...

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Real input typing is crazy hard and time consuming. This might help > www.figma.com/community/file/949319444934680661/Functional-Input-Field-%7C-Interactive-Components-Demo

  • @Angry_Cat00
    @Angry_Cat00 3 года назад

    Thank you Bro, kerp doing.
    I wanna Add score to Game App in Figma prototype
    Like when I answer correct get point, when make wrong answer decrease score.any idea?

    • @udayrajsathe
      @udayrajsathe  3 года назад

      I think for conditional logic like this, you need to use ProtoPie along with Figma.

    • @Angry_Cat00
      @Angry_Cat00 3 года назад

      @@udayrajsathe thank you bro I will try .all respect

  • @massimosanguedolce7614
    @massimosanguedolce7614 2 года назад

    Thanks for your video 🤩
    Is there any way to integrate this slidebar in a overlay?

    • @udayrajsathe
      @udayrajsathe  2 года назад

      I typically create Interactive component and use that in design.

  • @alenachuyankova
    @alenachuyankova 2 года назад

    Thank you!!!

  • @SyncAndPost
    @SyncAndPost 2 года назад

    How to you make the slider to stop at a certain number? Say 4 or 7

    • @udayrajsathe
      @udayrajsathe  Год назад +1

      We have to repeat the process and create multiple frames with 4 & 7. Much easier now with Interactive components.

  • @jasmineroblox-si1sw
    @jasmineroblox-si1sw 3 года назад

    Hey! this video was helpful could you plz make a video on change cursor style in preview mode in figma as now its showing big circle with semi transparent bg.

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Didn't get you 🤔 can you please elaborate?

  • @srinivasteja
    @srinivasteja 4 года назад +1

    Hey! this was a great video
    could you make one long video or series of videos on complex animations that can be achieved using just figma?

    • @udayrajsathe
      @udayrajsathe  4 года назад

      I have 10 Dribble shots that I'm planning to recreate. The tutorial is planned for Coming Tuesday ✌
      Feel free to share more examples 😃

  • @awantikabajpai1072
    @awantikabajpai1072 2 года назад

    how to make image carousel effect and how to add audio in figma

    • @udayrajsathe
      @udayrajsathe  2 года назад

      You can create Image Carousel using interactive components now. Check out my tutorial on the same.
      To add Audio, we need to rely on third party apps like Protopie.

  • @hilenzega4194
    @hilenzega4194 2 года назад

    Thanks!! :)

  • @alexahong
    @alexahong 2 года назад

    thank you so much

  • @farhanrizkir7582
    @farhanrizkir7582 2 года назад

    thanks!

  • @ohotnik7864
    @ohotnik7864 2 года назад

    thank

  • @bohdanshvaikovskyy9312
    @bohdanshvaikovskyy9312 3 года назад

    Thanks Bro 👌😀

  • @alanbiju4714
    @alanbiju4714 4 года назад

    Bro do u have any idea to get resource for symbols and icon for easy use

    • @udayrajsathe
      @udayrajsathe  4 года назад +2

      For icons I use figma plug-in called 'Iconify' which gives you all free/open sourced icon libraries.
      I use unblast.com occasionally for Graphical icons, mockups, illustrations & fonts.

  • @ramazanguler6066
    @ramazanguler6066 3 года назад

    Very good animation

  • @donhalo2157
    @donhalo2157 3 года назад

    Maybe nice to add the shortcut buttons you use. It's kind of confusing to watch your video, pause it, search for things in Figma, rewatch parts of your video and so on. That would be extremely helpfull

    • @udayrajsathe
      @udayrajsathe  3 года назад

      That’s a great suggestion. I’m searching for a software to do that 😊

  • @tamaratravels44
    @tamaratravels44 3 года назад

    when I clip the content, my numbers are still visible, what am I doing wrong?

    • @udayrajsathe
      @udayrajsathe  3 года назад +1

      It might be due problem with layers. Can you share a screenshot of your layers on my Instagram/LinkedIn?

    • @tamaratravels44
      @tamaratravels44 3 года назад

      @@udayrajsathe you're so nice - thank you, sent, my name is Tamara

    • @hanishkeangelo1251
      @hanishkeangelo1251 3 года назад

      @@tamaratravels44 Did you get the answer for that I'm really want to know how to hide these other number can you share your answer please

  • @nithishnitiz5891
    @nithishnitiz5891 4 года назад

    Thank You

  • @tynnka_sya8831
    @tynnka_sya8831 3 года назад

    why i cant add Swap with to frame

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Swap works with overlays. Make sure you’re using it on Overlay. Let me know if you still face this issue

  • @alexamatobi3769
    @alexamatobi3769 3 года назад +6

    you are too fast in your video tutorial, starter like us cannot easily understand. thanks alot for the video

    • @udayrajsathe
      @udayrajsathe  3 года назад

      Hi Alex, sorry to hear that. I'll slow down Little bit next time. I hope content is Helpful to you 🤞