How to Design an Interactive Loaders in Figma | Beginners Tutorial

[@airfold]

Love your simple explanation in the videos man. Keep it up!

[@DesignXstream]

Glad you like them! cheers ✌🏼

[@dotpenji]

Great job explaining how to create these loaders in Framer X. It's really helpful for those looking to add engaging visual elements to their designs. I'm curious, do you have any other design tutorials or tips you'd recommend for creating dynamic and interactive user interfaces?

[@DesignXstream]

Yes, I've made a whole playlist on creating these interactive UI kit from scratch. Would recommend this playlist for beginners!

[@abigailcayetano487]

Absolutely, this tutorial was super helpful for understanding how to create engaging loaders. Thanks for sharing, @@DesignXstream ! I'll definitely check out your playlist on creating interactive UI kits from scratch. It sounds like a fantastic resource for beginners like me who are eager to enhance their design skills and create dynamic user interfaces. Keep up the great work!

[@DesignXstream]

@@abigailcayetano487 Cheers! ✌🏼

[@markanthonymanayan2136]

This Figma tutorial on designing interactive loaders is so helpful for beginners. Thanks for sharing these valuable insights!

[@DesignXstream]

@@markanthonymanayan2136 I'm glad you found it helpful! Cheers ✌🏼

[@updates4043]

Awesome. Looks clean.

[@DesignXstream]

Thank you! Cheers! ✌🏼 :)

[@bbadaone2985]

How do I export the finished loading motion? What file format do you send motion made by pygma to the developer? Gif? Json?

[@DesignXstream]

This is just for prototyping to showcase your designs. If your goal is to share these with devs then there are 2 ways: either use lottie files plugin and export it as a json file: kzbin.info/www/bejne/b4bFf6uBi95mm6c or you can use other plugin to convert your animation to gif: kzbin.info/www/bejne/noPHYaWGl7prY9E These above videos might help you!

[@your_designergirl]

Hi, after importing the default loader to another frame, the overflow is bringing No scrolling, pls what could the problem be?

[@DesignXstream]

Can you elaborate... what does it have to do with scrolling?

[@maheshbiruduganti1718]

Great explanation thanks man

[@DesignXstream]

Glad you liked it man 😉

[@silverflowerhohocham3711]

its not working for me, the circle is getting updated every 1millisecond, but its not rotating its getting updated as it is. meaning not moving in a round fashion. could you help me figure out what could be the issue?

[@DesignXstream]

Cannot tell the exact issue unless I see it. But possible factors could be that the circle name in the frames are different due to which the smart animate is breaking.

[@nikitapotdar8749]

even iam facing same problem, did you find any solution pls help

[@DesignXstream]

​@@nikitapotdar8749 Make sure you are rotating the circle in steps of 90% if you rotate it all the way 360 it will not work.

[@nikitapotdar8749]

@@DesignXstream Thanks for replying , i will work on it as instructed , also variant group element name is diff from component name.. I followed each step but still the problem is not getting solved

[@xueyintan9266]

@@nikitapotdar8749 try to rotate the group inside of the variant instead of rotating variant

[@ahmedyahya3593]

Keep up the good work

[@DesignXstream]

Cheers ✌🏼

[@lissyjoy3424]

Awesome video

[@DesignXstream]

🤩😁

[@ahmedyahya3593]

Love it

[@DesignXstream]

thanks buddy!

[@riyaa.0608]

Hey can you please make a video on long scroll mockup? I guess its paid to do that in figma but someone said to me use pen feature and i can't figure this out by myself

[@DesignXstream]

Can you elaborate more? or tell an example. Do you want to know how to enable scrolling for long screens?

[@riyaa.0608]

@@DesignXstream Okay so there's a mockup called long scroll mockup and a guy name called gusten showed on his Facebook group the tutorial of it but when I did tried it's not working I guess it's paid not sure i can share the video tutorial here if you want not sure youtube will allow it or not?

[@DesignXstream]

@@riyaa.0608 If you are looking to create device mockups I have a video on this! Else you can dm me on instagram @DesignXstream your exact query!