ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2023
- loading animations in Figma with our step-by-step guide! Watch as we showcase the mesmerizing Loading Spinner, elegant Loading Bar, and enchanting Loading Dots, all created using Figma's Interactive Components.
Elevate your design projects with these captivating loading effects. Perfect for web designers, app designers, UI/UX enthusiasts, and anyone looking to add that extra flair to their interfaces. Get inspired and level up your Figma skills today!
Don't forget to like and subscribe for more web design videos!
SUBSCRIBE to our channel: / dscodetech
More design tutorials:
✅ Cake App Design in Figma: • Cake Ordering Mobile A...
✅ Shoe App UI/UX Design in Figma: • UI/UX Design and Proto...
✅ Food Order Mobile App Design in Figma: • Food Ordering Mobile A...
✅ Ecommerce website UI/UX: • Amazing Ecommerce Webs...
Also, please share your thoughts and questions in the comments section below. I'm happy to help!
Say hi on social:
🔵 Facebook - bit.ly/36KsK8X
🟢 Instagram - bit.ly/3xGDbXR
--------------------------------------------------------------------------------
#loadinganimation #uidesign #webdesign #figmadesign #learnfigma #spinner #loadingbar - แนวปฏิบัติและการใช้ชีวิต
![หมานแต่ผัวเขา - แสตมป์ โตเกียวมิวสิค [ OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/m0g1TSBJPgo/mqdefault.jpg)
hey! for people who say the prototype doesn't work :)
I had the same problem, until I noticed that when creating variants, I was rotating the whole variants by 90 degrees, instead of what is in the inside of the variants - which is our circle :)
Thanks for sharing! Rotate what is inside the variant
I follow your solution and it's work! don't rotate whole variants rotating only 'group of circle'
omg thank youuu i was doing the exact same thing
i'm glad I could help 🥰
thank you brotherr
Amazing spinner, and loading bar. This video is helped me to create a loading spinner for my website. thank you for providing great content. I need more tutorials about web designing and app ui ux design 😁
You're welcome! Coming soon.
I did it very carefully like in the video, but my circle rotates not as smoothly as the video even though I set it to after delay and smart animate mode.
Sometimes it depends on the pc performance. try using figma app instead of website
my cirlce doesnt moves at all
Thanks, it helps me a lot. I completed the loading bar and it is working fine, but I want to export it as a svg. If I export it as a svg, the svg file does not have the animation, Can you please help me out?
Yeah the svg file doesn't contains the animation, you can animate the svg using css or use a figma plugin
HI! your video helpeed a lot, thanks :) but i want to ask something jajaj, the animation continues over and over again, and i want to end when it comes the next screen, how can i do that???
Great to hear that :) To do that you can simply add an interaction to the next screen from the last screen by prototyping, and then it'll disappear and go to the next screen
Not getting the linear option in progress bar while doing the prototype
Try refreshing the prototype, make sure to prototype as exactly as in the video
Apparently sometimes the animations in after diley fail, that's why maybe the animation doesn't show up in the first tests... I honestly don't know if it's a figma failure or it's my internet...
Maybe it depends on the Internet, try reopening Figma. Make sure to check the prototypes are correct as the tutorial.
It's doesn't work for me
Try rotating what's inside the variant, don't rotate the variant
i canit use the pngs form iconduck free anymoree....plz somebody tell me
You can use alternative free icon websites
HOW YOU GET THE STATUS BAR
......?
From our UI kit
I'm doing exactly the same as in the video but for me, the animation is not working
Download the free source file and give it a try again
Not working
Don't rotate the frame of the varient guys rotate the circle inside the varient.
i totally follow the intruction, but its doesnt work
Download the design file and give it another try
@@DSCodetech where do I download it from ? can't find it in the description
It's in the description, or check the pinned comment
can you help me Even if you do it 5 times, it won't work :(
Sure, what is your problem? Please follow the video instructions as it is. then you'll be able to make it
Don't rotate the frame of the varient guys rotate the circle inside the varient.
Don't rotate the frame of the varient guys rotate the circle inside the varient.
Correct!
you have to buy figma in order to make it work ortherwise it wont work in free figma version.
you can do it in figma free version
@@DSCodetech how? I tried it many time but it didn't work at all.?
Try downloading the source file in the description