Creating a Google Page Loading Animation with Figma: A Step-by-Step Guide

Page Loading animations have an important space in web design for better UX and to make users understand about the progression of loading the content. The way a Google loading animation appears seemed to be very reliable in conveying the fact that all is well with your browser. This blog post provides a step-by-step procedure on how to create Google inspired web page loader animation in Figma.

The importance of good loading animations on a Webpage

These animations are not just to make the site seem more responsive but also provide users feedback that something is being loaded and their request has been taken into consideration. In certain cases well-designed loading animation can even reduce waiting perception of user and help to build a good first impression for website or app.

Getting Started with Figma

Looking similar to those offered by advanced animation softwares like After Effects CC, Figma brings a whole new level of sophistication into the world with its powerful features and easy-to-use interface. Simply Make sure to have Figma installed and set up before going through the process of animating anything.

Step 1: Setting Up the Canvas

First open figma and you will create new file

Adjust the canvas size to your desired proportions (which is normally equal or not too different from most of web pages/apps);

Step trick 2: loading Animation Style

Then choose the Ellipse tool from toolbar and create a circle on canvas. Its the loading animation base that we are going to create.

Change the size and color of circle to represent Google loading animation style. Google usually has a loading animation that consists of four colored dots enclosed in a circle.

Copy the circle to make dots until they are perfectly placed around center of viewport.

Organize the circles into clusters that can be manipulated with ease.

Step 3: Adding Animations

Once you have selected the grouped circles, navigate to prototype tab on right panel.

Select the circle that will be our first dot in a sequence of animations.

Now an arrow will appear, just click and drag it to the circle which is going to be used as a second dot.

Change animation settings like type of animation to be performed (i.e., Smart Animate), how long the transition will last and ease curve.

Repeat them, which will link every 2 dots resulting in a continuous seamless looping-animations.

Step 4: Test and Refine

Feel free to experiment with loader on Figma, all you have to do is use the Preview option and adjust either timing, space or visual effect_REUSEloading animation

Keep trying until you get a version that works as best for your needs.

Step 5: Save Animation

Once you have achieved the desired results for your loading animation, it could be exported as a GIF or video file to install in any place of your website app.

Go to the File menubar and select Export Format from there.

Conclusion

Using the Figma design tool, it is easy to leverage Google-inspired page load animation onto your website or application for a better user experience with some impressive animations. With the detailed steps above, you can style a CSS loading animation that is able to keep users engaged while waiting for your content. Happy designing!

Our Ui Kit :

I hope you guys like it!

UI Mockup kit

If you have any query contact us – ITO Digital Agency