Quick Tip: Recreate Apple Watch’s Activity Rings in Sketch

In this video I’ll explain how to recreate, using Sketch, the activity rings you’ll find on the Apple Watch. This is the perfect exercise for demonstrating how much Sketch loves math; you’ll be surprised how much Sketch will calculate for you. Let’s get active!

Watch Quick Tip

Activity Rings

Let’s see what we’re aiming for here. This image is taken from www.apple.com and shows the rings in context:

1. Artboard

Start with an artboard of 512px square; there’s a preset for that.

Add a background color of pure black (#000000) then add a circle object of 300px to the centre. This circle won’t have a fill, but give it a nice colorful stroke of 25px.

2. Rings

Duplicate the first ring, then resize it by subtracting 52px from its width. You can do this by literally entering 300-52 in the size field and Sketch will do the calculation for you. 

Align it centrally with the first ring.

Recolor it, then repeat the process for a third ring.

Group the three rings and name the group something like “back”. Duplicate the group and name it something like “front”. We’re going to work on the front group for now, so you can hide the one at the back.

3. Dash it all

To give our rings a “progress bar” effect we’re going to use a stroke dash. Sketch has a trick for this: we’ll ask it to calculate the exact diameter of the circle by multiplying the width (300px) by pi π. Enter the calculation 300*3.14159265359 in the Gap input of the Borders dialog and the circle will effectively disappear. This is because the gap between its stroke dashes covers the entire diameter of the circle. By notching up the Dash measurement we’ll see our circle start to reappear.

With that done, again in the Borders dialog, round off the ends of the stroke:

Lastly, go to Layer > Transform > Flip Vertical to flip the ring around so it starts at zero degrees.

4. Bring Back Back

With the circles done, make the “back” group visible once again, and hit 1 to reduce its opacity to 10%.

5. Icons

All that remains to be done is to add icons to the ends of the strokes. Make a new artboard of 16px, and create whatever kinds of icons you need. I created some simple arrow icons, but you could even grab some suitable icons from GraphicRiver:

You’re Done!

Here’s what we created:

Thanks for following along, I hope this quick UI exercise taught you a couple of new Sketch tricks.

Similar Tutorials

• Affinity Designer
  Create a Fitness App Design in Affinity Designer
  Tom Koszyk
• Sketch
  Designing an iOS Fitness Application with Apple Watch Compatibility
  Daniel Korpai