Looping Animations in Figma

Using Figma's prototype interactions inside of a component you can create a looping animation. Useful for common, continuous animations like loading spinners. Here's how it works: after creating your component with a starting and ending variation, you set an interaction to change on each variation to "Change to" the next variation, with the last variation changing back to the first one, therein creating a loop.

For each interaction set the trigger to "After delay" and set the "Delay" value to 1ms. Set the "Animation" field to "Smart animate", and use whatever values for the "Curve" and "Duration" would be appropriate for the animation you are trying to achieve. In my Spinner I set each the "Curve" to "Linear" and the "Duration" to "249ms" for each interaction. That time was calculated by taking the end goal of a 1s animation loop, dividing by 4 for each step in the animation, and subtracting 1ms from each to compensate for the delay.

Some bonus thoughts in my thoughts:

• I have 4 steps in my animation because having only the start and end frames caused the blue part to rock back and forth on the top half instead of making a full loop.
• It would be better to have a delay of 0ms, but as of writing this Figma does not support having a value less than 1ms.
• If you want to have different possible animation options, like reversing the rotation or changing the speed, you can add more variations with a new prop like "Reverse" and create different interactions for those.