Watch Faces

There still not a direct way for the end user to design their own Watch Faces, even though there are some small hacks to do that. Currently, as a developer you can only create specialized watch face and complications.

Specialized Watch Faces

Dawn Patrol to check surf conditions, Lummy for photography to help you track the sun position, Notable to see your upcoming appointments.

Complications

Complications are small interface elements that provide quick access to specific data from a particular App. You can create complications that can highlight some of the top features of your app. You will be able to add your App's complications to their watch faces. Complications should show important information that will help the user track or be informed about something specific like; weather, stocks, news and more.

Designing Complications

There are some points you need to consider when you are designing complications. You need to select the data that you would like to display. You can learn more about how to create complications from Apple's documentation.

Inspirations

Until the date this article was written, Apple has around 40 Watch Faces, from Mickey Mouse to Nike. You can find inspirations here to design you complications.

Customize Watch Face

Apple encourages more and more developers to create complications of their apps. Apple Watch is an excellent platform for any app. It takes some creativity to see how you can make a great Apple Watch Face using the complications from your App. Draw Patrol is a good and beautiful example of how you can use its complications in a Watch Face.

ClockKit

To understand how to design Complications, it is important to use the ClockKit framework. ClockKit will help you implement complications in Apple Watch. It organizes complications into groups based on size and styles.

Animation

You need to keep the animation short and with a specific purpose. You don’t have to use layout animations in your notification interface. Minimize the number of concurrent animations and try to make the animations optional. You can animate attributes like the height, the width, group insets, alignment, background color, tint color and opacity. There is a good tutorial from Apple that shows more about animation.

Hacking Apple Watch Faces

There are some cool tweets by Steve Troughton-Smith where he shares examples on how he customized Watch Faces. If you want to be hands on, you can use Lottie to create and animate your own Watch faces. There is a great article that shows a step by step process on how to accomplish that.

Further Reading

Marco Arment has an interesting post where he talks about the legibility of specific watch faces. PC Magazine has an article where they talk about creating Watch Faces. Finally, David Smith shares his thoughts about custom Watch Faces and also talks about his projects.

Create a watch face Animation

The goal of this exercise is to add an animation to an Apple Watch mockup so we can create a simple watch face. For this example, we will use Principle and Figma and then I will show you an alternative option using only Figma. Let's open the Figma file and you will notice an Apple Watch mockup. We need to import those assets to Principle.

Now, we are ready to import the assets from Figma to Principle. To do so, let's go to Principle and click on import on the tab bar. Select the Figma tab and click on Import Page. Then, drag and drop our mp4 file to Principle.

Make sure to align the animation regarding the Apple Watch screen and to place the mp4 layer over the background layer.

Alternate method using Figma

This is the second method through which you can create a quick prototype of an Apple Watch face directly in Figma. Let's open our Figma file and you will notice the Apple Watch mockup.

Next, drag and drop the GIF animation to the canvas. Then, add the GIF animation inside the Apple Watch mockup and make sure to put the GIF asset over the background layer.

Lastly, let's group some of the assets and the GIF animation and use the Apple watch mockup as a mask.

Conclusion

Watch Faces are a great way to personalize Apple Watch and it is fundamental for its user experience. Developers and designers can create specialized Watch Faces. They can take advantage of all the different Apple Watch capabilities and at the same time, combine complications with the default Apple Watch features.