Figma: How To Design a Loading Spinner?

Em Design
6 min readApr 2, 2020

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…

--

--

Em Design

A passionate designer who designs digital experiences for mobile phones and websites. — — — — — — — — — — — — www.wearemoonlight.com