This is a follow-up to my previous post on Loading Animation in Adobe XD. I managed to recreate the exact same animation in Figma.

Instead of using seven states as in Adobe XD, I created a single component to achieve this animation without relying on Artboards (frames in Figma). The key difference in Figma is the ability to animate objects within a component, and multiple components can be used within a single Frame, unlike Adobe XD, where only transitions between Artboards are possible. In Figma, you can animate individual components or multiple components within a Frame, in addition to transitions between Artboards.

In this Figma component, I created eight variants, each with different properties of the basic shape, similar to what we did in Adobe XD. Each variant has unique position, scale, opacity, and rotation properties, analogous to XD states. An additional variant is used to adjust and match the timing between the last state of the animation and the initial state.

I've demonstrated how to transition animation properties between variants in the video. Take a look! Share

What are your thoughts on this animation? Any suggestions for improvement? Feel free to ask questions – I'm always down to learn and collaborate!