How To Create Loading Spinner In Figma

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

КОМЕНТАРІ • 90

  • @REVERBURN
    @REVERBURN 2 роки тому +23

    if it didn't work with you : You might want to check that the rotation is done on the elipse and not on the component itself.

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

    Thank you so much. I encountered some issues initially but it finally worked. Here's some tip; When rotating, rotate the eclipse and not the component.

  • @Strawberrypiecream
    @Strawberrypiecream 2 роки тому +20

    Great video! The key is to rotate the vector inside the variants, not the variants themselves.

    • @productmeow
      @productmeow  2 роки тому +4

      Yes ! That’s the secret sauce 🤭

    • @xlinqmedia
      @xlinqmedia 2 роки тому +2

      Ur comment gave me the insight that make the component works, thank u

    • @tochidioka6019
      @tochidioka6019 2 роки тому +1

      What!!!! i thought I had problem with my Figma!!!! Thank you for this tip!

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

      thanks for this! fixed my file!

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

      THANK YOU SO MUCH, I've been trying for hours to find what was the issue.

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

    Hello great video could you please help as my spinner is not rotating

  • @lordasiedu9270
    @lordasiedu9270 2 роки тому +1

    A gem... Upon all the videos i have watched so far, yours is easy to follow along.. Thank you so much

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

      Thank youu for watching ~ happy learning :)

  • @xlinqmedia
    @xlinqmedia 2 роки тому +2

    Ur tutorial makes the design effortless, its super easy, but u hid a secret and it took me time to get it right.
    Pls, put begginers like me into consideration, make all the details bear
    Thanks

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

      Thanks for the kinds word. Will keep this in mind for future videos 🙏

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

      what is the secret??? I cannot figure this out and I have spent hours on this!

  • @bradolcott
    @bradolcott 2 роки тому +2

    Thanks for this tutorial, Product Meow. Can you help demystify the blue notification I see when trying to play a frame with my loading animation prototype in it? It says "A prototype with connections needs a top level frame as the origin." Thank you.

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

      You’ll need to create a frame on the canvas and place an instance of your component inside it

  • @SolomFoz
    @SolomFoz 2 роки тому +4

    Hello. I want to clarify that I've tried it and it didn't work. I tried to change the angle of the color itself by 90 degrees every time and it worked. I think there is something to do with their latest figma update where the shape rotations don't work or something.

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

      make sure the different variations of your ellipses have the same name. Also, check that you are using Rotation which is directly below the Width.

    • @SolomFoz
      @SolomFoz 2 роки тому +4

      @@productmeow Hello. thank you for your reply and thank you for the video. I have found that the problem was in rotating the variant itself, not the Elipse. I've experimented both and found out that when you rotate the variant it doesn't work. cheers.

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

      @@SolomFoz Glad everything works out for you :) Keep experimenting ! 🔥

    • @yazeedirshaid
      @yazeedirshaid 2 роки тому +1

      @@SolomFoz iI had the same issue. Instead of rotating them, I just change where the angular graduation start from and now it works!

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

      @@yazeedirshaidI had the same issue too after creating 3 different times and almost gave up, even making the name the same still did not work .... until I followed the changing of angular graduation, and voila it worked ..thanks

  • @SelinaOgbebor-lb3sx
    @SelinaOgbebor-lb3sx 8 місяців тому

    Can someone pls help me with the prototyping of variant 2 to variant 3?. The arrow is not bending according to the what's in the video

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

      Watch this tutorial:
      Figma Loading Spinner - 2024 UPDATED
      ua-cam.com/video/iHXqpRwj6tk/v-deo.html
      I created an updated tutorial on this - with more clarity and emphasis on areas where learners typically implemented incorrectly.

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

    Hi there. Im trying to this with a 3D object but for some reason it does not play when in demo preview.

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

      Able to demonstrate the issue you’re facing via a video walkthrough? Can try to help from there

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

      @@productmeow that would be amazing could I possibly email you to plan?

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

    The arc is missing for me. I don't know what to do

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

    Best Spinner video ever🥳

  • @hoangnghi7516
    @hoangnghi7516 2 роки тому +1

    great prototype but my spinner can't rotate. I dont know what i mistake

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

      make sure the different variations of your ellipses have the same name. Also, check that you are using Rotation which is directly below the Width.

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

    Mine wasn't spinning either after following every step. Then I tried to press the letter r in my keyboard in the prototype and it worked! Hope this helps someone too :D

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

    Thanks for this video, but animation in interactive component looks like frame by frame animation, even though there's a smart animation. It works when you put the same spinner (not component) in frames and make interaction between them. Then looks great, but that's not the point creating multiple frames just for single animation, it should work as an interactive component.

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

    Does now work for me either, i did exactly same thing in the video, rotation is done on the elipse but it still not work, i don't know what is wrong with it, please help

    • @productmeow
      @productmeow  2 роки тому +1

      Make sure you are rotating the ellipse and not the component.
      To target the ellipse, double click on the component to reach it.

  • @ubi-wan-kenobi
    @ubi-wan-kenobi Рік тому

    Thanks a bunch,just did it now and it worked!!!

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

    i follewed the steps, the progressbar is not loading

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

      it's bc the clip content box is checked

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

      Figma Loading Spinner - 2024 UPDATED
      ua-cam.com/video/iHXqpRwj6tk/v-deo.html
      You’ll find this video helpful :)

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

    It doesnt work. Made rotation on the ellipse but just dont move ;/(

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

      Figma Loading Spinner - 2024 UPDATED
      ua-cam.com/video/iHXqpRwj6tk/v-deo.html
      Watch this most updated video on how to create loading spinner

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

    Thanks for the video! It really helped me

  • @eduobex
    @eduobex 2 роки тому +1

    I didn't work but I tried it on different frame without creating a variant it worked

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

      Glad it all worked out in the end :)

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

    I went through all the comments and it still doesn't work for me..

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

      Which part are you having difficulties with specifically ?

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

      @@productmeow In the spinner part, the prototype doesn't work..

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

      @@productmeow Ok I'm really sorry, I just checked in the browser and it works great. Before that I worked on Local FIGMA

    • @moransotto256
      @moransotto256 2 роки тому +1

      Thank you very much!

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

      Glad it all worked out for you !

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

    it doesn't work for me ;(

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

    Thanks! It helps a lot!!

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

    Does not work for me either, I followed the video.

    • @Dachinzzz
      @Dachinzzz 2 роки тому +2

      Try rotating the ellipse itself and not the component. Double click the ellipse to target the ellipse itself. Then rotate as you wish.

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

      Which part is not working for you?

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

      @@Dachinzzz thank you

  • @hunthai4458
    @hunthai4458 2 роки тому +2

    It's really pretty cool But idk not work for me, I did exactly like the video

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

      Which part is not working for you ?

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

    sadly wont work for me :(

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

      Which part didnt work for you ?

  • @smitasharda6211
    @smitasharda6211 2 роки тому +1

    nope, didn't work for me too.

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

      Which part is not working for you ?

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

    Not working

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

      Which part is not working for you ?

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

      @@productmeow while prototyping

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

      @@famjam954 which specific part of the spinner is not working for you?

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

      @@productmeow while preview it is not rotating

    • @productmeow
      @productmeow  2 роки тому +1

      Make sure the rotation was done on the ellipse and not on the entire component

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

    I give up. It doesn't work.

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

      Which part is not working for you ? Perhaps I can help

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

    ayy müthişsin!!!!!!!

  • @victorjuwe7879
    @victorjuwe7879 2 роки тому +1

    so sad it didn't work bro

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

      Which part is not working for you ?

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

      @@productmeow Same problem. When I go to the variants, they don't change at all. I have rotated manually but it didn't work.

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

    Not spin