Getting Started

What is WatchMaker Studio?

WatchMaker Studio is a browser-based editor for creating custom watch faces for Apple Watch and Wear OS devices. Design with layers, expressions, and real-time preview — then publish to the WatchMaker community.

Creating Your First Watch Face

1. Open Studio — Navigate to Studio and click New Design
2. Choose a template — Pick from Blank, Analog, Digital, Active, Hybrid, or Oversized
3. Edit in the canvas — Your watch face appears in the center. Click layers to select and edit them
4. Add layers — Click the + button to open the Insert panel. Add text, images, shapes, and more
5. Preview — Use the Time Machine (bottom-left) to see your design at different times of day
6. Save — Your work auto-saves as a draft. Click Publish when you're ready to share

Understanding the Editor

Canvas

The central area shows your watch face. You can:

• Click a layer to select it
• Drag to reposition layers
• Zoom in/out with the zoom controls (top toolbar)
• Toggle grid overlay and snap-to-grid for precise alignment

Toolbar (Top)

• Undo / Redo — Cmd+Z / Cmd+Shift+Z
• Grid — Toggle grid overlay, snap, and grid size (5-200px)
• Zoom — Adjust from fit-to-screen up to 500%
• Compatibility — Check for platform-specific warnings

Layers Panel (Left)

Lists all layers in your watch face, ordered by z-index. Drag to reorder. Click the eye icon to toggle visibility.

Properties Panel (Right)

When a layer is selected, the properties panel shows all editable settings — position, size, color, text, rotation, opacity, and more.

Insert Panel

Click + to browse insertable elements organized into sections:

• Core Elements — Image, Text, Shape, SVG, Icon, and more
• Time & Date — Digital time, date, analog hands
• Gauges & Markers — Rings, progress bars, markers
• Complications — Steps, heart rate, weather, battery

Saving and Previewing

Your design saves automatically as a draft. Drafts are private until you publish.

Use the Time Machine at the bottom-left to test your design:

• Adjust the time slider to see how your watch face looks at different times
• Change playback speed (1x, 2x, 3x) to watch animations
• Pause time to fine-tune specific moments

Use the Preview Values panel to test dynamic data like step count, heart rate, and weather without a connected device.

Layers

Watch faces are built from layers stacked on top of each other. Each layer has a type, position, and properties you can customize.

Layer Types

Core Elements

Type	Description
Image	PNG or JPG image. Use for backgrounds, decorations, or custom graphics
Text	Dynamic or static text. Supports expressions like {dh23}:{dmz}
Shape	Circle or rectangle with fill color
SVG	Scalable vector graphic (Studio Pro)
Icon	Built-in icon library
Rounded Rectangle	Rectangle with configurable corner radius and styles
GIF	Animated GIF with configurable frame delay
Curved Text	Text that follows a curved path

Time & Analog

Type	Description
Hour Hand	Image/SVG that rotates with {drh} — the current hour
Minute Hand	Image/SVG that rotates with {drm} — the current minute
Second Hand	Image/SVG that rotates with {drss} — smooth second rotation
Digital Time	Text layer pre-filled with {dh23}:{dmz}
Date	Text layer pre-filled with {ddw}, {dnnn} {ddz}

Gauges & Markers

Type	Description
Markers	Evenly spaced dots or squares around the watch face
Hour/Minute Markers	Separate styles for hour and minute tick marks
Text Ring	Numbers or text arranged in a circle (e.g., 1-12 for clock face)
Ring	Arc/donut shape — great for progress indicators
Progress	Linear or arc progress bar

Complications

Type	Description
Step Count	Text showing {ssc} — current step count
Heart Rate	Text showing {shr} — current heart rate
Weather Icon	Conditional image grid that changes with weather
Weather Text	Text showing {wtd} — temperature with degree symbol
Battery Icon	Conditional image grid based on battery level
Moon Phase	Conditional image based on {wmp}

Adding Layers

1. Click the + button in the toolbar to open the Insert panel
2. Browse categories or search for a layer type
3. Click to add — the layer appears at the center of the canvas
4. Drag to position, then use the Properties panel to customize

Layer Ordering

Layers render from bottom to top. The first layer in the list is at the back; the last is at the front.

• Reorder by dragging layers in the Layers panel
• z-index property controls stacking order numerically

Visibility & Display Mode

Each layer has a display mode controlling when it appears:

Mode	Shows when
Bright + Dim	Always visible (default)
Bright only	Only when screen is active
Dim only	Only in ambient/always-on mode
Never	Hidden (useful for debugging)

Use Bright only for battery-intensive elements (animations, seconds hand) and Dim only for simplified ambient layouts.

Lock Layers

Lock a layer to prevent accidental selection or editing. Locked layers can't be clicked on the canvas. Toggle lock in the Layers panel or Properties.

Layer Grouping

Group related layers into collapsible folders so complex faces stay tidy. Move a group, hide a group, theme a group — everything inside follows.

Creating a group

1. In the layer panel, multi-select the layers you want grouped (Shift-click or Cmd-click).
2. Press Cmd+G to wrap them in a new group.
3. Click the group's name to rename it — pick something like Hands, Bezel, or Complication 1.

Working with groups

• Collapse / expand — click the chevron next to the group name. Collapse to hide the inner layers from the layer list and focus on the rest of the design.
• Move together — drag the group on the canvas and every child layer moves with it. Resize and rotate behave the same way.
• Hide together — toggle the eye icon on the group to hide every layer inside in one click.
• Reorder by drag — drag the group up or down in the layer panel to change z-order. Drag layers in or out of the group to reorganise.
• Ungroup — select the group and press Cmd+Shift+G to flatten it back to individual layers.
• Nest groups — groups can contain groups. Useful for complex compositions like a whole complication that contains sub-elements.

On mobile

The layer panel is a bottom sheet — tap the layers icon in the bottom toolbar to open it. There's no right-click, so every group action lives in the per-row ⋯ menu:

• Wrap in group — wrap the tapped layer in a new group.
• Move into group… — pick a target from the submenu to nest the layer inside an existing group.
• Move out of group — pop a layer back up to its grandparent (or root).
• Bring Forward / Send Backward / Move to Top / Move to Bottom — z-order changes.
• Duplicate and Delete round out the menu; Create Component… appears on group rows.

The sheet stays open after each action so you can stack several changes without reopening it. The eye icon respects the Active / AOD pill at the top of the editor — switch modes there before toggling visibility if you want different layers visible in always-on.

Tips

• Groups make Theme tinting cleaner — applying a theme to a group cascades to every child.
• Desktop has more room; mobile has the same functionality through the layer-tree ⋯ menu (see above).
• Groups are visual organisation only — they don't change rendering performance or export size.

---

Questions? Email [email protected]

Components

Components are reusable layer groups you can save, share, and drop into any watch face. Build a complication once, use it on every face you design.

What's in a component

Anything inside a group — text, images, gauges, rings, even nested groups — gets bundled together. Fonts, custom images, and shader settings travel with the component, so it renders the same on any face you insert it into.

Creating a component

1. Group the layers you want to share (Cmd+G on desktop, or wrap them via the mobile layer-tree ⋯ menu — see below) and rename the group.
2. Open Create Component… — right-click the group on desktop, or open the mobile layer tree, tap ⋯ on the group row, then Create Component…
3. Fill in name, description, and tags.
4. Choose where to save:
   • Publish — uploads to the WatchMaker library. Anyone can find and install it. Increments your install count when others use it.
   • Save to file — exports a .wcomponent file to your device. Share by email, Discord, Drive — recipients install it via Insert → Components → From file.

You can edit name, description, and tags before publishing.

Managing groups on mobile

There's no right-click on phone or tablet, so all group operations live in the layer-tree sheet. Tap the layers icon in the bottom toolbar to open it, then tap the ⋯ button on any layer or group row:

• Wrap in group — drop the selected layer into a new group.
• Move into group… — pick an existing group from the submenu to nest the layer inside it.
• Move out of group — pop a layer back up to the parent (or root).
• Bring Forward / Send Backward / Move to Top / Move to Bottom — z-order shuffles, equivalent to the desktop right-click menu.
• Create Component… — only shown on group rows; same dialog as the desktop flow above.
• Duplicate, Delete — round out the standard actions.

The sheet stays open after each action so you can chain several edits without reopening it. Use the Active / AOD pill at the top to switch which display mode the eye icons affect — locking and theme-colour cycling work the same in both modes.

Inserting a component into a face

1. Open the Insert panel (desktop sidebar / mobile + button).
2. Pick Components.
3. Browse the library, switch to Mine for components you've published, or use From file to install a .wcomponent you've been sent.
4. Tap a component — it lands as a single group at the canvas center. Position, resize, theme — it behaves like any other group.

The component becomes part of the watch face — future changes to the source component don't propagate (your face keeps the snapshot it was inserted with).

Editing a published component

When you want to update an existing component:

1. Go to Studio → Components (or your user profile → Components tab).
2. Find the component → ⋯ menu → Edit Component.
3. WatchMaker opens a scratch editor with just that component loaded. A purple banner across the top reminds you what you're editing.
4. Change any layer inside the highlighted group — text, colors, animations, anything.
5. Click Update Component in the banner (or right-click the group → Create Component).
6. Confirm — the existing component is updated in place. Same component_id, same URL, same install count. Existing watch faces using older versions of this component keep their snapshots.

The scratch editor isn't saved as a watch — it's a workspace just for the edit and is automatically cleaned up after a successful update.

Duplicating

Want a variant of an existing component without overwriting it? ⋯ menu → Duplicate. A copy is created under your account with (copy) appended to the name — edit and re-publish as a separate component.

Deleting

⋯ menu → Delete removes the component from your library and the public listing. Watch faces that already installed it keep their snapshot and are unaffected.

Tips

• Components are second-class — they sit alongside watches in the studio but are entirely optional. Most designers never publish one. Use them when you find yourself rebuilding the same complication or layout repeatedly.
• Snapshots, not links — once inserted, a component is a regular group in your watch. Detaching, modifying, or deleting the source component doesn't change watches that already use it.
• Bundle size matters — a component that uses 10 custom fonts and large images bloats every watch face that installs it. Keep them lean.
• Apple Watch faces — components are a Wear OS concept. Apple-shape watches don't get the Components insert entry.

Properties

Every layer has properties you can edit in the Properties panel. Some properties accept expressions — dynamic values that change based on time, sensors, or user data.

Universal Properties

These apply to all layer types:

Property	Description	Supports Expressions
X, Y	Position on the canvas	Yes
Rotation	Rotation in degrees (0-360)	Yes
Opacity	Transparency (0-100)	Yes
Visible	Show/hide toggle	No
Display Mode	Bright+Dim, Bright only, Dim only, Never	No
Locked	Prevent selection/editing	No
Z-Index	Layer stacking order	No

Text Properties

Property	Description
Text	Content to display. Use expressions like {dh23}:{dmz} for dynamic values
Font	Font family from the font selector
Font Size	Text size in pixels
Color	Text color (hex). Supports expressions like {ucolor}
Transform	None, Uppercase, or Lowercase

Text Effects

Shadow:

Property	Description
Color	Shadow color
Distance	Shadow offset distance
Angle	Shadow direction (0=up, 180=down)
Opacity	Shadow transparency (0-100)

Outline / Glow:

Property	Description
Color	Outline/glow color
Size	Outline/glow thickness
Opacity	Effect transparency (0-100)

Shape Properties

Property	Description
Shape Type	Circle or Rectangle
Width / Height	Dimensions in pixels
Color	Fill color (hex)
Alignment	Anchor point: center, top-left, top-right, bottom-left, bottom-right

Image Properties

Property	Description
Width / Height	Display dimensions
Alignment	Anchor point for positioning

SVG Properties (Studio Pro)

Property	Description
Fill Color	Override SVG path fill colors
ViewBox	SVG coordinate space
Pivot	Rotation center point

Ring Properties

Property	Description	Supports Expressions
Outer Radius	Outer edge of the ring	No
Inner Radius	Inner edge (controls thickness)	No
Angle	Filled arc angle (0-360)	Yes
Total Angle	Full range of the ring	No
Clockwise	Direction of fill	No
Color	Filled section color	Yes
End Color	Gradient end color	Yes
Outside Color	Unfilled section color	Yes
Outside Opacity	Unfilled section transparency	No

Example: Battery ring with {bl} as angle expression and 360 total — fills proportionally to battery level.

Progress Properties

Property	Description
Width / Height	Bar dimensions
Percent Complete	Fill percentage (0-100). Use expressions like {sscp} for step goal progress
Corner Radius	Rounded corners
End Style	Flat or Round cap
Colors	Fill, background, and accent colors

Marker Properties

Property	Description
Shape	Circle or Square
Count	Number of markers around the dial
Width / Height	Individual marker size
Squarify	Transition from circular to square arrangement (0-100)

Text Ring Properties

Property	Description
Radius	Ring radius
Ring Type	1-12 (clock), 1-24 (24-hour), custom
Show Every	Show every Nth number
Hide Text	Comma-separated numbers to hide
Rotated Text	None, Rotated, Inverse, Upright
Start / End Angle	Arc range
Squarify	Circular to square transition

Gradient & Shader Effects

Apply visual effects to any layer:

Shader	Description
Linear Gradient	Two-color gradient with angle control
Radial Gradient	Two-color circular gradient
Progress	Shader-based progress visualization

Each shader has configurable colors, angles, and scale parameters.

Tap Actions

Assign an action that triggers when the user taps a layer on their watch. Configure in the Tap Action property.

Gyro / Parallax

Add a parallax effect that responds to wrist movement. Set the Gyro value to control the intensity of the effect — higher values create more dramatic movement.

Ambient Overrides

Wear OS dims your watch face into AOD (Always-On Display) when the wrist drops. Ambient overrides let you redesign individual layer properties for that state — fade decorations out, shift the time, swap to a battery-friendly colour — without touching the active look. The runtime crossfades smoothly between the two states.

This applies to Wear OS faces only. Apple Watch doesn't expose per-layer ambient design.

Active vs Ambient

The editor canvas has an Active / Ambient toggle at the top. It swaps which scene you preview:

Mode	What you see
Active	The face as it looks when you're using the watch
Ambient	The same face as it appears in AOD, with any overrides applied

Toggling between them runs a 500ms crossfade, the same one the watch performs when entering or leaving AOD. Designs that look harsh on the watch usually feel rough in the preview too.

Adding an Override

Every overridable property has a small + add ambient link next to its label.

1. Open the layer's properties.
2. Find the property you want to differ in AOD (e.g. Opacity).
3. Click + add ambient.
4. A second input appears, grouped with the first inside a purple-tinted box.
5. Edit it. The canvas updates immediately — flip the Active / Ambient toggle to confirm.

To remove the override: click × remove on the ambient input. The property goes back to using the same value in both modes.

Supported Properties

Property	Override key	Notes
Color / Tint	ambient.color	Hex; supports {ucolor} themes
Opacity	ambient.opacity	0–100
X / Y	ambient.x, ambient.y	Same coordinate space as active
Width / Height	ambient.width, ambient.height	Grows from centre when alignment is cc
Rotation	ambient.rotation	Degrees, clockwise
Font Size	ambient.fontSize	Plain text, bitmap text, text ring, curved text

Each property has its own + add ambient toggle, so you can override just the bits you need.

Drag and Drop in Active Mode

When you nudge a layer in active mode and the layer has ambient x / y / rotation / width / height already set, the ambient values shift by the same delta. This preserves your intent:

• x = 100, ambient.x = 150 → designer's intent is "50px right in AOD."
• Drag active to x = 120 → ambient.x auto-updates to 170. Offset preserved.

If you want absolute control over the ambient value: switch to Ambient mode and edit it there. Direct edits in the ambient input never propagate.

Common AOD Patterns

Pattern	What to override
Dim decorative layers, keep time bright	ambient.opacity on decorations → 20–40
Shrink the date in AOD	ambient.fontSize smaller
Burn-in shift	ambient.x / ambient.y move the time cluster a few px every minute
Recolour to subtle white	ambient.color → ffffff on colourful elements
Hide a layer entirely	Use the layer's Display Mode (set to Bright Only) — that's faster than fading via opacity

Notes

• No override = no transition. If a property isn't overridden, it stays exactly the same in both modes. The crossfade only animates the bits that differ.
• Font size in studio. PIXI text textures regenerate as font size lerps, which can read as slightly heavy on faces with many text layers. The watch runtime crossfades font scale on hardware and stays smooth.
• Width / Height grow from centre. When a layer is centred (alignment cc, the default), changing ambient width/height grows the shape symmetrically around its centre point. Non-centred alignments grow from the anchor side.
• Expressions aren't ambient-aware. Active properties driven by formulas (e.g. x = {drs}) keep evaluating their formula in AOD unless the ambient override is set, in which case the override wins.

Removing All Ambient Overrides

There's no single "clear all" button. Click × remove on each ambient picker. When the last override is cleared, the purple grouping container collapses back to the plain active input.

Styles

Styles let you define multiple looks for a single watch face — Theme, Background, Hands, Markers, or anything you want. The wearer picks their favourite natively on the watch, with zero round-trip to the phone app.

Wear OS only. Styles rely on the native Watch Face Format customisation menu. Apple Watch faces don't have an equivalent surface for this yet.

What the wearer sees

On the watch, long-press the face and tap Customise. Each Style Set you defined appears as a scrollable picker — here's a Hands picker with three options:

No companion-app launch, no syncing — selection takes effect instantly.

How to set it up in Studio

1. Open the Styles panel in the editor sidebar.
2. Add a Style Set — a named picker the wearer will see, e.g. Theme, Hands, Background.
3. Inside each set, add Options the wearer can choose between, e.g. Light / Dark, Analog / Digital, Modern / Classic.
4. Select a layer on the canvas, then in its properties tag it to one or more Options. The layer is only visible when its tagged options are active.

Things worth knowing

• Sets are independent. Three pickers with two options each = eight visual permutations of one face. The wearer mixes and matches.
• Layers can belong to multiple options. Tag a layer to Background → Modern AND Theme → Dark, and it only shows when both are selected.
• Untagged layers always show. Perfect for shared elements like the bezel, hands, or complications that should appear regardless of style.
• Test in the editor. Use the active-style dropdowns above the canvas to preview every combination before publishing.
• Runs natively in the watch app. Everything happens on-watch via Watch Face Format — no companion-app round trip, no battery overhead, no network dependency.

---

Questions? Email [email protected]

Sounds

Sounds let you ship audio with your watch face — a chime on the hour, a bell at 8:30 every morning, a ding when the wearer taps a layer, or the watch speaking the time out loud. Plays natively on the watch, no companion-app round trip.

Wear OS only. Sounds use Android AlarmManager + MediaPlayer (audio files) and Android TextToSpeech (spoken). Apple Watch faces are system-rendered and have no audio surface available to third-party faces.

What the wearer hears

Once your face is active on a Wear OS watch, the WatchMaker companion app schedules each sound's trigger on the watch itself. The first time the wearer enables Sounds, the watch asks for the system "Alarms & reminders" permission — after that, sounds fire even when the screen is off and the phone is far away.

Wearers can mute the whole feature any time from the WatchMaker watch app's Settings, and tune the voice, pitch, and speed used for spoken sounds in the same screen — those settings apply across every face they wear.

Triggers

Each sound has one trigger that decides when it fires:

Trigger	Fires on
Hourly	every hour at :00
Every 30 min	:00 and :30
Every 15 min	:00, :15, :30, :45
At specific time	a single 24-hour clock time, e.g. 08:30, repeated daily
Custom minutes	any combination of minutes-of-hour you pick — e.g. :05, :20, :55
None (tap only)	doesn't schedule — fires only when a layer's Tap Action plays it

All scheduled triggers run on the wearer's local watch time, so a face designed in London works correctly for a wearer in Tokyo.

Spoken sounds (text-to-speech)

Pick Speak text instead of Audio file in the sound's kind dropdown and the watch will speak a phrase using its built-in TTS engine — no audio asset required, no upload size cost. Same trigger options as audio sounds (hourly, at a specific time, on tap, etc.).

The phrase is a template you write with the same {tag} syntax used elsewhere in the studio. The watch expands the tags against the wearer's wall clock at fire time, so a single It's {dh}:{dmz} {da} template works in any locale and any timezone.

Common tags for spoken sounds:

Tag	Expands to
{dh}	hour, 12 or 24h based on the wearer's device pref
{dh24}	hour, forced 24-hour
{dmz}	minutes with leading zero (07)
{da}	"AM" / "PM" / blank in 24h locales
{ddww}	full day name in the wearer's locale (Tuesday)
{dd}	day of month
{dnnnn}	full month name
{ssc}	step count
{bp}	battery percent

Presets in the Insert preset… dropdown drop in ready-made templates — start there and edit.

Limits and gotchas:

• 140 characters per template. Caps the utterance at a few seconds so it doesn't run past the moment.
• TTS engine required on the watch. Some Wear OS devices ship without one; the first tap of a spoken sound surfaces an "Install Google TTS" prompt that deep-links to Play. Once installed, scheduled spoken sounds start working automatically.
• Voice/pitch/speed are a wearer choice, not part of your face. Designers control content; wearers control delivery.
• Apple variants drop spoken entries the same way they drop audio files.

How to set it up

1. Open the Sounds panel in the editor.
2. Click Add sound — a default Hourly sound row appears.
3. Pick a Trigger from the dropdown; for At specific time enter HH:MM, for Custom minutes type a comma-separated list.
4. Pick the kind:
   • Audio file — drag-drop or pick an .mp3 / .wav / .ogg
   • Speak text — write a template (or insert a preset)
5. Click ▶ to audition. Audio files play in the browser; spoken templates speak via your local TTS or the WatchMaker companion's native bridge if you're previewing on the phone.

To wire a sound to a layer tap:

1. Add the sound with Trigger: None.
2. Select the layer on the canvas.
3. In its properties, set Tap Action → Play sound… and pick the sound from the sub-dropdown.
4. The layer becomes tappable on-watch and fires the sound when touched.

Limits and validation

Studio enforces a few hard rules so the watch experience stays predictable:

• Audio: up to 5 seconds per clip. Soft warning above 2s — short stings work best.
• Audio: max 256 KB per clip, 1 MB total across all sounds in the face.
• Spoken: 140 characters per template. Caps each utterance at a few seconds.
• No more than 2 sounds firing in the same minute. Studio expands every trigger to its set of minutes-of-hour and blocks save if any minute would have more than two scheduled sounds — keeps the watch from sounding chaotic.
• An enabled sound must have content. Audio rows need a file attached; spoken rows need non-blank template text. Empty rows can stay during editing as long as they're toggled off.

Things worth knowing

• Sounds are document-level, not per-layer. The same sound can be scheduled and wired to a tap on different layers without duplicating the audio.
• Wearers can disable individual sounds on the watch. Your Default enabled checkbox sets the initial state.
• Apple variants of your face won't include sounds — Apple Watch faces silently drop the audio when published.
• Schedules use device-local time, not face-local or UTC.

---

Questions? Email [email protected]

Tap Image

The Tap Image layer cycles through a list of images on each user tap — built directly on Wear OS's <Images change="TAP"> primitive so the cycle index survives screen-off, watch reboot, and watch-face re-selection.

Wear OS only. watchOS doesn't expose tap events on the watch face itself, so this layer is hidden on Apple shapes and silently skipped at render time on Apple variants.

What it's good for

• Compact ↔ detailed toggles. Default to a minimal face; tap to reveal stats, complications, or extra readouts.
• Day ↔ night looks. Same content, alternate styling — wearer picks the variant they want for the moment.
• Easter eggs. A few hidden states that only show up if the wearer taps.

Add a Tap Image layer

1. Click Insert → Tap Image in the side panel.
2. Pick an image — that becomes Frame 1 and defines the slot (the width × height every other frame will stretch to fill).
3. Open the Properties panel for the new layer.
4. Click Add Frames to drop in additional images. The picker accepts multiple files in one go.

Manage frames

The Properties panel shows the frame list with a thumbnail, reorder buttons, and a remove icon for each row.

• Reorder — the up/down chevrons swap a frame with its neighbour. The order in the list IS the cycle order on-watch.
• Replace in place — click any thumbnail to swap that one image without disturbing the order. Replacing Frame 1 re-seeds the slot dimensions to the new image's aspect ratio.
• Remove — the trash icon. Removing Frame 1 promotes Frame 2 to slot-defining.

Aspect-ratio behaviour

The slot dimensions are fixed by Frame 1. Subsequent frames stretch to fill the slot — same behaviour as Galaxy Watch Studio and what ships on real Wear OS hardware. If you drop in a frame whose aspect differs by more than ~5%, Studio shows a brief warning so you can decide whether to crop the source, change the slot size, or accept the stretch.

Want all frames at their natural aspect? Crop them to the same aspect before adding, or replace Frame 1 so the slot matches.

How it ships on the watch

The OS owns the cycle index — it persists across screen-off, reboot, and watch-face re-selection. No script, no setup, no battery cost.

Things worth knowing

• The cycle index doesn't persist in Studio. Every editor reload starts at Frame 1. On the watch it persists; in Studio it's just for preview.
• No tap-hint affordance is auto-drawn. If you want wearers to discover the interaction, paint a small icon or label into the artwork — that's the standard WFF convention.
• Apple variants of the face skip this layer entirely. No fallback, no first-frame placeholder. Design your Apple face around the layer not being there.
• All frames are bundled into the .watch file. Studio caps each frame's long edge at 1024 px on import; a 10-frame cycle is heavier on disk than a regular image layer.

---

Questions? Email [email protected]

Photo Slot

The Photo Slot layer lets the wearer drop their own phone photos into a face — selfies, family, pets, or texture shots. You place a single placeholder image in Studio; on the watch, the wearer adds the real photos in the customize editor. Built directly on Wear OS's <Photos> / <PhotosConfiguration> personalization.

Wear OS 6+ only. Apple Watch faces are system-rendered with no author-supplied photo picker, so this layer is hidden on Apple shapes and skipped on Apple variants. Older Wear OS versions don't support <Photos>.

What it's good for

• Make it personal. A photo of family, a pet, or the wearer themselves as the background.
• Skins & textures. Camo, marble, wood, sky, water — the wearer picks the surface that matches their style.
• Photo of the day. With several photos added, the face can rotate through them on a tap or on each wake.

Add a Photo Slot

1. Click Insert → Photo Slot in the side panel.
2. Pick an image — this becomes the placeholder shown until the wearer adds their own.
3. Position and size it like any image layer. It's not background-only — place it anywhere in the z-order.
4. In Properties, pick a Change photo on trigger (see below) — it only matters once the wearer adds more than one photo.

How the wearer adds photos

On the watch (or in Galaxy Wearable): Customize → +, then choose photos from the phone's gallery. The first photo replaces the placeholder; from then on, the trigger you set decides how the face moves between them.

Switching between photos: Tap vs Wake

The Change photo on option in Properties controls what advances to the next of the wearer's photos. It does nothing while only one photo is set — there's nothing to advance to.

• Tap — every time the wearer taps the photo on the live face, the next photo in their set is shown. Good when you want the wearer in charge (a "scroll through my pets" kind of feel). Compiles to WFF <Photos change="TAP">.
• Wake — the face automatically advances to the next photo each time the screen wakes (wrist-raise, screen-on, app-switch back). Good for "fresh photo every time I look at the watch." Compiles to WFF <Photos change="ON_VISIBLE">.

You can change this any time without re-uploading. The wearer's photos and order are kept across the switch.

Where the photos live

The wearer's photos stay on-device — nothing is uploaded. The placeholder you supplied ships inside the face as the default image until the wearer adds their own.

Things worth knowing

• One Photo Slot per face. Wear OS allows a single photo configuration — once you add one, the Insert option hides until you remove it.
• The placeholder is capped at 50 KB. It's compressed hard on export (the WFF limit on a default image). Use it as a hint of what goes there, not a high-res asset.
• Adding photos and switching between them are two different things. Photos are added in the customize editor (Customize → +). The Change on: Tap trigger only switches between photos the wearer already added — it doesn't open the picker.
• Apple variants skip this layer entirely. No fallback. Design your Apple face around it not being there.

---

Questions? Email [email protected]

Smart Segments

Smart Segments are the modern way to do progress indicators, step-count rings, mileage bars, battery wedges, and animated image reveals. One layer type covers all of it — you just pick the shape that fits the data, drop in an image, and the runtime animates the fill from a percentage value.

Wear OS only. Apple Watch doesn't render this layer type, so the whole Segments group is hidden on Apple shapes. Design your Apple variants around different elements.

There are three tiles under Insert → Segments:

Bar. Stat bars, progress chunks, fuel gauges. Drop in a row of coloured shapes — chevrons, blocks, dashes — and the fill sweeps left to right.

Ring. Step-count rings, activity rings, dial segments. Drop in a ring of coloured wedges and the fill sweeps clockwise from 12.

Reveal. Photo wipes, icon reveals, animated illustrations. Drop in any image and pick the direction yourself — left to right, top to bottom, right to left, bottom to top, or clockwise.

Bar and Ring read each distinctly-coloured region in the source as a separate segment. Reveal doesn't look at colours — it slices the image into evenly-spaced pieces in the direction you pick and keeps the original colours intact.

Add one

1. Insert → Segments → Bar / Ring / Reveal.
2. Pick a starter image from the gallery, or tap Upload your own. Bar and Ring each ship with 8 starter shapes; Reveal ships with 8 starter images and accepts any photo.
3. The layer drops on the canvas at a reasonable default size (around 100 px long edge) and starts animating — pct_complete defaults to {drss} / 3.6, which sweeps the fill from 0 to 100 once a minute so you can see the animation immediately.

Properties

Source shape / image. Tap the thumbnail at the top of Properties to swap to another starter or upload a different file. Width/height stay put — the swap doesn't jump the layer around the canvas.

Active / Inactive colours.

• color tints the active (revealed) region.
• color2 tints the inactive (un-revealed) region.
• White (ffffff) means "no tint" — the source image renders in its own colours. Set either field to {ucolor} / {ucolor2} / {ucolor3} to follow the wearer's theme, or to any hex for a fixed tint.
• Reveal defaults both fields to white so photo-style reveals look untouched. Bar and Ring default to red on dark so the contrast reads at a glance — change them to suit.

outside_opacity. How visible the un-revealed part stays (0–100). Reveal defaults to 40 so the dim half of the image is still there but doesn't compete with the revealed half. Bar and Ring default to 100 (un-revealed segments stay fully visible in their inactive colour). Set it to 0 to fully hide the inactive region.

pct_complete. The driver. A number from 0 to 100, or a formula. Examples:

• {ssc} / 100 — fills as the wearer hits their step count.
• {bl} — battery percentage.
• {drss} / 3.6 — sweeps 0–100 once per minute (the default; nice for design previews).
• 60 — a static value, useful while you're styling.

Reveal only:

• Direction. L→R, T→B, R→L, B→T, or Clockwise from 12. The image slices the same way the runtime reveals it.
• Segments. How many discrete slices the reveal advances through (2–120, default 12). Bigger numbers look smoother but cost more output size on the watch — see "Things worth knowing" below.

Use your own image

The 8 starter shapes per kind are a starting point, not a limit. Upload anything that fits the model:

• For Bar / Ring — a PNG with each segment in a distinct flat colour, transparent background. Each colour becomes one segment.
• For Reveal — literally any image. Photos, illustrations, icons, screenshots. No special preparation needed; the studio slices it for you.

Things worth knowing

• The fill animates in real time on the watch — whatever you wire into pct_complete updates as the data does. Steps tick up, the bar fills.
• Bar fills left to right, Ring fills clockwise from 12 — those directions are fixed. Want a vertical bar or a counter-clockwise ring? Use Reveal with the matching direction.
• Don't go crazy with the Reveal segment count. Above 24 you stop being able to see the difference, and the extra slices make the face file bigger for no reason. 12 to 24 is the sweet spot.
• Themed colours flip live. Set color to {ucolor} and the active region recolours every time the wearer changes the theme. Same for color2 and {ucolor2} / {ucolor3}.
• You don't need to resize your image first. Studio handles that automatically on export — upload at whatever resolution you have. The on-watch copy is shrunk to the watch's screen size; your editing preview keeps the full quality.

---

Questions? Email [email protected]

Video Faces

Video Faces let you ship a looping MP4 as the background of an Apple Watch face. Drop a clip, frame it inside the watch area, pick a still for the gallery poster, and add complications around the time. On the wrist the video plays on wrist-raise and freezes on a still moments later — the same Live-Photo feel Apple's own Photos faces use.

Apple Watch only. Wear OS has no comparable runtime surface for looping video at the watch-face layer, so this face type is hidden on Wear shapes. There is no fallback — design a separate Wear face if you need cross-platform coverage.

What it's good for

• Mood / atmosphere faces. Slow-motion water, fire, clouds, lights — a face that breathes when you raise your wrist.
• Character / brand faces. A 3-second loop of a mascot blinking, a logo dissolving in, a stylized animation cycle.
• Live-Photo style portraits. Use your iPhone Live Photos directly — Studio normalizes any clip automatically.

Building a Video Face

1. From /studio/new, pick the Video template (under Apple Watch).
2. Click Replace video… in the bottom panel and pick any MP4 / MOV / Live Photo. Studio transcodes it for the watch (480×584, H.264, up to 3 s).
3. Drag inside the watch preview to pan, pinch / use the corner handles to scale and rotate. The 480×584 area is what the watch will actually show; anything you push past the edge is hidden.
4. In the timeline, drag the yellow trim handles to pick the 3 seconds you want kept, then drag the cyan key-frame marker (or hit the camera button) to pin the still that appears as the gallery poster and the live face's "frozen" frame.
5. Open Properties (cog) → pick a background color (shows around the video if your transform exposes the canvas edge), a clock position (top or bottom), and up to two complications (top slot above the time, bottom slot below).
6. Publish or Save like any other face. Publish renders the video and uploads the bundle; Save writes a draft .watch you can come back to.

The watch frame, explained

Apple's video-style watch faces have a hard 480×584 video frame with a fixed clock layout drawn over the top by watchOS. Studio mirrors this exactly:

• Pan / scale / rotate all operate inside the 480×584 frame. The editor preview is pixel-for-pixel what the watch shows.
• The bg color you pick fills any area the transformed video doesn't cover — useful when you want a black or coloured strip around a portrait clip.
• Clock position controls whether the time renders at the top or bottom. Pick whichever leaves your subject visible.

Trim and the key frame

Apple caps every video face at 3 seconds; longer clips are trimmed automatically. The trim window lets you pick which 3 seconds. The key frame sets two things:

• The still shown on the gallery thumbnail and the iPhone install sheet.
• The frame the live face freezes on a moment after the loop plays — so the still you see at rest matches what the wearer sees most of the time.

Re-pick whenever — drag the cyan marker on the trim bar or scrub to a frame and tap the camera button.

Complications

Pick one from each of the top and bottom slots. Available presets:

• Date — WED 10 JUN style readout.
• Calendar — your next event.
• Battery — 85%.
• Activity — Move-ring icon.
• Heart Rate — current BPM with heart icon.
• Sunrise / Sunset — next solar event.
• Weather — current condition + temperature.

The editor preview paints sample values (85%, WED 10 JUN, etc.). On the watch, every slot reads live system data — the wearer's actual battery, calendar, weather. You can't customise the preset's data source; pick the slot, watchOS handles the rest.

Things worth knowing

• 3-second cap is Apple's, not ours. Longer source video is fine — Studio trims to the window you pick. Going longer than 3 s after trim is silently capped.
• Sound is stripped on export. The watch never plays audio from video faces.
• No always-on render. The face switches to the still poster in always-on mode (low refresh), then resumes on wrist-raise. Pick a key frame that reads well as a static photo.
• The clip your wearer sees is not the .mp4 you uploaded. Studio re-encodes to H.264 480×584 with the transform / trim / bg color baked in. The original is not shipped.
• One video per face. No multi-clip carousel like Photo Slot; that's a Wear-only feature.
• Drafts preserve key-frame + trim. A .watch saved mid-edit re-loads with the same window and pinned frame; you don't have to re-pick.

---

Questions? Email [email protected]

Sport Scores

Sport Scores let you drop the live state of a football match onto a watch face — the score, the clock, the current period, the favorite / opponent team images, and a one-line headline ticker that flashes "GOAL ENGLAND" on a goal. The wearer picks which match they want to follow on their phone, and the face updates as goals are scored, halves end, and the match wraps.

Both platforms supported, with different cadences. Wear OS faces refresh within a couple of seconds of each goal via the WatchMakerPush data feed. Apple Watch faces show the score on a complication that refreshes every 5 min during a live match and every 15 min otherwise — and tapping the complication opens a live screen inside the WatchMaker app that polls every 30 s while you're watching. Same tags, different update model.

What it's good for

• Sports-fan faces. A face that turns into a mini scoreboard during a match the wearer cares about — World Cup, league fixtures, finals — and reverts to its normal state when no match is live.
• Match-day skin swap. Pair the Sports tiles with a flavor set so the wearer can switch between a "matchday" layout and a "normal" one without changing faces.
• Branded score displays. Team partners can ship a face that pre-selects their fixture so opening the watch becomes a scoreboard.

Building a Sport face

1. In the editor, open Insert → Sports. Available tiles depend on the face's device:
   • Sport Score — drops a text layer pre-populated with {sport_fav_score} - {sport_opp_score}, big and centred. Wear + Apple.
   • Sport Clock — {sport_clock} ("67'" during play, "Tue 8:00 pm" before kickoff). Wear + Apple.
   • Sport Match Title — {sport_fav} vs {sport_opp} (3-letter codes). Wear + Apple.
   • Favorite Image — the favorite team's logo (live image, picked at runtime). Wear + Apple.
   • Opponent Image — the opponent's logo. Wear + Apple.
2. Position + style the layers like any other layer — drag, resize, change font / color / opacity, animate via expressions. The Image tiles keep the team logo's natural shape inside the box you set (square crests fill, wide flags sit centred with space above and below).
3. Preview values. The editor canvas shows whatever match you have currently picked. Open any sports watch face's preview page and use the Pick your team picker there to choose a fixture; the editor now shows real values like "FRA 2-1 BRA" so you can dial in alignment + sizing.
4. Publish or Save as usual. The face installs ready to follow whichever match the wearer picks.

Apple Watch specifics

• The score lives on a complication. Drop the Sport tiles inside a complication slot on your AC face — that's the surface the score renders to on-watch. The watchface body itself is server-baked and can't update live.
• Tap-through to live data. When the wearer taps a sport complication, watchOS opens the WatchMaker app to a live score screen that polls every 30 seconds while they're watching it. Goes back to the 5/15-minute complication cadence as soon as they drop their wrist.
• Team logos render on AC. Favorite / Opponent Image tiles work — the widget extension fetches the resolved URL once per team, caches the bytes in the App Group, and the existing image render pipeline draws them like any static image. Cache is keyed by the URL so subsequent renders never hit the network.

How wearers pick their match

Whenever the wearer opens a sports watch face's preview on their phone, a "Pick your team" panel appears under the watch with today's matches. Tapping a team chip:

• Saves their pick.
• Sends the choice to the watch.
• The watch face updates within a couple of seconds.

Before the wearer picks, the score / clock / image tiles all sit blank. They can change teams or matches as often as they like — the new team's logo arrives at the watch within a few seconds.

Live updates

• Wear OS: during a live match the watch face refreshes within a few seconds of each goal, half-end, or status change. Team logos only re-download when the wearer changes which team they're following, not on every goal, so updates stay quick and lightweight.
• Apple Watch: the sport complication refreshes every 5 minutes during a live match and every 15 minutes otherwise — that's the budget watchOS gives third-party complications. For real-time, the wearer taps the complication to open WatchMaker, which polls every 30 seconds while the screen is on.

Sport tags (advanced)

If you want a value not exposed by the five tile presets — e.g. the league name as a label, the headline ticker as a marquee — pull the tag directly into a text layer via the Sport group in the tag picker:

Tag	Example
{sport_status}	LIVE / UPCOMING / HT / FT
{sport_league}	Group H, Round of 16
{sport_fav}	ENG (favorite — short code)
{sport_opp}	CRO
{sport_fav_score}	2
{sport_opp_score}	1
{sport_clock}	67', HT, FT, or Tue 8:00 pm
{sport_period}	1H / HT / 2H / ET / P / FT
{sport_headlines}	ENG 41' Goooooal! — Kane, Kickoff!, Half Time! ENG 1-1 CRO, Full Time! ENG 2-1 CRO, Shots: ENG 8-3 CRO. Capped at 30 chars; longer formats are truncated with ….
{sport_fav_scored}	1 for 2 min after the favorite scores, otherwise 0. Drives goal-celebration animations on the favorite side.
{sport_opp_scored}	1 for 2 min after the opponent scores, otherwise 0.

You can drive opacity / color / layer visibility off these tags via expressions — e.g. {sport_status} == 'LIVE' and 100 or 0 on a layer's opacity to show a "LIVE" badge only during play, or {sport_fav_scored} == 1 and 100 or 0 on a confetti overlay so it appears for two minutes every time the favorite scores.

3-letter team codes (2026 World Cup)

{sport_fav} and {sport_opp} return the FIFA 3-letter code for the wearer's picked teams. Useful if you want to branch styling per team (e.g. paint a layer in the team colour via an expression like {sport_fav} == 'ENG' and 'ffffff' or 'cccccc').

ALG=Algeria        ARG=Argentina      AUS=Australia      AUT=Austria
BEL=Belgium        BIH=Bosnia & Herz. BRA=Brazil         CAN=Canada
CGO=Congo DR       CIV=Ivory Coast    COL=Colombia       CPV=Cape Verde
CRO=Croatia        CUR=Curaçao        CZE=Czechia        ECU=Ecuador
EGY=Egypt          ENG=England        ESP=Spain          FRA=France
GER=Germany        GHA=Ghana          HAI=Haiti          IRN=Iran
IRQ=Iraq           JOR=Jordan         JPN=Japan          KOR=South Korea
KSA=Saudi Arabia   MAR=Morocco        MEX=Mexico         NED=Netherlands
NOR=Norway         NZL=New Zealand    PAN=Panama         PAR=Paraguay
POR=Portugal       QAT=Qatar          RSA=South Africa   SCO=Scotland
SEN=Senegal        SUI=Switzerland    SWE=Sweden         TUN=Tunisia
TUR=Türkiye        URU=Uruguay        USA=USA            UZB=Uzbekistan

Things worth knowing

• Football only at launch. The fixtures the wearer sees are today's football matches across major leagues + tournaments. Other sports may follow.
• Phone has to be reachable. Both platforms get their data via the phone. Wear OS faces blank when the phone drops; the Apple Watch complication just keeps showing the last value it saw until the next refresh succeeds.
• Wearer logos, not designer logos. The Favorite / Opponent Image layers always show the wearer's picked team — you can't pin them to a specific club at design time. That's deliberate; the face works for any fan, not just one club's.
• Image source isn't editable. Click a Favorite / Opponent Image layer and the Properties panel shows the tile name with no file picker — the team logo arrives at runtime. Don't bake a logo as a static image; use the tile.
• Stale data clears itself on Wear. If a Wear watch hasn't heard anything fresh for about an hour, the tiles blank out rather than show yesterday's score. Apple Watch follows a similar "last-known-good" pattern but doesn't auto-blank.
• One match at a time. The wearer follows exactly one fixture; switching teams mid-match is fine, but the face only ever shows one match's state.

---

Questions? Email [email protected]

Complications

Complications are wearer-customisable data slots — the round, square, or rectangular badges that show steps, date, battery, weather, or any other provider the wearer picks on-watch. You drop a slot in Studio and choose a default provider; on the watch the wearer long-presses the slot and swaps it for any compatible provider they've installed.

Wear OS only. Apple Watch has its own WidgetKit-based complication system, separate from this. The Custom Complications inserts are hidden on Apple shapes.

What it's good for

• Quick-glance data. Steps, heart rate, date, next event, battery — the standard "watch face data badges."
• Let the wearer choose. You pick a sensible default; the wearer swaps to whatever they care about (third-party apps included).
• Multiple slots per face. Drop several around the dial — one for date, one for steps, one for a weather widget — each independently customised on the watch.

Add a complication

1. Click Insert → Custom Complications in the side panel.
2. Pick a shape — Round, Square, Rectangle, or Mini Rectangle. The shape determines the slot's bounding box (and which providers can fill it on-watch).
3. Position the slot like any layer. Resize from the Properties panel or by dragging.
4. In Properties, pick a Default Provider — what fills the slot before the wearer changes it. Date, Day and date, Step count, Watch battery, Sunrise / sunset, Next event, World clock, etc.

The insert drops the slot plus a default sublayer layout — an icon, a text field, and a title field — already wired to the provider you picked. Each sublayer is an independent layer in the panel; tweak its font, colour, position, or font size like any other text/image layer.

Sublayers — Text, Title, Image

A complication isn't just one field. WFF providers expose up to three pieces per slot:

• TEXT — the primary value (e.g. 8,543 for Steps, 28 May for Date).
• TITLE — an optional label (e.g. Steps, °C). Not all providers expose this.
• MONOCHROMATIC_IMAGE — a small icon supplied by the provider (e.g. a calendar glyph for Date).

In the slot's Properties panel, Sublayers has a checkbox for each. Tick to add, untick to delete. Hide rather than delete via the eye icon in the layer panel if you want to keep the customisations.

Each sublayer is positioned inside the slot in slot-local coordinates: (0, 0) is the slot centre. The default insert lays the icon above, text in the middle, title below.

Default Provider

The dropdown in Properties picks which system provider seeds the slot. Wearers can override it on-watch.

Option	TEXT	TITLE	Icon
Empty	—	—	none
Date	28 May	—	calendar
Day and date	Thu 28 May	—	calendar
Day of week	Thu	—	calendar
Watch battery	100	—	battery
Step count	8,543	Steps	steps
Next event	17:30	—	calendar
Sunrise / sunset	06:42	—	sunrise
Time and date	clock	date	none
World clock	clock	city	none
Unread notifications	3	—	bell

Studio previews the provider with realistic sample data so the layout reads correctly before you ship.

Resizing the slot

Slot width and height appear in the Properties panel. Resize the slot freely — but sublayers don't auto-rescale. If you grow a 92×92 slot to 185×185, the text sublayer keeps its original 92px width and a long string (e.g. Thu 28 May) clips. The export pipeline expands PartText to the slot's full width to mitigate this, but for clean designer control nudge each sublayer's width to match after resizing.

Things worth knowing

• Slots live at scene root. WFF requires it — even if you nest the slot inside a Studio Group, the export hoists it. Sibling shapes around the slot might end up offset slightly because of the export's groupMain scale.
• One provider, one slot. Each slot binds a single provider. Need date AND steps? That's two slots.
• Mini Rectangle is text-only. The 90×30 form factor is too small for an icon + text + title stack, so insert drops just one centred TEXT sublayer. Add image/title via the Sublayers checkboxes if you really want them.
• Custom fonts work. Pick any font on a Text sublayer; it ships with the face and is referenced sanitised (lowercased, alnum) as the WFF family name. Same pipeline as regular text layers.
• Apple faces skip this layer entirely. No fallback. If you're shipping a face for both platforms, design the Apple variant without it.

---

Questions? Email [email protected]

Expressions

Expressions are dynamic values enclosed in {curly braces} that update in real-time on the watch. Use them in text, rotation, position, color, and opacity fields to make your watch face respond to time, health data, weather, and more.

Basic Usage

Type an expression tag directly into any field that supports it:

• Text layer: {dh23}:{dmz} displays "14:30"
• Rotation: {drh} rotates a layer like an hour hand
• Color: {ucolor} uses the theme's primary color

You can mix static text with expressions: Steps: {ssc} displays "Steps: 4,523"

Time & Date

Tag	Output	Example
{dh}	Hour (1-12)	2
{dh23}	Hour (0-23)	14
{dhz}	Hour (01-12)	02
{dh23z}	Hour (00-23)	14
{dm}	Minute (0-59)	5
{dmz}	Minute (00-59)	05
{ds}	Second (0-59)	8
{dsz}	Second (00-59)	08
{da}	AM/PM	PM
{dss}	Milliseconds	432
{dd}	Day of month	7
{ddz}	Day of month (zero-padded)	07
{ddw}	Day of week (short)	Mon
{ddww}	Day of week (full)	Monday
{dn}	Month number	3
{dnn}	Month number (zero-padded)	03
{dnnn}	Month name (short)	Mar
{dnnnn}	Month name (full)	March
{dy}	Year (2 digit)	26
{dyy}	Year (4 digit)	2026
{dw}	Week in year	12

Time Digits

Extract individual digits for flip-clock or segmented displays:

Tag	Description	Example
{dh23tt}	Hour tens digit	1
{dh23to}	Hour ones digit	4
{dmt}	Minute tens digit	3
{dmo}	Minute ones digit	0
{dst}	Second tens digit	0
{dso}	Second ones digit	8

Rotation

These return 0-360 degree values, ideal for analog hands:

Tag	Description
{drh}	Hour hand rotation (12h, adjusted for minutes)
{drh24}	Hour hand rotation (24h)
{drm}	Minute hand rotation (adjusted for seconds)
{drs}	Second hand rotation (tick)
{drss}	Second hand rotation (smooth, includes milliseconds)

Health & Fitness

Tag	Description	Example
{ssc}	Step count	4523
{stsc}	Step goal	10000
{sscp}	Steps as % of goal	45
{sdst}	Distance traveled	3.2
{scal}	Calories burned	287
{shr}	Heart rate (BPM)	72
{hfc}	Flights climbed	5
{ham}	Move calories (Activity Ring)	320
{hae}	Exercise minutes (Activity Ring)	25
{has}	Stand hours (Activity Ring)	8

Weather

Tag	Description	Example
{wt}	Current temperature	22
{wtd}	Temperature with degree	22°C
{wth}	Today's high	26
{wtl}	Today's low	18
{wct}	Condition text	Partly Cloudy
{wci}	Condition icon code	02d
{wh}	Humidity	65
{wws}	Wind speed	12
{wwdb}	Wind direction	NE
{wsr}	Sunrise time	06:42
{wss}	Sunset time	20:15
{wmp}	Moon phase (1-9)	5

Forecast

Hourly forecast for the next 12 hours: {wf1ht} through {wf12ht} for temperature, {wf1hci} through {wf12hci} for condition icon.

Daily forecast for the next 5 days: {wf1dth} / {wf1dtl} for high/low, {wf1dci} for condition icon.

Battery

Tag	Description	Example
{bl}	Battery level (0-100)	85
{blp}	Battery with %	85%
{br}	Battery rotation (0-360)	306
{bc}	Charging status	Charging

Phone battery tags mirror these with p prefix: {pbl}, {pblp}, {pbr}, {pbc}.

Theme Colors

Tag	Description
{ucolor}	Primary theme color (hex without #)
{ucolor2}	Secondary theme color
{ucolor3}	Tertiary theme color

Use in Color fields to let users customize your watch face colors.

Timezone

Three timezone slots (tz1, tz2, tz3):

Tag	Description	Example
{tz1t}	Time in timezone	09:30
{tz1l}	Location (short)	Pacific
{tz1o}	UTC offset	+05:30
{tz1rh}	Hour rotation	285

Conditional Expressions

Use ternary expressions for conditional logic:

condition ? value_if_true : value_if_false

Examples:

• Show AM/PM indicator: {da} === 'AM' ? 'Morning' : 'Evening'
• Battery color: {bl} > 20 ? '00ff00' : 'ff0000' (green above 20%, red below)
• Weather icon selection: {wci} === '01d' ? 1 : {wci} === '02d' ? 2 : 3

Sensors

Tag	Description
{scr}	Compass heading (rotation)
{scb}	Compass bearing (N, NE, E, etc.)
{sax} / {say} / {saz}	Accelerometer X/Y/Z
{sgx} / {sgy} / {sgz}	Gyroscope X/Y/Z
{sprs}	Barometric pressure

Calendar

Four event slots (c1 through c4):

Tag	Description
{c1ex}	Event exists? (true/false)
{c1t}	Event title
{c1b}	Begin time
{c1e}	End time
{c1l}	Location
{c1c}	Event color

System

Tag	Description
{abright}	Is screen bright?
{adark}	Dark mode enabled?
{avol}	System volume (0-100)
{abrt}	Screen brightness (0-100)
{around}	Is watch round?
{alat} / {alon}	GPS coordinates

Animation Counters

Tag	Description
{c_elapsed}	Seconds since watch loaded
{c_0_100_2_st}	Count 0-100 over 2 seconds, stop
{c_0_100_2_rp}	Count 0-100 over 2 seconds, repeat
{c_0_100_2_rv}	Count 0-100 over 2 seconds, reverse

Expression Library

The Expression Library lets you save the formulas you write, browse ones shared by the community, and drop them into any field with a click — no retyping a math.floor(...) you perfected last week. You can also give your favourites a short personal code (a u_ shortcut) for fast reuse.

If you're new to formulas themselves, read Expressions first — the library is just a way to save and reuse them.

Where it lives

The library is built into the formula editor. Open any field that accepts a formula — text, rotation, position, opacity, color — and tap the ƒx button. The panel at the bottom has three tabs plus a Save action:

• Tags — the built-in {curly} tags and function snippets.
• Browse — public expressions shared by the community.
• Mine — expressions you've saved.
• ＋ Save — save the formula you're currently editing.

Saving an expression

1. Write or paste a formula in the box (or insert/tweak an existing one).
2. Tap ＋ Save.
3. Fill in the form:
   • Name — what you'll find it by.
   • Expression — prefilled with your current formula.
   • Description (optional) — what it does or what to plug in.
   • Category — Analog, Digital, Date, Battery, Steps, Weather, Sunrise/Sunset, Moon, Calendar, Math, or Other.
   • Who can use this — Everyone (public — anyone finds it in Browse) or Just me (private to your library).
   • Shortcut (optional) — a personal u_ code (see Shortcuts below).
4. Save.

Saving with a name you've already used updates that expression instead of creating a duplicate — the form shows "Updating your existing …" and the button changes to Update. If you insert one of your expressions, tweak it, and save, the name carries over so it updates the original rather than piling up copies.

Public is instant — there's no review queue. The name is checked against restricted brand terms, and the formula is validated (see below).

Validation

The editor checks your formula as you type, showing the result live below the box (e.g. = 384) or an error. Saving is blocked if the formula:

• references an unknown tag (a typo like {stps}),
• doesn't evaluate (a syntax error), or
• has unbalanced { } / ( ).

Browsing & inserting

• Browse lists public expressions; Mine lists yours, each tagged Public or Private.
• Category chips filter the list, the search box matches name, formula, and description, and Top / New sorts by stars or by newest.
• Tap an expression (or its Insert button) to drop its text into your formula.

Auditioning: an inserted expression is left highlighted, so clicking another one replaces it — click straight down the list to try each in the live preview. When you want to keep one and add another, click into the editor to drop the highlight first; the next insert then appends at the cursor.

Inserts are snapshots — the formula text is copied in. If the source expression changes or is deleted later, faces that already used it are unaffected.

Stars

Tap the ★ on an expression to star it. Browse → Top surfaces the most-starred expressions so the good ones rise to the top. Tap again to unstar. Starring needs a (free) account.

Editing & deleting your own

In Mine, each row has a pencil (edit) and a trash (delete):

• Edit reopens the save form for that expression and updates it in place.
• Delete removes it from your library and from Browse. Faces that already inserted it keep their snapshot.

Shortcuts

Shortcuts are a personal, keyboard-fast way to reuse your formulas. Assign a short u_ code to one of your expressions, and you can drop it in without hunting through the list.

1. When saving or editing your expression, set a Shortcut — type a short code after the u_ prefix (e.g. cal → u_cal).
2. Back in the formula editor, your shortcuts appear as chips under the formula box. Tap a chip to insert that expression's text.
3. Or just type the code: u_cal followed by a space, operator, or bracket expands inline to the underlying formula.

Shortcuts are private to you and must be unique within your library. They're an editing convenience only — they expand to the real formula, so the watch never sees u_ anything. A shortcut you've assigned shows as a small badge on its row in Mine.

Login & access

The library is part of Studio. Browsing public expressions works without signing in, but saving, Mine, stars, and shortcuts need a free account.

Tips

• Snapshots, not links — inserting copies the text; later edits to the source don't ripple into faces that already used it.
• Name is the identity — reuse a name to update, pick a new name to branch a copy.
• Star as you browse — it's how the best expressions become discoverable for everyone.
• Shortcuts for your top few — assign u_ codes to the handful of formulas you reach for constantly; leave the rest to Browse/search.

Workflow

Preview

Time Machine

The Time Machine sits at the bottom-left of the editor and lets you test your watch face across the full 24-hour cycle without waiting.

• Time slider — Drag to jump to any time of day
• Playback speed — 1x (real-time), 2x, 3x, or paused
• Pause — Freeze time to fine-tune specific moments

Preview Values

Open the Preview Values panel to test dynamic data without a connected device. Set custom values for:

• Step count, heart rate, calories
• Weather temperature, condition, humidity
• Battery level, charging status
• Calendar events

This is essential for testing conditional layers and complications.

Grid & Snap

• Toggle grid — Show a visual grid overlay on the canvas
• Snap to grid — Layers align to grid lines when dragging
• Grid size — Adjustable from 5px to 200px

Use the grid for precise alignment of markers, hands, and text.

Send to Watch

Sync your watch face directly to a connected device for live testing. The watch face transfers via the WatchMaker companion app on your phone.

1. Ensure your watch is connected to the WatchMaker app
2. Click Sync from the dashboard or editor
3. The watch face builds and transfers automatically
4. Check your watch to see the live result

Test on-device frequently — some features (gyro/parallax, health data, actual weather) can only be verified on real hardware.

Publish

When your watch face is ready to share with the community:

Requirements

Before publishing, your watch face must have:

• Name — at least 5 characters
• Description — at least 5 characters
• Tags — at least 1 tag for discoverability

Publishing Steps

1. Click Publish in the editor toolbar
2. If you have unsaved changes, they'll auto-save first
3. The watch face builds into a publishable package
4. Fill in or verify the name, description, and tags
5. Choose whether to make it Remixable (allows others to inspect/edit in Studio)
6. Accept the Terms & Conditions
7. Click Publish

After Publishing

• Your watch face gets a public page at /watchface/{slug}
• It appears in search results and can be browsed by the community
• You can update it anytime — edits create a new version
• View performance in Insights (Studio Pro)

Compatibility Check

Before publishing, check the compatibility indicator in the toolbar. It warns about:

• Features unsupported on Apple Watch vs. Wear OS
• Tags that may not work on certain platforms
• Layers with potential rendering differences

Address warnings to ensure your watch face works well on all devices.

Version History (Studio Pro)

Studio Pro saves up to 50 versions of your watch face. Roll back to any previous version if needed.

Examples

Practical walkthroughs for common watch face patterns.

Analog Clock

Create a classic analog clock with rotating hands.

Hour Hand

1. Insert a Time & Date > Hour Hand layer
2. Upload or select your hour hand image — point it straight up (12 o'clock position)
3. The rotation is automatically set to {drh} — smooth hour rotation adjusted for minutes
4. Position the pivot point at the base of the hand

Minute Hand

1. Insert a Time & Date > Minute Hand layer
2. Upload your minute hand image (pointing up)
3. Rotation: {drm} — minute rotation adjusted for seconds

Second Hand

1. Insert a Time & Date > Second Hand layer
2. Upload your second hand image (pointing up)
3. Rotation: {drss} — smooth sub-second rotation
4. Set Display Mode to Bright only to save battery in ambient mode

Tip

Layer order matters: background at the bottom, then markers, hour hand, minute hand, second hand on top. Add a small circle at the center to cover the pivot point.

Digital Time Display

Simple Clock

1. Add a Text layer
2. Set text to: {dh23}:{dmz}
3. This shows 24-hour time like "14:30"

12-Hour with AM/PM

Set text to: {dhz}:{dmz} {da}

Displays: "02:30 PM"

Date Below

Add a second Text layer: {ddw}, {dnnn} {ddz}

Displays: "Mon, Mar 07"

Flip Clock Style

Use individual digit tags for segmented displays:

• Layer 1 (hour tens): {dh23tt}
• Layer 2 (hour ones): {dh23to}
• Layer 3 (minute tens): {dmt}
• Layer 4 (minute ones): {dmo}

Position each digit separately with a custom font for a flip-clock look.

Battery Indicator

Battery Ring

1. Add a Ring layer
2. Set Angle expression to: {bl} * 3.6 (maps 0-100 to 0-360 degrees)
3. Set Total Angle to 360
4. Choose colors: green for fill, dark gray for background

Battery Color Change

Use a conditional expression in the ring's Color field:

{bl} > 50 ? '4CAF50' : {bl} > 20 ? 'FFC107' : 'F44336'

• Green above 50%
• Amber between 20-50%
• Red below 20%

Battery Text

Add a text layer: {bl}%

Weather Complication

Temperature Display

1. Add a Text layer with: {wtd}
2. This shows temperature with degree symbol: "22°C"

Weather Icon

WatchMaker uses a grid-based sprite sheet for weather icons — one single PNG containing all 9 icons arranged in a 3×3 grid, not 9 separate files. At render time, Studio crops the correct cell based on the live weather condition.

The 9 condition cells (left-to-right, top-to-bottom):

#	Condition		#	Condition		#	Condition
1	Sunny		2	Small Clouds		3	Cloudy
4	Very Cloudy		5	Light Rain		6	Heavy Rain
7	Storms		8	Snow		9	Fog

To add one:

1. Insert a Complication > Weather Icon — this creates a Conditional Image (image_cond) layer, pre-wired with grid = 3×3 and selector {wc}.
2. Either pick one of the 5 built-in Weather Icon Sets, or upload your own 3×3 grid PNG. When you upload, each cell should be the same size — Studio divides the image into 9 equal cells.
3. The {wc} tag resolves to 1–9 at runtime, selecting which cell to display.

Why this is useful:

• One asset = one file. No filename conventions or missing icons.
• Draw all 9 at once with consistent style/lighting.
• Theme swaps = replacing a single PNG.

Testing: in the Preview Values panel you can force the weather condition to any value 1–9 to eyeball each icon without waiting for real weather changes.

The same mechanism powers Battery Icon layers (selector {bl}) and Moon Phase layers (selector {wmp}). Battery Sets 2 and 4 use a 3×2 grid (6 states) instead of 3×3; Studio configures the grid dimensions automatically based on the set you pick.

Note: {wc} is the 1–9 condition number used for grid selection. The separate {wci} tag returns an OpenWeatherMap-style icon code string (e.g., "01d") and is only useful for text/expression logic, not for picking a grid cell.

High/Low

Add a text layer: H:{wthd} L:{wtld}

Displays: "H:26°C L:18°C"

Animated Elements

Breathing Animation

Use {c_0_100_2_rv} (counts 0-100 over 2 seconds, then reverses) in an Opacity field to create a pulsing/breathing effect.

Rotating Decoration

Set a decorative layer's Rotation to {c_elapsed} * 6 — it completes one full rotation every 60 seconds.

Smooth Entry Animation

Use {c_0_100_2_st} in an opacity or position expression — the layer animates in over 2 seconds when the watch face loads, then stays put.

Theming with User Colors

Make your watch face customizable by users:

1. Use {ucolor} in Color fields instead of hardcoded hex values
2. Set a default theme in Watch Properties (e.g., Ocean, Nature, Sunset)
3. Users can then change colors from the WatchMaker app

Three-Color Theme

• Primary elements (hands, main text): {ucolor}
• Accent elements (complications, highlights): {ucolor2}
• Background details: {ucolor3}

Tri-Color Palette (Studio Pro)

Studio Pro unlocks three coordinated theme colors that users can switch between for a polished, cohesive look.

Reference

Complete Expression Tag List

Time

Tag	Description
{dh}	Hour 1-12
{dh11}	Hour 0-11
{dh23}	Hour 0-23
{dh24}	Hour 1-24
{dhz}	Hour 01-12 (zero-padded)
{dh11z}	Hour 00-11
{dh23z}	Hour 00-23
{dh24z}	Hour 01-24
{dm}	Minute 0-59
{dmz}	Minute 00-59
{ds}	Second 0-59
{dsz}	Second 00-59
{dss}	Milliseconds 0-999
{dssz}	Milliseconds 000-999
{da}	AM or PM
{depoch}	Seconds since epoch
{dtp}	Time as % of 24 hours (0-1)

Date

Tag	Description
{dd}	Day of month
{ddz}	Day of month (zero-padded)
{ddy}	Day of year
{ddw1}	Day of week (1 letter)
{ddw2}	Day of week (2 letters)
{ddw}	Day of week (3 letters)
{ddww}	Day of week (full)
{ddw0}	Day of week (Sun=0, Sat=6)
{ddim}	Days in month
{dn}	Month 1-12
{dnn}	Month 01-12
{dnnn}	Month short name
{dnnnn}	Month full name
{dy}	Year (2 digit)
{dyy}	Year (4 digit)
{dw}	Week in year
{dwm}	Week in month

Next Day

Tag	Description
{ddw1_1}	Next day (1 letter)
{ddw2_1}	Next day (2 letters)
{ddw_1}	Next day (3 letters)
{ddww_1}	Next day (full)

Time Digits

Tag	Description
{dhtt} / {dhto}	Hour (12h) tens / ones
{dh11tt} / {dh11to}	Hour (0-11) tens / ones
{dh23tt} / {dh23to}	Hour (0-23) tens / ones
{dh24tt} / {dh24to}	Hour (1-24) tens / ones
{dmt} / {dmo}	Minute tens / ones
{dst} / {dso}	Second tens / ones

Time Text

Tag	Description
{dht}	Hour as text (1-12)
{dh24t}	Hour as text (1-24)
{dmat}	Minute as text (full)
{dmtt}	Minute text (tens)
{dmot}	Minute text (ones)

Rotation (0-360 degrees)

Tag	Description
{drh}	Hour hand (12h, smooth)
{drh24}	Hour hand (24h, smooth)
{drh0}	Hour hand (12h, no minute adjustment)
{drm}	Minute hand (smooth)
{drs}	Second hand (tick)
{drss}	Second hand (smooth)
{drms}	Millisecond rotation

UTC Time

Tag	Description
{dhutc12}	UTC hour (12h)
{dhutc12z}	UTC hour (12h, zero-padded)
{dhutc24}	UTC hour (24h)
{dhutc24z}	UTC hour (24h, zero-padded)
{dutcoff}	UTC offset

Timezone (tz1, tz2, tz3)

Tag	Description
{tz1t}	Time in timezone
{tz1l}	Location (short)
{tz1ll}	Location (full)
{tz1o}	UTC offset
{tz1om}	Offset in minutes
{tz1dst}	Daylight savings
{tz1rh}	Hour rotation
{tz1rh24}	Hour rotation (24h)
{tz1rm}	Minute rotation

Battery

Tag	Description
{bl}	Level (0-100)
{blp}	Level with %
{br}	Rotation (0-360)
{bc}	Charging status
{btc} / {btf}	Temperature (C/F)
{btcd} / {btfd}	Temperature with degree

Phone Battery

Tag	Description
{pbl}	Level (0-100)
{pblp}	Level with %
{pbr}	Rotation (0-360)
{pbc}	Charging status
{pbtc} / {pbtf}	Temperature (C/F)

Health & Fitness

Tag	Description
{ssc}	Steps
{stsc}	Steps goal
{sscp}	Steps % of goal
{sdst}	Distance
{sdstu}	Distance units
{stdst}	Distance goal
{sdstp}	Distance % of goal
{scal}	Calories
{stcal}	Calories goal
{scalp}	Calories % of goal
{shr}	Heart rate
{sthr}	Heart rate max
{shrp}	Heart rate % of max
{shr_1}	Heart rate (previous)
{shr_2}	Heart rate (2 ago)
{hfc}	Flights climbed

Activity Rings (Apple Watch)

Tag	Description
{ham}	Move (calories)
{htam}	Move goal
{hae}	Exercise (minutes)
{htae}	Exercise goal
{has}	Stand (hours)
{htas}	Stand goal

Weather

Tag	Description
{wt}	Temperature
{wtd}	Temperature with degree
{wth} / {wthd}	High / with degree
{wtl} / {wtld}	Low / with degree
{wm}	Units (C/F)
{wct}	Condition text
{wci}	Condition icon code
{wh} / {whp}	Humidity / with %
{wp}	Pressure
{wr}	Rain (mm)
{wws}	Wind speed
{wwd}	Wind degrees
{wwdb}	Wind bearing (8-point)
{wwdbb}	Wind bearing (16-point)
{wcl}	Cloudiness %
{wl}	Location
{wlu}	Last update

Sun & Moon

Tag	Description
{wsr}	Sunrise time
{wss}	Sunset time
{wsrp}	Sunrise % of 24h
{wssp}	Sunset % of 24h
{wisday}	Is daytime?
{wmp}	Moon phase (1-9)

Hourly Forecast (wf1-wf12)

Tag Pattern	Description
{wf1ht}	Hour +1 temperature
{wf1hci}	Hour +1 condition icon
{wf1hct}	Hour +1 condition text

Daily Forecast (wf0-wf5)

Tag Pattern	Description
{wf1dt}	Day +1 temperature
{wf1dth}	Day +1 high
{wf1dtl}	Day +1 low
{wf1dct}	Day +1 condition text
{wf1dci}	Day +1 condition icon

Sensors

Tag	Description
{scr}	Compass rotation
{sct}	Compass heading
{scb}	Compass bearing (8-point)
{scbb}	Compass bearing (16-point)
{sax} / {say} / {saz}	Accelerometer X/Y/Z
{sgx} / {sgy} / {sgz}	Gyroscope X/Y/Z
{sprs}	Barometric pressure

Calendar (c1-c4)

Tag Pattern	Description
{c1ex}	Event exists?
{c1t}	Title
{c1b} / {c1e}	Begin / end time
{c1bd} / {c1ed}	Begin / end date
{c1br} / {c1er}	Begin / end rotation
{c1bp} / {c1ep}	Begin / end % of 24h
{c1l}	Location
{c1c}	Color
{c1ad}	All day?
{c1cal}	Calendar name

Complications (m1-m4)

Tag Pattern	Description
{m1text}	Text
{m1title}	Title
{m1value}	Value
{m1min} / {m1max}	Min / max

Theme Colors

Tag	Description
{ucolor}	Primary color
{ucolor2}	Secondary color
{ucolor3}	Tertiary color
{ucolor_b}	Primary brightened

Network

Tag	Description
{nc}	Device online?
{ncc}	Cellular connected?

Stopwatch

Tag	Description
{swh}	Hours
{swm}	Minutes
{sws}	Seconds
{swss}	Milliseconds (2 digit)
{swsss}	Milliseconds (3 digit)
{swr}	Running?
{swrm}	Minute rotation
{swrs}	Second rotation

System

Tag	Description
{abright}	Screen is bright?
{adark}	Dark mode?
{around}	Watch is round?
{avol}	Volume (0-100)
{abrt}	Brightness (0-100)
{alat} / {alon}	GPS latitude / longitude
{aalt}	Altitude (meters)
{aname}	Device name
{aos}	Operating system
{aosv}	OS version

Animation Counters

Tag	Description
{c_elapsed}	Seconds since load
{c_0_100_2_st}	0→100 in 2s, stop
{c_0_100_2_rp}	0→100 in 2s, repeat
{c_0_100_2_rv}	0→100 in 2s, reverse

Conditional Expression Syntax

condition ? value_if_true : value_if_false

Operators: ===, !==, >, <, >=, <=

Nesting:

{bl} > 75 ? '4CAF50' : {bl} > 25 ? 'FFC107' : 'F44336'

Keyboard Shortcuts

Shortcut	Action
Cmd+Z	Undo
Cmd+Shift+Z	Redo

Layer Type Quick Reference

Layer	Typical Use	Key Expression
Text	Time, date, data display	{dh23}:{dmz}
Image (hand_h)	Hour hand	Rotation: {drh}
Image (hand_m)	Minute hand	Rotation: {drm}
Image (hand_s)	Second hand	Rotation: {drss}
Ring	Battery/progress arc	Angle: {bl} * 3.6
Progress	Step goal bar	Percent: {sscp}
Markers	Clock tick marks	—
Text Ring	Clock numerals	—
Image Cond	Weather/battery icon	Value: {wci}
Shape	Backgrounds, dividers	—