How to make your own animated Ring in Figma for watchOS applications — part 2/3

Part 2: Creating your own Rings using Figma

In this section, we will make the images for the Rings. I decided to use Figma, because I believe that it is simple and intuitive platform to design (especially for who that never have experience).

So, let’s go! 😎

Create a new file in Figma and give the name as “Rings”.

NOTE: it is important to change the name of file as we gonna see in soon.

First, go to “Shape Tools” and select the “Ellipse” option.

Drag and drop the ellipse on the screen and change its width and height to 100.

Then, change the “Ratio” to 90% and your “corner ratio” to 6, as in the following GIF:

Copy and paste that same ring and change its color. I am using the color blue (0x0A84FF). 😁

Now name the gray ring as “base” and the new ring as “progress”. In the end, we will have the two rings like this:

Returning to the “base” ring, add “Effects” and select the “Inner Shadow” option.

With that, we will have a sense of depth that the standard Rings have visually.

Now, select the “progress” ring and rotate the element 90 degrees through the “Rotation” field.

In this way, we will have the ring start and end its loading at the top of the ring.

Now, place the “progress” ring on top of the “base” ring. Select the two rings and group them (you can also group them using the cmd + g command). Finally, name this group as “ring0”.

NOTE: as we will see soon, it is important to change the name of the group now, because it will make it easier when exporting images and implementing the code.

The progress of the ring will be given by the percentage of the “Sweep” by the ring “progress” as we can see.

So the idea is that “ring0” has a 0% sweep, “ring1” has a 1% sweep and so on until “ring100”. In this way, the ring will be loaded from 0 to 100 percent.

Now, we will do a job that requires a lot of patience and concentration: paste the “ring0” 100 times. Rename each ring created with “ring1”, “ring2” up to “ring100”. Then, select the “progress” ring (which is inside the “ringX”) and change your “sweep” with the X value for each ring created.

At the end of this great process, we will obtain the 101 rings needed to make the animation! 😬

To export these images to be included in the XCode, select all the rings. Add “Export” three times. At the end of that, we will have all the essential sizes for your watchOS application, without affecting the quality.

Stay tuned and fill the “Suffix” field according to the size. Click on the “Export Layers” button and we will get a zipped folder.

For now, just unzip it and you will see that we will all have assets from the ring! 😍

If you want, I will leave the images of the rings of this tutorial available here.

In the next section, we’ll see how to animate the Rings in XCode. See you soon!