Create a watch face with Watch Face Studio

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

Figure 1. The main Watch Face Studio screen.

Tools

WFS includes the following tools:

• Add Component: opens a list of components you can add to your watch face.
• Forward and Backward: move a selected component to the front or to the back.
• Group and Ungroup: group multiple components together so they can be controlled as one component or ungroup a group of components.
• Mask: covers all or part of the other layers based on the shape outline of the bottom layer.
• Build: opens the build dialog.
• Run on Device: opens a dialog to preview the watch face on a device.

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 an app.

Component types

Supported components are described in the following sections.

Watch face canvas

Set a canvas color for the bottom layer of the watch face:

Text

Text fields hold 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.

Select the Apply Curved-Text option to create text that curves with the watch face:

Determine the curve of your text by setting the Width (W) and Height (H). Changing W and H automatically changes the dimension of your text component. To determine the position of your text, select one of the range presets. Additional ranges can be created by specifying Start and Angular distance. Set the direction of your text to either clockwise (CW) or counter-clockwise (CCW).

Shape

Add various shapes, including ellipses and rectangles.

Image

Import custom images.

Animation

Import image sequences for animation, as described in the following steps.

1. Create an 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 the images, removing images, or adding images.

5. Set the Trigger value to determine when you want your animation to play.

   Set the trigger value to WatchFace on to start your animation as soon as the watch face is shown. Other options include Tap, Every Sec, Every Min, and Every Hour. You can also delay the start by using Delay and entering a number of seconds.

Additional options for animations include the following:

• Auto replay: immediately repeats the animation upon completion until an interruption, such as turning the screen off, occurs.
• Repeat delay: sets a delay between iterations of the repeated animation.
• Resume Playback: determines whether to resume the animation or start from the beginning when play is stopped because of an interruption, such as receiving a notification or a phone call.
• Hide before playing: determines whether to hide the animation until play is triggered.
• Hide after finished: determines whether to hide the animation when play is completed.

Multimedia

Import already animated images, such as AGIF, Lottie, or WEBP files.

Add a multimedia image as described in the following steps:

1. Click Add Component > Multimedia.
2. Select the file from your file browser, and then click Upload.
3. Set the Trigger Value to the start time of the animation.

Keep in mind that the file size, resolution, and frame number of the multimedia image can affect device performance and battery consumption. Multimedia images are loaded asynchronously during operation and might have a delay when playing depending on the capabilities of the user's watch and various characteristics of the image.

Analog hands

Add analog clock hands for hours, minutes, and seconds:

Open the file browser to select an image file to import for each hand.

Analog clock hands have a Rotation property. This property includes the following options:

• Sync with
• Time Zone
• Rotate
• Value
• Movement Effect

Sync With has the following options:

• Hour in Day
• Minute in Hour
• Second in Minute
• Day of Month
• Month of Year
• Day of Week
• Day of Year
• Moon Phase

The Second in Minute option only works with the Sweep movement effect. This effect is set automatically when you add the second hand component:

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.

Progress bar

Add a progress bar to your watch face to track various activities. Options for the progress bar component include a linear and circular progress bar. Determine the position of your progress bar by selecting one of six range presets. Additional ranges can be created by specifying Start and Angular distance. Set the direction of the progress bar to either clockwise or counter-clockwise.

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 sections.

Add components

Add a component using the + button:

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.

Group or ungroup components

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

Mask or unmask components

When you use a mask group, the shape of the bottom-most layer determines the visible area of the mask group. The layers above it appear only through the shape outline of the bottom layer.

For example, if you place a triangle image in the bottom layer and an image and an animation in the layers above it, the image and animation appear only through the triangle outline of the bottom layer.

To create a mask group, do the following:

1. Select the layers you want to group.
2. Choose Mask from the hot key area or right-click the layers and select Mask.

To release the mask group in the layers window, do the following:

1. Select the mask group.
2. Choose Unmask from the hot key area or right-click the layers and select Unmask.

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 and resize, arrange, and rotate them.

Layer window

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

Within the layer window, the following actions are available:

• Search: search for layers by name.
• Show/Hide: show or hide layers. 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.

Right-clicking layers displays the following menu options:

• Lock/Unlock: locks the layer so that it doesn't move on the canvas.
• Group/Ungroup: groups multiple components together so they can be controlled as one component or ungroups a group of components.
• Mask/Unmask: covers all or part of the other layers based on the shape outline of the bottom layer or removes the layer from a mask group.
• Swap image: moves the image file from one layer to another. Only shown for images.
• Layer color: adds a color label to the layer to differentiate between layers.

Conditional lines

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

When you add a component, the time condition is set by default. To adjust these conditions, click the condition icon on the desired layer. To set your conditional to repeat, right-click the frame area and select Loop.

Keep in mind that layers that aren't displayed don't reduce performance or affect battery life.

You can set your watch face to respond to the time, step count, battery status, or an event, as described in the following sections.

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 after a set time. 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 2 and 3 to set time periods for each of the layers.
5. Click Run to preview your changes.

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, do the following:

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

Time control

The time control slider lets you see your watch face in action. Use this to preview how your watch face changes throughout the day. Drag the slider to specific times or view your watch face animations by using the play and fast-forward buttons.

Step count

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

Battery

You can design your watch face to change dynamically according to the watch's available percentage of battery life.

Event

You can design your watch face to change dynamically according to the device state, such as low battery or unread notifications. To do so, select the desired event and the image or animation you want to display during that event.

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.

Action panel

The action panel within the properties window enables interaction with your watch face. For example, you can let the user tap a component to change images, open different apps, or measure heart rate.

Style

Use the style tab to change the style of the selected layer. You can add styles for images, multimedia images, index, and hands components. You can add up to 30 theme colors and 10 images.

Use the Customization Editor to apply custom styles to components.

In the Customization Editor dialog, you can customize the style of each component, layer, and name. You can also reorder or merge styles in this dialog.

You can add up to 30 theme colors to the Style tab. Each theme color can have up to three color variations.

Set these colors in the Layer or Properties tab. In the Layer tab, set the color by toggling the Apply Theme Color icon up to three times:

In the Properties tab, set the color by selecting the Apply Theme Color radio button:

Color

Apply a specified color to your component or save a theme color for the watch face. For complications, the initial color theme is grayscale.

Image appearance

Modify an image's appearance using the following controls:

• Hue: controls the tone of the color.
• Saturate: makes the image color more or less vivid.
• Lightness: causes the image colors to be lighter.

Text appearance

Use the Text appearance tab to set text alignment and font style. Decorate the text by selecting Add Bitmap Font in Project Settings. If you want to use the default font size among the bitmap fonts added to the project, select Apply Default Font Size.

Run

You can run your watch face within WFS in the Run panel. You can adjust the time, date, device battery level, user step count, user heart rate, or gyro values within WFS to test how your watch face looks in different circumstances. You can also adjust any other styles set in the Customization Editor, including the number of unread notifications, tag expressions, or conditional lines. The Run preview can be set to active or to always-on. When using always-on, WFS shows the Current-On Pixel Ratio value and Analyze button.

Test your watch face on a device using Run on device.

For more details, see Test your watch face.