Create a watch face with Watch Face Studio

The following guide describes the main tools and windows included in Watch Face Studio (WFS).

create-watchface

Tools

WFS includes the following tools:

  • Add Component: Opens a list of components you can add to your watch face.
  • Forward / Backward: Moves a selected component to the front or to the back.
  • Group/Ungroup: Group multiple components together, and control them as one component.
  • Build: Opens the build dialog.
  • Run on device: Opens a dialog to preview your watch face on a device.

hotkeys

Components

Add as many different components as you would like to your watch face. You can also use a customized design source for your components. For example, display heart rate or step count data with a Text component, or add a custom image to launch a particular app.

Component types

Supported components are described in the following sections.

Text

Text fields are normal text by default. Normal text is static and doesn't change. In the properties window for your text field, you can change the text field from normal text to data text. Data text changes and is populated based on tags.

For more information see Tag expressions.

Shape

Add various shapes, including ellipses and rectangles.

Image

WFS supports importing custom images.

Animation

Import image sequences for animation.

Add an animation as described in the following steps:

  1. Create your own animation sequence with a design program, such as Adobe Flash or Adobe Premiere.
  2. Click Add Component > Animation to add animation files to your watch face.
  3. Select a sequence of images from your file browser, then click Upload.
  4. Edit the animation by changing the order of each image, removing images, or adding images.

animation

Analog hands

Add analog clock hands for hour, minute and second. Open the file browser to select an image file to import for each hand.

analog-hands

Digital clock

Options for the digital clock include Date and Time. When adding the Date, add a text component with the Date tag. The default display for Dates is DAY_WEEK_S MON_S DAY_1_31_Z. When adding the Time, add a text component with a digital clock tag. The default display for digital time is HOUR_1_12_Z:MIN_Z:SEC_Z.

digital-clock

Progress bar

Add a progress bar to your watch face to track various activities. Options for the progress bar component includes a linear and circular progress bar.

Component management

Manage your components using the WFS tools. You can add, group, ungroup, and order components on your watch face, as described in the following section.

Add components

When you add a component it is placed in a default position on the canvas. The component is automatically selected so you can easily modify it.

preview-window

Group/Ungroup components

A group is a combination of one or more components. All components can be grouped. Groups can be ungrouped.

group

Preview window

The preview window is your main working area when designing your watch face.

Add all watch face elements to the canvas shown in the preview window. On the canvas, drag elements into position, resize, arrange, and rotate them.

preview-window

Layer window

The layer window displays the list of components and groups shown in the preview window. Each component has it’s own layer by default.

layer

Within the layer window, the following actions are available:

  • Search: Search for layers by name.
  • Show / Hide: Layers can be shown or hidden. Hidden layers aren't displayed in the preview window.
  • Theme color: Toggle your theme colors on or off.
  • Rename: Change the layer name by double clicking the name field and entering a new name.

Conditional lines

Use conditional lines to change the appearance of your watch face in response to certain conditions, such as the time, step count, or battery. Conditional lines let you show and hide components on a watch face and control their behavior.

conditionals conditionals

You can set your watch face to respond to the following conditions:

Time

Your watch face can change dynamically based on time intervals. For example, your watch face can be bright during the day then gradually darken as time passes. You can set the time to be measured in hours, minutes, or seconds.

Add a time condition using the following steps:

  1. Create layers.
  2. Set time periods to control when each layer is displayed. Select the starting bar then select the time range.
  3. Click and drag from the start bar to the end bar.
  4. Repeat steps two and three to set time periods for each of the layers.
  5. Click Run to preview your changes.

The following example shows you how to display different watch faces for a 12 hour setting and a 24 hour setting, based on the chosen setting on the user’s phone:

  1. Add two digital clock components. The first component displays the first 12 hours, the second displays the 24 hour version.
  2. Place them in the same position.
  3. Add a 12 hour and 24 hour condition to the conditional lines.
  4. Set time periods to show the first digital clock for the 12-hour layer in the 12-hour format, and show the other layer in the 24-hour format.

Time control

The Time Control slider allows you to see your watch face in action. Use this to preview how your watch face will change in the preview window throughout the day. Use the slider to drag to specific times, or view your watch face animations by using the play & fast-forward buttons.

time-control

Step count

You can design your watch face to change dynamically according to step count. For example, you can create a watch face that changes based on the percentage of daily steps achieved.

Properties window

Each component has a range of modifiable properties. For example, you can change the color of the numbers on a digital clock, or choose whether the watch hands measure hours, minutes, or seconds.

properties

Style

Use the style tab to change styles of the selected layer. You can add styles for images, index, and hands components.

style

Run

You can also run your watch face within WFS in the Run panel. The Run preview can be set to Active or to Always-on. When using Always-on, the Current-On Pixel Ratio value and Analyze button are also shown

run run-always-on

Test your watch face using Run on device.

For more details, see Test your watch face.