Figma: How To Design a Loading Spinner?

Figma is one of the most popular design tools these days. But how can you design advanced loading bars using the “Smart-Animate” feature?

If you read my previous article about “Figma”, I explained how you can recreate some advanced micro-interactions for your projects using Figma and “Figmotion” plugin. But let’s forget the plugins and use only the native features of Figma.

In this article, I will re-create the most useful loading bar that you may see as a UI designer. If you promise me that I will get more views for this article and share it with others, I will teach you the tricks to recreate more advanced animations next time :)

A surprise is waiting for you! You must read the article to the end. If you use InVision Studio, please read this article to recreate the loading spinner.

1- Android: Loading Animation

For android devices, the default animation that you usually see is very easy. As you are already familiar with my approach, I will explain how this animation works. To help you to get the idea behind this animation, I will create a simplified version of the animation first.

Analyze:
We have two animations (Maybe three animations). The first one is related to the semi-circles which appear and the second one is related to the loading bar which rotates. After it starts rotate, the semi circles will be hidden.

1- Semi-Circles Appear!

For start let’s recreate the semi-circles. we have a full circle ◯ which contains two semi-circles ◡ and ◠. When you put these semi-circles together, you have a full circle (First animation). Learn this section very well because we will re-use the techniques for the third part of this animation.

A: Press “O” or add a circle with these Dimensions: W: 200 px / H: 200 px.
B: Use the below “.gif” to apply some changes (If you can’t see the border size or rotate options below the dimensions panel, try to click on the small white circle):

Stroke Size: 50% — Just to help you to understand how it works. When you understand the example, change it to 70%.

We use this one as the base which is going to rotate as our parent circle. So change its name to “Parent” circle.

C: For this circle which is the parent for the semi-circles, you must create two semi-circles. Follow the below “.gif”:

I changed the colour of semi-circles to red to help you to understand the example better. The reason that I deleted some layers is “I wanted to have — the shape of the layer, for example, if it’s a semi-circle or its a full circle it must be obvious on the layer list — on the layer panel”.

D: Let’s edit the name of the semi-circles:
Left One → Left — Semi-Circle
Right One → Right — Semi-Circle

Also, change the colour of the parent — circle to #00000 20%

It must be something like this :)

ATTENTION! this one is not an extra step but it’s needed to help how my trick works. So, Just see how it works by focusing on the below “.gif”:

For each semi-circle, I used the same semi-circle which masks that semi-circle until it rotates and be where it should. The Right one appears first and then, the left one appears.

E: Duplicate each semi-circle and follow the below “.gif”:

Each semi-circle has its parent which masks the semi-circle and if we rotate the semi-circle, the semi-circle won’t be visible.

F: Now you learnt the technique, you just need to hide the semi-circles for the first frame:

Rotate the right semi-circle: -90% and left one: 90%

G: Duplicate the first frame and then, rotate the right semi-circle as the below “.gif” to create the Second Frame. Then, duplicate the second frame and rotate the left semi-circle as the below “.gif” to create the third frame:

Rotate the semi-circles based on how you expect them to appear. Don’t forget to not rotating the parent semi-circle

H: Connect the frames to each other and let’s complete the first part (Don’t forget to select “Smart Animate” instead of “Instant”:

There is 1 ms delay between each animation (Frame 1 → Frame 2 and Frame 2 → Frame 3) but each animation takes 150 ms to be completed.

I: Let’s check the result of your hard-working:

Something doesn’t work very well! the left semi-circle rotates “clockwise” but we want it rotates counterclockwise. Since I was drunk when I was writing this article but I think it’s a problem that Figma needs to address it!

J: You think I would leave you with this problem alone? Let’s push the limits! To fix this issue, just rotate the left semi-circle of the third frame for a few hundredth degrees:

Now Figma understands it rotates counter-clockwise. Instead of -90 dg, use -90.03 dg.

L: Let’s try again if it works now or not!

it works :)

2- Parent Circle Rotates!

This section is easier than the previous one! It only has two steps:

A: Create a group from the layers:

Change the name of the groups to “Rotate”. Be careful! Figma uses the name of the layers to find the difference for each layer (or group). So use the same name for all frames.

B: Rotate the group:

First Artboard: Group 0% — Second Artboard: Group 80% — Third Artboard: Group 160%

C: Check the result:

I reduced the speed of the “.gif” to help you to understand how it works.

3- The Semi-Circles Disappear!

When the semi-circles appear completely, now it’s time to hide them again. Until now we had 3 pages:

First: Placeholder / Second: Left Semi-circle appears / Third: Right Semi-circle appears

OK! Now, we must reverse this process.

Fourth: Right Semi-circle moves to the previous place of the left semi-circle / Fifth: Left Semi-circle moves to the previous place of the Right semi-circle

A: Let’s do it together! Before we start, let’s remove the rotate option from 1–3 artboards. Why? Because it makes me frustrated :)

Let’s forget what we did to rotate the groups!

B: This one is the easiest step to achieve the animation.
Duplicate the third frame / Rotate the Right semi-circle: -90.05 dg (As I explained before, Figma sometimes makes a mistake about how to rotate elements — Clockwise or Counterclockwise )

C: Let’s complete this animation together!
Duplicate the fourth frame / Rotate the left semi-circle: 89.9 dg

I tried to explain the idea behind this animation in a simple way! To make the animation smoother, I decided to triple the number of artboards. Since you got the idea, you can understand how the animation works but to help you more, I explained it very well on Figma :)

Duplicate the file (To view the prototype, click on the “Play” button and then press “A” on your keyboard):

Download: Easy One

Download: Real One

I worked very hard to complete this article for you! Please share it with your friends and let me know what you think about this trick :)

Now, you’re here, please read my previous articles:

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — — PORTFOLIO: emportfolio.webflow.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store