No video :(

How to create Loading Animation in Figma Tutorial for Beginners

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

Просмотров 1,4 тыс.

50% 1

Quick Figma Loading Animation Tutorial | Figma Tutorial for beginners | UX Mate
In this video we will explore how to create a Quick Loading Animation in Figma. This Figma Tutorial is designed for Beginners who want to explore smart animate in Figma and learn how to create Loading Animations in Figma.
This Short Figma Animation Tutorial covers how to Create Animation loop in Figma and how to create circular loading animation. Create circular loading animation is bit tricky so make sure you follow the complete tutorial without skipping any part.
Video Chapters
0:35 How to create circle ready for Loading Animation in Figma?
3:00 How to create Component Variants in Figma?
3:45 Understand how to rotate circle in Figma Loading Animation.
4:50 Create Interactions for a looping loading animation in Figma.
#figma #figmatutorial #figmashorts #animation #figmaanimation #figmamotion #tutorial

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

5 апр 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@VardhanK-w8w День назад

Can we apply this For triangle

@ux_mate День назад

Yes! But it would be slightly different in case of triangles. I will make one video on this.

@muslihatkedua7422 2 месяца назад

can we apply this method to other object i mean lets say its not a circle but some curly line moving around the screen?

@ux_mate 2 месяца назад

For curvy lines please refer this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Lib7wGumcrI.html

@tahoorshaikh4886 3 месяца назад

Can you explain how did you drag the animation in the frame?

@ux_mate 3 месяца назад

You just need to hold Alt or Option button and move the 1st Variant of component in frame. Alternatively you may copy paste the same. 😊

@FerasALIShah 17 дней назад

Gooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

@FerasALIShah 17 дней назад

VVVVVV GooD

@ux_mate 17 дней назад

Thanks a lot! Be sure to check out other videos.

@neq.u2 3 месяца назад

When I rotate te cycle to the backgraund its doesn't work? Can you help me?

@ux_mate 3 месяца назад

Can you please let me know the timestamp of the video which you are referring to? To do smart animate here are few important things to make sure... 1. Make sure you are using same layer name accros all variants of the component. 2. Make sure you are changing properties of the same layer across. 3. Make sure your interaction is set to After Delay - Smart Animate. If you still need any help please drop me an mail on contact@uxmate.co.in

@neq.u2 3 месяца назад

@@ux_mate When I move one of the circles to the background, as it is in the video at one minute 5:38 , the animation turns off and does not work

@matheusnoronha8774 2 месяца назад

@@neq.u2 When selecting the variants to change the angles, select the component and rotate it within the variant. If you rotate the entire variant it won't work, you need to select the "anim" and rotate it.

@melodysays30 3 месяца назад

is your figma account paid??? cuz i followed all your steps till "After Delay' but after that the other options were not there..

@ux_mate 3 месяца назад

No! You don't need paid account for Smart Animate. Can you please tell me at what point of time you are facing the problem?

@melodysays30 3 месяца назад

@@ux_mate i got stuck after creating componenets and connecting the circles.. i have put after delay options everything along with the time stamps shown on the video but the animation does not get played

@melodysays30 3 месяца назад

@@ux_mate also do you have an email id .. i could send you screenshots where i got stuck at

@ux_mate 3 месяца назад

@@melodysays30 Make sure you create one component and have variants within it! Not multiple components. Also make sure to have same names for the objects in all variants. It should work properly. If you still facing issues please let me know we can schedule a quick call to resolve the issue. Thanks!

@ux_mate 3 месяца назад

I am extremely sorry I wasn't feeling well and was away for a week or so. I just checked your comment. You may reach out at contact@uxmate.co.in

@designwork-tb3qp 3 месяца назад

I did everything but the circle only rotates in the middle😢

@ux_mate 3 месяца назад

Please make sure you have defined rotation properly to the correct circle. It should be 0°, 90°, 180°, 270°.

@designwork-tb3qp 3 месяца назад

@@ux_mate The problem was that the speed was irregular, thank you 🫰

@ux_mate 3 месяца назад

Great! Lucky this was useful.

@matheusnoronha8774 2 месяца назад

When selecting the variants to change the angles, select the component and rotate it within the variant. If you rotate the entire variant it won't work, you need to select the "anim" and rotate it.