What is Shimmer Loading and How To Do It in Figma?

Why Should We Use Loading Screen?

Every product that runs on an electronic device needs a “loading” screen.

The loading time can vary based on factors like internet speed and how many windows the user has open at the time.

If we don’t choose the right “loading” screen, the user might think their screen is frozen, the app has a bug, or that it’s just a “lazy” application.

What is Shimmer Loading

Shimmer loading (or lazy load) is a cool animation trick often used when a web page or app is loading. It holds a part of the data in place with a moving animation until everything is loaded. This helps users know that the page is still loading and doing its thing.

Advantages of Shimmer Loading:

1. 🚀 Enhances User Experience: Through animations, users can shift their focus away from the speed of the page loading and continue waiting.
2. 💨 Boosts Performance: If you’re using shimmer UI, there’s no need to load the entire page all at once. Fast data comes in. This way, when the user sees the whole page, it doesn’t feel unfamiliar to the product.
3. ✅ Most Importantly: When users see a loading screen with shimmer, they probably think it’s their internet being slow, not the product. Since we started using products that need the internet, everyone has experienced internet connection problems. The use of the “Locus of Control” concept in advertising over the years is a major reason why users feel this way in this case.

Internal locus of control is simply when a person thinks the focus of what happens to them is in themselves. The sales world often uses this negatively. An example we’ve all heard in life is the “user fault” situation.

Now, I will show you the simplest and quickest way to implement shimmer loading in Figma.

You need to subscribe first. You can quickly enter with your e-mail address.

• ⬆️ Step 1: First, open Plugins in Figma and type “LottieFiles” in the search field.

Other options are also available. But clichés are genius. The common one is always safer.

• ⬆️ Step 2: Then choose one of the results.

You can change the color of the effect to make it more suitable for your application.

• ⬆️ Step 3: Click “insert as gif” and follow the steps.

You can also use the shortcut “Option-Command-C”.

• ⬆️ Step 4: Right click on the gif and click “copy properties”

Duplicate your page first.

• ⬆️ Step 5: Now choose which elements on the page you want to shimmer. I selected all the images. Then click “paste properties”.

• ⬆️ Step 6: Go to the “prototype” section in Figma and create a flow between two screens. Then, input the values mentioned above.

You can reduce the on-screen time as much as you want.

That’s all! 🥂

Shimmer Loading is a more modern and fun version of the ‘loading’ screen in your product. It familiarizes the user with your design and prevents surprises. Most importantly, it’s the best way to ensure that the user doesn’t feel any slowdown caused by performance issues.

Now, we can switch from fancy and complicated animations to shiny loading screens. ✨