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 :)
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.
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):
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”:
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%
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”:
E: Duplicate each semi-circle and follow the below “.gif”:
F: Now you learnt the technique, you just need to hide the semi-circles for the first frame:
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:
H: Connect the frames to each other and let’s complete the first part (Don’t forget to select “Smart Animate” instead of “Instant”:
I: Let’s check the result of your hard-working:
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:
L: Let’s try again if it works now or not!
2- Parent Circle Rotates!
This section is easier than the previous one! It only has two steps:
A: Create a group from the layers:
B: Rotate the group:
C: Check the result:
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 :)
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):
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: