Create an Animated Loading Wheel Component in Figma

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

Просмотров 28 тыс.

50% 1

Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
In this Figma prototyping / component tutorial, we'll be taking a look at creating an animated, spinning loading wheel in Figma. This component enables you to use its instance in a prototype that will be automatically animated in an infinite loop, enabling you to create for example loading screens. This tutorial is good for beginners, easy to follow and explained step-by-step.
Topics: Loading wheel animation, figma animation, figma animated component, prototyping
---------
© 2022 Mavi Design

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

10 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@stonestone9001 Год назад

for those guys that cannot make it, looks at the video at 3:46, look closely. The author click at the variant first, then click at the esclipe and only rotate. If you just rotate the originally excplise after you add, it will unable to make the circle turn

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

It seems that is what is causing mine not to animate, let me redo it

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

Thank you so much!!!

@voa.aquino 10 месяцев назад

Thank you!

@curious_i_am 7 месяцев назад

It does. I figured our myself. same solution @@That1_Pilot

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

Thank you so much!

@daniel.dzhahani 20 дней назад

Great tutorial!

@aya_____7921 Год назад

GOD BLESS YOUR SOUL U AMAZING BEING

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

You saved my day❤

@princetripathi7949 Год назад

Thanks it was helpful.

@linkonsarkar7550 Год назад

work is done ...💚

@shreyasaha6193 Год назад

When i am trying to connect the last eclipse with the first one it is not allowing the after delay option. What to do

@BethesdaSkater Год назад

I've tried this tutorial and one other that takes the same approach, and for both I get no rotation, just the first variant sitting there. Do you know what might be going on with it?

@mavidesign Год назад

Make sure to rotate the ellipse and not the whole variant :)

@septedyindrajannah Год назад

@@mavidesign at first I also had the same problem but in this video I really understood the problem and now it's working for me, thanks for the tutorial ;)

@jenniewang8070 Год назад

I've followed every step and couldn't make it work. After doing some research I found out there is nothing wrong with my design, I just need to press "R" to enable presentation mode and it will show the animation. It might work for you as well.

@janoregon Год назад

same problem for me. have you managed to figure out what went wrong?

@janoregon Год назад

@@mavidesign I am 100% sure I rotated the ellipse, not the whole variant but my design doesn't rotate. any idea why this might have happened?

@EmmaMullineauxCEO Год назад

How do you get the dots on the circles to not move when you are connecting the prototype?

@guitarmixvids Год назад

Excellent Tutorial! Thank you.

@nazimrakin6766 Год назад

I just followed as like direction but sir its not working.....

@sastaasubscription6987 Год назад

Same bro

@batorshikhgombojav5215 Год назад

is it possible for export to svg or not ?

@raseenahmed-yj5nt 8 месяцев назад

how to download this as a gif

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

I followed your steps but its not working here, what am I not doing right?

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

To get personalized help and feedback on your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over RU-vid - thank you for your understanding! Mavi

@AsimAntuleVlogs Год назад

Awesome! Was trying this but wasn't getting this smooth animation. Thanks for your video. It really helped.

@mavidesign Год назад

Awesome! What was the problem preventing you from creating a smooth animation?

@malcolmxfisher Год назад

For some reason, my animation is super choppy as well. You can see the phase move from 1-4 when I play the animation. I tried to adjust the 500ms up and down to see if that'd affect it and moving it down helps slightly but it's still not as clean as Mavi's.

@luwi111 8 месяцев назад

@@mavidesign I had the same exact problem, but I managed to get a smooth transition after changing my interactions settings from ease out to linear. Hope this helps😇

@sastaasubscription6987 Год назад

Not working please help 😢 me

@lanella.design Месяц назад

Not working T_T

@stivenmorantjimenez2054 Год назад

How to download the animation as a gif?

@mavidesign Год назад

You can't export GIFs directly from Figma, a workaround is needed. You could for example record your screen when running the prototype (for example quicktime on mac) and then convert that into a gif:)

@Gloria0402 Год назад

Isn't working 🤬🤬🤬🤬🤬🤬🤬

@maheshshanbhag1402 Год назад

Please show us How to create heart rate monitor waves in figma

@talbenezra Год назад

I followed every step. But it doesn't animate. just sits there

@mavidesign Год назад

You either didn’t rotate the circle but the whole variant OR you need to press R to reset the prototype

@aidanwhytock Год назад

@@mavidesign Yup I'm in the same boat - I've definitely rotated the ellipses and clicking R in present mode also doesn't work - any other ideas? Muchas gracias!