No video :(

How to Design an Interactive Loaders in Figma | Beginners Tutorial

Подписаться 49 тыс.

Просмотров 3,2 тыс.

50% 1

🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 FREE Figma UI Kit Download → designxstream....
🔗 Join our design community here → bit.ly/DX-Comm...
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/SubToDe... 😅
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-Comm...
↪︎ 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

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

15 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@bbadaone2985 11 месяцев назад

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

@DesignXstream 11 месяцев назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9UbNxKVy3eE.html or you can use other plugin to convert your animation to gif: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hRd0rPbU8-o.html These above videos might help you!

@updates4043 9 месяцев назад

Awesome. Looks clean.

@DesignXstream 9 месяцев назад

Thank you! Cheers! ✌🏼 :)

@airfold 11 месяцев назад

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

@DesignXstream 10 месяцев назад

Glad you like them! cheers ✌🏼

@your_designergirl 4 месяца назад

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

@DesignXstream 4 месяца назад

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

@dotpenji 10 месяцев назад

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 10 месяцев назад

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

@abigailcayetano487 10 месяцев назад

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 10 месяцев назад

@@abigailcayetano487 Cheers! ✌🏼

@markanthonymanayan2136 10 месяцев назад

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

@DesignXstream 10 месяцев назад

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

@silverflowerhohocham3711 6 месяцев назад

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 5 месяцев назад

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 5 месяцев назад

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

@DesignXstream 4 месяца назад

@@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 4 месяца назад

@@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 2 месяца назад

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

@lissyjoy3424 11 месяцев назад

Awesome video

@DesignXstream 11 месяцев назад

🤩😁

@maheshbiruduganti1718 10 месяцев назад

Great explanation thanks man

@DesignXstream 10 месяцев назад

Glad you liked it man 😉

@ahmedyahya3593 10 месяцев назад

Keep up the good work

@DesignXstream 10 месяцев назад

Cheers ✌🏼

@ahmedyahya3593 10 месяцев назад

Love it

@DesignXstream 10 месяцев назад

thanks buddy!

@riyaa.0608 10 месяцев назад

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 10 месяцев назад

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

@riyaa.0608 10 месяцев назад

@@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 10 месяцев назад

@@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!