Create an Animated Loading Wheel Component in Figma

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

КОМЕНТАРІ • 43

  • @stonestone9001
    @stonestone9001 Рік тому +12

    for those guys that cannot make it, looks at the video at 3:46, look closely. The author click at the variant first, then click at the esclipe and only rotate. If you just rotate the originally excplise after you add, it will unable to make the circle turn

    • @kellyumerah
      @kellyumerah Рік тому

      It seems that is what is causing mine not to animate, let me redo it

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

      Thank you so much!!!

    • @voa.aquino
      @voa.aquino 11 місяців тому

      Thank you!

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

      It does. I figured our myself. same solution
      @@That1_Pilot

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

      Thank you so much!

  • @daniel.dzhahani
    @daniel.dzhahani Місяць тому

    Great tutorial!

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

    You saved my day❤

  • @princetripathi7949
    @princetripathi7949 Рік тому

    Thanks it was helpful.

  • @linkonsarkar7550
    @linkonsarkar7550 Рік тому

    work is done ...💚

  • @aya_____7921
    @aya_____7921 Рік тому

    GOD BLESS YOUR SOUL U AMAZING BEING

  • @guitarmixvids
    @guitarmixvids Рік тому

    Excellent Tutorial! Thank you.

  • @EmmaMullineauxCEO
    @EmmaMullineauxCEO Рік тому

    How do you get the dots on the circles to not move when you are connecting the prototype?

  • @shreyasaha6193
    @shreyasaha6193 Рік тому

    When i am trying to connect the last eclipse with the first one it is not allowing the after delay option. What to do

  • @BethesdaSkater
    @BethesdaSkater Рік тому +7

    I've tried this tutorial and one other that takes the same approach, and for both I get no rotation, just the first variant sitting there. Do you know what might be going on with it?

    • @mavidesign
      @mavidesign  Рік тому +8

      Make sure to rotate the ellipse and not the whole variant :)

    • @septedyindrajannah
      @septedyindrajannah Рік тому

      @@mavidesign at first I also had the same problem but in this video I really understood the problem and now it's working for me, thanks for the tutorial ;)

    • @jenniewang8070
      @jenniewang8070 Рік тому +3

      I've followed every step and couldn't make it work. After doing some research I found out there is nothing wrong with my design, I just need to press "R" to enable presentation mode and it will show the animation. It might work for you as well.

    • @janoregon
      @janoregon Рік тому

      same problem for me. have you managed to figure out what went wrong?

    • @janoregon
      @janoregon Рік тому

      @@mavidesign I am 100% sure I rotated the ellipse, not the whole variant but my design doesn't rotate. any idea why this might have happened?

  • @batorshikhgombojav5215
    @batorshikhgombojav5215 Рік тому

    is it possible for export to svg or not ?

  • @raseenahmed-yj5nt
    @raseenahmed-yj5nt 9 місяців тому

    how to download this as a gif

  • @nazimrakin6766
    @nazimrakin6766 Рік тому +1

    I just followed as like direction but sir its not working.....

  • @pazhammedo
    @pazhammedo Рік тому

    I followed your steps but its not working here, what am I not doing right?

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

      To get personalized help and feedback on your project, please join my free Discord server.
      You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
      I'm unable to help everyone over UA-cam - thank you for your understanding!
      Mavi

  • @stivenmorantjimenez2054
    @stivenmorantjimenez2054 Рік тому

    How to download the animation as a gif?

    • @mavidesign
      @mavidesign  Рік тому +2

      You can't export GIFs directly from Figma, a workaround is needed. You could for example record your screen when running the prototype (for example quicktime on mac) and then convert that into a gif:)

  • @AsimAntuleVlogs
    @AsimAntuleVlogs 2 роки тому

    Awesome! Was trying this but wasn't getting this smooth animation. Thanks for your video. It really helped.

    • @mavidesign
      @mavidesign  2 роки тому

      Awesome! What was the problem preventing you from creating a smooth animation?

    • @malcolmxfisher
      @malcolmxfisher Рік тому

      For some reason, my animation is super choppy as well. You can see the phase move from 1-4 when I play the animation. I tried to adjust the 500ms up and down to see if that'd affect it and moving it down helps slightly but it's still not as clean as Mavi's.

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

      @@mavidesign I had the same exact problem, but I managed to get a smooth transition after changing my interactions settings from ease out to linear. Hope this helps😇

  • @maheshshanbhag1402
    @maheshshanbhag1402 2 роки тому

    Please show us How to create heart rate monitor waves in figma

  • @sastaasubscription6987
    @sastaasubscription6987 Рік тому

    Not working please help 😢 me

  • @lanella.design
    @lanella.design 2 місяці тому

    Not working T_T

  • @Gloria0402
    @Gloria0402 Рік тому +2

    Isn't working 🤬🤬🤬🤬🤬🤬🤬

  • @talbenezra
    @talbenezra Рік тому

    I followed every step. But it doesn't animate. just sits there

    • @mavidesign
      @mavidesign  Рік тому

      You either didn’t rotate the circle but the whole variant OR you need to press R to reset the prototype

    • @aidanwhytock
      @aidanwhytock Рік тому +1

      @@mavidesign Yup I'm in the same boat - I've definitely rotated the ellipses and clicking R in present mode also doesn't work - any other ideas? Muchas gracias!

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

    This shyte still aint working. Dimag ka bhosda ho gaya