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
Let’s see what we’re aiming for here. This image is taken from www.apple.com and shows the rings in context:
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.
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 circumference 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%.
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:
Here’s what we created:
Thanks for following along, I hope this quick UI exercise taught you a couple of new Sketch tricks.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post