Тёмный
No video :(

How To Create Loading Spinner In Figma 

Product Meow
Подписаться 1,4 тыс.
Просмотров 33 тыс.
50% 1

Step by step guide to create an animated loader.
The animated loader is made up of two sets of components - (1) Spinner, and (2) Loading Text
For each component sets, we use after delay (with smart animation) to make the spinner spin continuously and make the dots in the loading text to gradually reveal from 0 dot, 1 dot, 2 dots, 3 dots and back to 0 dot and so on.

Опубликовано:

 

15 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 90   
@dianejibbs7914
@dianejibbs7914 Год назад
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.
@productmeow
@productmeow Год назад
Great tip!
@REVERBURN
@REVERBURN Год назад
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.
@productmeow
@productmeow Год назад
🙌🙌
@ARK2022
@ARK2022 Год назад
Still it halts for micro sec. It doesn't seem smooth
@AkmalAlFaizalMS
@AkmalAlFaizalMS Год назад
still didn't work why?:(
@rachelboxes
@rachelboxes Год назад
THANK YOU!!
@xiaotianlu2842
@xiaotianlu2842 Год назад
saved my life. thank you!
@Strawberrypiecream
@Strawberrypiecream 2 года назад
Great video! The key is to rotate the vector inside the variants, not the variants themselves.
@productmeow
@productmeow 2 года назад
Yes ! That’s the secret sauce 🤭
@xlinqmedia
@xlinqmedia Год назад
Ur comment gave me the insight that make the component works, thank u
@tochidioka6019
@tochidioka6019 Год назад
What!!!! i thought I had problem with my Figma!!!! Thank you for this tip!
@veronicaauyeung
@veronicaauyeung Год назад
thanks for this! fixed my file!
@lucio8527
@lucio8527 9 месяцев назад
THANK YOU SO MUCH, I've been trying for hours to find what was the issue.
@lordasiedu9270
@lordasiedu9270 Год назад
A gem... Upon all the videos i have watched so far, yours is easy to follow along.. Thank you so much
@productmeow
@productmeow Год назад
Thank youu for watching ~ happy learning :)
@xlinqmedia
@xlinqmedia Год назад
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 Год назад
Thanks for the kinds word. Will keep this in mind for future videos 🙏
@sherrimoss20
@sherrimoss20 Год назад
what is the secret??? I cannot figure this out and I have spent hours on this!
@baturesolomon4687
@baturesolomon4687 Год назад
Hello great video could you please help as my spinner is not rotating
@pujadhakan2400
@pujadhakan2400 Год назад
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
@bensonkehinde2788
@bensonkehinde2788 Год назад
Best Spinner video ever🥳
@productmeow
@productmeow Год назад
🤗🤗🤗
@ubi-wan-kenobi
@ubi-wan-kenobi Год назад
Thanks a bunch,just did it now and it worked!!!
@productmeow
@productmeow Год назад
Glad it helped !
@bradolcott
@bradolcott Год назад
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 Год назад
You’ll need to create a frame on the canvas and place an instance of your component inside it
@piotrgorski1945
@piotrgorski1945 Год назад
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.
@SolomFoz
@SolomFoz 2 года назад
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 года назад
@@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 года назад
@@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
@elianbogado2243
@elianbogado2243 Год назад
Thanks for the video! It really helped me
@productmeow
@productmeow Год назад
Glad it helps :)
@SelinaOgbebor-lb3sx
@SelinaOgbebor-lb3sx 4 месяца назад
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 4 месяца назад
Watch this tutorial: Figma Loading Spinner - 2024 UPDATED ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iHXqpRwj6tk.html I created an updated tutorial on this - with more clarity and emphasis on areas where learners typically implemented incorrectly.
@musfirahnadeem2105
@musfirahnadeem2105 Год назад
The arc is missing for me. I don't know what to do
@chinedumonyeanula1069
@chinedumonyeanula1069 Год назад
I didn't work but I tried it on different frame without creating a variant it worked
@productmeow
@productmeow Год назад
Glad it all worked out in the end :)
@daydreamer1179
@daydreamer1179 Год назад
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 Год назад
Make sure you are rotating the ellipse and not the component. To target the ellipse, double click on the component to reach it.
@hoangnghi7516
@hoangnghi7516 2 года назад
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.
@hunthai4458
@hunthai4458 Год назад
It's really pretty cool But idk not work for me, I did exactly like the video
@productmeow
@productmeow Год назад
Which part is not working for you ?
@cozzijor
@cozzijor 8 месяцев назад
It doesnt work. Made rotation on the ellipse but just dont move ;/(
@productmeow
@productmeow 8 месяцев назад
Figma Loading Spinner - 2024 UPDATED ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iHXqpRwj6tk.html Watch this most updated video on how to create loading spinner
@dayyanahfurnie681
@dayyanahfurnie681 Год назад
Hi there. Im trying to this with a 3D object but for some reason it does not play when in demo preview.
@productmeow
@productmeow Год назад
Able to demonstrate the issue you’re facing via a video walkthrough? Can try to help from there
@dayyanahfurnie681
@dayyanahfurnie681 Год назад
@@productmeow that would be amazing could I possibly email you to plan?
@biranmisadim
@biranmisadim Год назад
ayy müthişsin!!!!!!!
@AlguienllamadoYi
@AlguienllamadoYi Год назад
it doesn't work for me ;(
@protocol4313
@protocol4313 Год назад
i follewed the steps, the progressbar is not loading
@andy6515
@andy6515 Год назад
it's bc the clip content box is checked
@productmeow
@productmeow 5 месяцев назад
Figma Loading Spinner - 2024 UPDATED ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iHXqpRwj6tk.html You’ll find this video helpful :)
@smitasharda6211
@smitasharda6211 Год назад
nope, didn't work for me too.
@productmeow
@productmeow Год назад
Which part is not working for you ?
@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 года назад
Thank you very much!
@productmeow
@productmeow 2 года назад
Glad it all worked out for you !
@ninjahattorianddoraemon
@ninjahattorianddoraemon Год назад
Does not work for me either, I followed the video.
@Dachinzzz
@Dachinzzz Год назад
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 Год назад
Which part is not working for you?
@ninjahattorianddoraemon
@ninjahattorianddoraemon Год назад
@@Dachinzzz thank you
@fourseasonswithnoreason26
@fourseasonswithnoreason26 Год назад
sadly wont work for me :(
@productmeow
@productmeow Год назад
Which part didnt work for you ?
@CDRClarisse
@CDRClarisse Год назад
I give up. It doesn't work.
@productmeow
@productmeow Год назад
Which part is not working for you ? Perhaps I can help
@victorjuwe7879
@victorjuwe7879 Год назад
so sad it didn't work bro
@productmeow
@productmeow Год назад
Which part is not working for you ?
@gonzalomenendez54
@gonzalomenendez54 Год назад
@@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 Год назад
Not spin
@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 года назад
Make sure the rotation was done on the ellipse and not on the entire component
@mooma3032
@mooma3032 2 года назад
Thanks! It helps a lot!!
@productmeow
@productmeow 2 года назад
Glad it helps !
Далее
Create an Animated Loading Wheel Component in Figma
8:47
Creating Lottie animations in Figma
6:45
Просмотров 35 тыс.
How To Create Scrollbar Animation On Figma
11:49
Просмотров 24 тыс.
Design Better Than 99% of UI Designers
14:52
Просмотров 196 тыс.
Figma Smart Animate for Beginners (2022 Tutorial)
9:51