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.
  • Mask: A tool that allows you to cover up all or parts of the other layers based off of the shape outline of the bottommost layer.
  • 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.

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

Determine the curve of your text by setting 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 or counter-clockwise.

curved-text

Shape

Add various shapes, including ellipses and rectangles.

Image

WFS supports importing custom images.

Animation

Import image sequences for animation.

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

animation

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 may affect device performance and battery consumption. Multimedia images are loaded asynchronously during operation and may have a delay when playing depending on the capabilities of your watch, and various characteristics of the image.

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

Mask/Unmask components

The shape of the bottommost layer determines the visible area of the mask group. The layers above it appear only through the shape outline of the bottommost layer. For example, if you place a triangle image in the bottommost layer and an image and an animation in the layers above it, the image and animation will appear only through the triangle outline of the bottommost layer.

group

To create the 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, 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'td is played 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 on layers displays the following menu options:

  • Lock/Unlock: Locks the layer so that is doesn't move on the canvas.
  • Group/Ungroup: Groups multiple components together, and controls them as one.
  • Mask/Unmask: Makes layers above the bottommost layer appear only through the shape outline in the bottommost layer.
  • Swap image (only for images): Changes the image file in one layer to another.
  • 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 the time, step count, or battery. Right-click the frame area and select Loop to set your conditional to repeat.

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

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

Action panel

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

action-panel action-panel action-panel

Style

Use the style tab to change styles of the selected layer. You can add styles for images, index, and hands components. You can add up to 30 theme colors and 10 images. For example, you can add specific hour, minute, and second hand images as hand styles.

style style style

Select the "apply theme" icon to apply your theme colors and styles to the selected layer, as shown in the following image.

style

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 the image appearance using the following controls:

  • Hue: A slider that controls the tone of the color.
  • Saturate: A slider that makes the image color more or less vivid.
  • Lightness: A slider that 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 the checkbox Apply Default Font Size.

text-style

Run

You can also run your watch face within WFS in the Run panel. You can adjust the time, date, device battery, steps, heart rate, or GYRO values within WFS to test how your watch face looks in different circumstances. 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.