This page explains more advanced use cases for Watch Face Designer, including how to add support for subdials, complications, and color themes. To learn more about getting started, view the basics guide.
Subdials
You can create analog watch hands that rotate within a subsection of the watch face, just like a subdial on a real wristwatch.
To do so, complete the following steps:
Create an empty frame that covers the area where you've placed the subdial in your design:
Figure 1: Empty frame covering a subdial slot Design your second hand inside of this frame:
Figure 2: Second hand design sitting in a containing frame Select the subdial frame that contains the second hand. Then, in the Watch Face Designer, set Rotate around to "Layer center:"
Figure 3: After selecting the containing frame (left), choose second hand rotation behavior (right)
Complications
To add a complication slot, add a frame to your watch face. Inside this frame, design what the complication slot will look like when it's empty. This forms the base design for the other types of complications, such as icons and text.
There are many different kinds of complications. Your watch face provides templates for each type, and the apps on a user's watch decide which template to use and which data to provide for themselves. The user chooses which app goes in which complication slot.
Select your frame containing the design for the complication slot. Then, in the Watch Face Designer, change Behavior to "Complication slot." This process creates a component, with one variant (an empty design).
Apply complication slot types
Because it's not that useful to include a complication slot that only supports the "empty" type, add another type. In the Watch Face Designer window, press + Support a new type and select "Short text." Short text is a complication type supported by most apps, which shows two small labels alongside an icon.
This step creates another variant for us to represent our design for this complication type. Select the "Short text" row to jump to it.
When editing layers inside a complication template, a "Behavior" option appears. This option is similar to the one on watch faces, but here you can select behaviors that are specific to the type of complication that you're editing.
For this example, layers inside a short text complication can either be your app's title, its text, or a single-color icon. Single-color means that the icon inherits the color that you set for it in Figma.
After you make a rectangle where you want your app's icon to appear on the watch face, navigate to the Watch Face Designer window and set Behavior to "Single-color icon:"
Next, create two text layers. These layers represent two more "short text" slots: one for the title and one for the text:
The preview shows how the complication is coming together. This example shows how a complication might look if the calendar app were assigned to this slot.
To show text in all-uppercase characters, as shown in the following image, use the text case feature in Figma's Typography menu.
Note that, unlike with digital time, there is no arbitrary font export for complication text. Complications are always drawn using the Wear OS device's system font, which can vary but is typically Roboto.
To add support for additional types of complications, or customize related settings like Default app or whether the slot appears when the watch is in ambient mode, select the complication slot within your watch face:
Color themes
Within your watch face, you can include multiple options for color themes. The user can then choose the theme that they want, using the watch face picker on their watch.
Watch Face Designer includes support for color themes using Figma styles.
Consider the case where, given the following watch face, you want to let the user customize the colors of the watch hands and dial:
Create the first style
To create a color style that's customizable on the watch, create a new style:
- Deselect everything on the canvas.
- In the right sidebar, next to Styles, select the + button.
You must name it in a specific way:
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
In this case, the sample watch face's name is Bauhaus, so the color starts
with that, followed by Hands, which is the element that users can customize.
Then, give a descriptive color name, such as Charcoal, and specify which
specific element – hour hand – should have its color changed.
Putting this all together, the final name is: Bauhaus/Hands/Charcoal/Hours:
Follow a similar process to create a custom color theme for the minute hand:
Finally, assign these colors to the actual hands that appear on the watch face:
Bauhaus/Hands/Charcoal/Minutes theme to the watch face's minute
handAdd another style
Create a new style by changing the Theme Name part of the style. The following
example adds a new style called Rust (Bauhaus/Hands/Rust/Hours):
The user can then switch between the "Charcoal" and "Rust" color themes on their device, and your watch face's hour and minute hands get recolored accordingly:
Apply to other elements
Follow similar steps to make other elements of our watch face themable. These themes can be mix-and-matched, and you can use any number of color styles to create complex swappable themes:
With the preceding set of styles, you've provided two options for the
hands—Rust and Charcoal—and three options for the dial—Light, Dark, and
Duotone:
