Loading animation using Figma

Hey Folks,
I am working on one some project . In the they need something like the loading icon as same as . I am checking we can create this in Figma using the components?

wavy

Please share your thoughts

1 Like

As far as I know it’s not yet possible since Figma smart animate doesn’t support animations on paths and anchor points. Even if you replicate these shapes on Figma it will simply do a fade transition between them, no motion at all. Maybe your best bet is to export it as a gif or something and have your devs implement as the loading icon. Or you could animate it on after effects and export as a lottie file. Hope it helps!

What you can do is build a state page within the path of your prototype (like you might have done with Invision before Figma had all these features) where you mock this loading animation experience using a GIF of the animation. In the prototype interactions, apply a link from the loading page state using ‘after delay’ instead of ‘on click’. It’ll be fairly ‘path’ dependent on where it goes so you probably only need a single instance to illustrate the intent. glhf!