How to Design an Interactive Loaders in Figma | Beginners Tutorial
HTML-код
- Опубликовано: 6 июл 2024
- 🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 FREE Figma UI Kit Download → designxstream.gumroad.com/l/D...
🔗 Join our design community here → bit.ly/DX-Community
Join me in this beginner-friendly tutorial on How to create an interactive Loader or Spinner component in Figma. We'll start from scratch, so even if you're a beginner in Figma, you'll be able to follow along easily.
New to Figma? Then I recommend you start with this video first: • Figma for Beginners | ...
#Figma #InteractiveTabs #FigmaUIKitSeries
⏱️Timestamps:
0:00 - Intro
0:38 - Component Demo
1:24 - Getting Started
4:32 - Creating Components & Variants
5:20 - Adding Interactions
7:28 - Adding Other Variants
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
You have some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ WhatsApp - bit.ly/DX-Community
↪︎ Instagram - / designxstream
↪︎ Twitter - / designxstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: How to Design an Interactive Loaders in Figma, Figma for beginners, Interactive Loaders design, Step-by-step Figma component guide, Creating figma interactive components, Figma Navigation Loaders tutorial, Beginner's guide to Figma components, Making interactive Loading Indicators Figma interactive elements, Figma component tutorial, Figma component tutorial for beginners, How to create Loaders in Figma, Understanding interactive component design in Figma
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Music Video)](http://i.ytimg.com/vi/eJoMuypbSzQ/mqdefault.jpg)
Awesome. Looks clean.
Thank you! Cheers! ✌🏼 :)
Love your simple explanation in the videos man. Keep it up!
Glad you like them! cheers ✌🏼
Great explanation thanks man
Glad you liked it man 😉
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?
Yes, I've made a whole playlist on creating these interactive UI kit from scratch. Would recommend this playlist for beginners!
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!
@@abigailcayetano487 Cheers! ✌🏼
This Figma tutorial on designing interactive loaders is so helpful for beginners. Thanks for sharing these valuable insights!
@@markanthonymanayan2136 I'm glad you found it helpful! Cheers ✌🏼
How do I export the finished loading motion? What file format do you send motion made by pygma to the developer? Gif? Json?
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: ruclips.net/video/9UbNxKVy3eE/видео.html
or you can use other plugin to convert your animation to gif: ruclips.net/video/hRd0rPbU8-o/видео.html
These above videos might help you!
Love it
thanks buddy!
Hi, after importing the default loader to another frame, the overflow is bringing No scrolling, pls what could the problem be?
Can you elaborate... what does it have to do with scrolling?
Keep up the good work
Cheers ✌🏼
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
Can you elaborate more? or tell an example.
Do you want to know how to enable scrolling for long screens?
@@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?
@@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!
Awesome video
🤩😁
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?
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.
even iam facing same problem, did you find any solution pls help
@@nikitapotdar8749 Make sure you are rotating the circle in steps of 90% if you rotate it all the way 360 it will not work.
@@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
@@nikitapotdar8749 try to rotate the group inside of the variant instead of rotating variant