In this project, we’ll be making a loading animation. Adding loading animations can help your prototype look more realistic. If you follow along step-by-step, your final prototype will look like this:
To achieve this design, we’ll do the following:
- Create a frame and four ellipses
- Duplicate the frame and rotate the ellipses
- Duplicate the second frame and resize the ellipses
- Add prototype connections
- Create a component set
- Add an instance to a new frame
Create a frame and four ellipses
To start, select the Frame tool in the toolbar or press F and click on the canvas to add a frame with 100 x 100 dimensions. Double-click the frame name and rename it to “loading/1”.
We’ll make the animation pop by making the background dark. Select the frame and change the color to
#000000 using the Fill setting in the right sidebar.
Now, let’s add four ellipses to the frame.
- From the Shape tools dropdown in the toolbar, select Ellipse or press O.
- In the loading/1 frame, hold Shift and then click and drag your cursor to create a 24 x 24 ellipse.
- Duplicate the ellipse and place it on the right side of the original ellipse. Use the red guides to help with the alignment.
- Repeat the steps until you have four ellipses in the frame. Place your ellipses in the top-left, top-right, bottom-left, and bottom-right corners respectively.
- Select the loading/1 frame and navigate to the Selection colors section in the right sidebar. Update the
We want to make sure the ellipses are equally distributed both horizontally and vertically, as well as center-aligned to the frame. We can do this with Smart selection.
- Hold Shift and click each ellipse to select all four at once.
- Pink handles will appear when you hover over the selection, indicating a Smart selection has been created.
Tip: If you don’t see pink handles, use the Tidy up tool to rearrange the ellipses and create a Smart selection.
- Click and drag the pink handles to set the vertical and horizontal spacing between ellipses to 24.
- Click and drag the selection to snap the ellipses to the center of the frame using the red alignment guides.
Duplicate the frame and rotate the ellipses
Now, let’s create a second frame by duplicating the current frame.
- Select the loading/1 frame and use the duplicate shortcut to create a copy.
- Rename the new frame to loading/2.
- Select loading/2, and press Enter to select all nested layers. In this case, all four ellipses will be selected.
- Hover your mouse near the object’s corner until the rotate icon appears.
- Hold Shift on your keyboard, then click and drag clockwise to rotate the ellipse's positions by -90 degrees. You can check the rotation amount in the right sidebar using the Angle input field.
Duplicate the second frame and resize the ellipses
Let’s create the final frame that will tie it all together.
- Duplicate the loading/2 frame.
- Rename the new frame to loading/3.
- Select loading/3, and press Enter to select all ellipses.
- Update the size of the ellipses to 60 W and 60 H using the settings in the right sidebar.
- Use the Align horizontal centers and the Align vertical centers settings in the alignment controls panel to center all four ellipses.
- With all four ellipses still selected, drag to place them in the center of the frame.
Add prototype connections
Now that the setup is complete, we’ll add prototype connections to get our loading animation moving.
- Click the Prototype tab on the right sidebar.
- Select the loading/1 frame, then hover over the edge of the frame until you see the blue plus sign.
- Click and drag the connection to the loading/2 frame. This opens the Interaction details modal.
- From the dropdown menu, set the trigger to After delay and set the duration to
- Set the action to Navigate to and the destination to loading/2.
- Set the prototype animation to Smart animate.
- From the animation type dropdown menu, select Custom bezier and set the duration to
- In the Bézier curve input field, enter
0.5, -0.1, 0.5, 1.1.
Nice! Now we can connect the remaining frames.
- Click and drag a prototype connection from loading/2 to loading/3.
- Set the trigger to After delay and duration to
100ms. Figma remembers the previous prototype animation settings, so you don’t have to set up the animation from scratch again.
- Create a prototype connection from loading/3 back to loading/1 to make a looped animation.
- Set the trigger to After delay and duration to
Now it’s time to see our animation in action. Click the flow starting point button next loading/1 frame to open inline preview.
Looks wonderful! With just a few frames, shapes, and prototype connections, we created a loading animation. If you’re interested in using this animation on multiple pages, keep reading to learn how to turn it into a reusable component set.
Create a component set
The loading animation looks great! But having to recreate it every time you want to use it would be a pain. Luckily, we can create a component set so you can reuse the animation again and again.
- Hold Shift on your keyboard and select all three frames.
- From the toolbar, open the Create component dropdown menu.
- Select Create component set.
Because our frames were named loading/1, loading/2, and loading/3, they are automatically turned into a component set called “loading” with three variants called “1”, “2”, and “3”. If we weren’t consistent with our naming, the component set would simply be called “Component 1”.
Let’s remove the background fill on the variants so they can be used over other designs.
- Hold Shift on your keyboard, and then click on each variant to select all three.
- Click the minus button under Fill in the right sidebar.
Add an instance to a new frame
Now that we have a component set, we can add an instance of it to a new frame.
- Click the Frame icon from the toolbar, or press F.
- From the Design tab in the right sidebar, select the iPhone 14 Pro preset size.
- Update the fill to
- Select the 1 variant.
- Hold ⌥ Option (Mac) or Alt (Windows) and drag the variant to create an instance. Place the instance in the center of the frame.
- Click the Present button in the toolbar to test it out.
Congratulations! You’ve created a loading animation with just a few frames. If you’re looking for another challenge, try making some tweaks to the animation, adding other frames and colors like this one below.
If you’re interested to learn how to create the podcast card design or the loading animation, check out the following mini projects: