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…
