A comprehensive workflow from design to device: Introducing Watch Face Designer

Posted by Anoushka Mazumdar – Product Manager, and Adam Soutar – Software Engineer

This post is part of Wear OS Spotlight Week. Today, we're exploring the wonderful world of watch faces.

Create simple no code watch faces or build complex ones quickly with this Figma plugin

We're thrilled to introduce Watch Face Designer, a new design tool that can empower everyone, from seasoned designers to passionate enthusiasts, to craft watch faces directly in Figma. This Figma plugin works seamlessly on devices running Wear OS 4 or higher. Say goodbye to complex coding and hello to seamless design!

Watch Face Designer is built from the ground up to integrate with the Watch Face Format for Wear OS. It's not only for designers looking to bring their visions to life without a single line of code; it's also a powerful tool for developers who want to rapidly prototype and mock up watch faces before diving into more intricate functionality, such as animations, in Android Studio.

A screenshot showing a recreation of the Concentric watch face alongside the Watch Face Designer UI

Design at the speed of thought with Watch Face Designer

This initial version of Watch Face Designer has plenty of features to kickstart your watch face design journey:

• Supports core Watch Face Format features: digital and analog time, interactive and ambient mode, custom fonts, complications, automatic theme creation from your Figma styles, and more.
• Intuitive plugin window: The plugin window provides a streamlined interface to preview your designs in real-time and effortlessly edit individual elements to support watch face functionality.
• Flexible export options: Once your design is complete, you can export your design in several ways:
• Direct to Play Store (recommended for designers): Publish your watch face directly to the Google Play Store.
• Export to Android Studio (recommended for developers) or Watch Face Studio: For developers or those seeking to add advanced functionality, seamlessly export your design to Android Studio or Watch Face Studio to build upon your foundation.
• View on device: See your watch face come to life on your actual Wear OS device for a true-to-life preview.

The Watch Face Designer UI displaying a list of export options

Get started today

Ready to start designing your next favorite watch face? Head over to the @androiddesign page on Figma's Community tab. There, you can easily install the Watch Face Designer plugin, explore sample watch faces, and discover handy complication templates. We've also included a comprehensive overview guide that walks you through the process, from concept to completion.

We can't wait to see the incredible watch faces you'll create with Watch Face Designer! Stay tuned for more updates and exciting new features coming soon.