Browse documentation

Watch face

Editor features

Add layers and data, style your face, preview display modes, and set rules and on-watch controls.

On this page

Find the controls

  • Layers, left: Add, select, reorder, hide, or lock the items in your design.
  • Canvas, middle: See the watch face and move or resize items.
  • Inspector, right: Change the selected item’s content, appearance, and position. Select the background for face-wide settings.
  • Top bar: Rename the project, create a device version, save a template, preview, or build.
  • Canvas controls: Change zoom, fit the face, and turn grid, snap, or guides on while editing.
  • Preview controls: In Preview, use the draggable panel on the canvas to run realistic scenarios, change playback speed, and inspect simulated data.

A layer is one item, such as the time, an image, or a step count. A saved layer can contain several editable parts while appearing as one named layer in the list. A complication is a layer that displays watch data.

Add time, data, and artwork

Choose Add element, then search or browse a category. Choose an element to add it, then select its layer to edit it. The list shows elements supported by the selected device.

  • Time & date: Digital time, analog hands, and date layouts.
  • Health: Heart rate, Body Battery, stress, and recovery.
  • Activity: Steps, distance, calories, climbed or descended floors, move bar, moderate or vigorous minutes, and wheelchair pushes.
  • Weather: Current conditions plus precipitation, UV, wind, cloud cover, visibility, and hourly forecasts.
  • System: Battery, phone connection, notifications, status indicators, and configurable complications.
  • Visuals: Text, shapes, icons, images, goal progress, and history charts.
  • My kits and assets: Layers you saved for reuse. Adding one creates an independent copy in the current face.

For a data layer, choose its source and presentation in the inspector. Available styles include a value, labeled text, ring, or bar. Formatting controls let you adjust labels and units where supported.

Goal progress shows progress toward a fixed value or, where Garmin exposes it, the wearer’s current device goal. History chart shows sensor history as a line or bar chart. Sources and options depend on the watch and the selected element.

Use Awake motion for a restrained floating effect while the wearer is looking at the watch. Motion stops in always-on, sleep, and battery-saver states, and the static authored position remains visible.

Add an image

  1. Add an Image from Visuals.
  2. Choose Upload image in the inspector.
  3. Select a PNG, JPEG, or WebP file under 5 MB.
  4. Set its size and position. Use Change image to replace it.

Studio resizes and stores the image in the project. If the converted image is too large, reduce its dimensions or detail and upload it again.

Add a day/evening image pair

In Add element → Visuals, choose Day/evening image pair. Add a day image and an evening image, then set when daytime starts and ends. The pair uses the watch’s local clock and can cross midnight. Preview both images before adding them. Studio inserts two image layers together, so one Undo removes the pair.

Arrange and style layers

Select a layer on the canvas or in Layers. Drag to move it, or enter precise values in Position. Resize with the handles or dimension controls. Change text styling and colors in the inspector.

Use Grid, Snap, and Guides to line up items. Zoom changes your working view, not the size of the final watch face.

  • Reorder layers to move an item in front of or behind another.
  • Lock finished layers to avoid moving them by accident.
  • Hide a layer to compare the design without it.
  • Select multiple layers to move, resize, or align them together.
  • Use Duplicate, Undo, and Redo when trying variations.

Select one or more layers in Layers and choose Save selected layers to reuse them later. The item appears under My kits and assets and in Projects. An image layer with conditional rules makes the saved item a Dynamic asset; other selections are Layer kits. An inserted saved item uses one layer slot even when it has several parts. Grouped rows show a layer-kit badge beside the name. Select the row to move, reorder, hide, duplicate, or delete it together; open a part in the inspector to edit it individually. A face supports up to 16 layer slots and 32 rendered parts.

Saved layers keep their full layout when reused on another watch. Studio checks required functionality and reports if the placed result clips the target display.

Check the design at actual watch size. Keep small text away from busy artwork and leave space for longer dates and numbers.

Preview time and data

Choose Preview to see the face without editing panels. A draggable preview panel appears on the canvas; on smaller screens, it becomes a resizable bottom panel. Choose a scenario such as Typical day, Active day, Charging, Battery draining, Low battery, or a missing and disconnected data state. Play, pause, restart, or accelerate the scenario to watch its related values change together. The canvas toolbar remains available for preview-safe controls such as zoom and display size.

Time and date use your device’s local clock. They remain live while editing and when Preview starts. If you manually change a time or date sample in the editor, Studio pauses the live clock until you turn Live clock back on. Use the selected data field controls to inspect a precise value or missing-data fallback. Check wide digits, long labels, empty values, goal limits, display modes, and time-based rules.

Apart from local time and date, Preview data is simulated. It does not read health or activity history. Real readings depend on the watch, sensors, and permissions, and the preview does not measure actual battery use or fully reproduce Garmin’s rendering.

Design display modes

Choose a mode in the canvas footer, then edit its layout. Available modes depend on the device.

  • Normal: The main watch face.
  • AOD: The always-on or low-power display. Keep AMOLED layouts dim and simple; review the design checks.
  • Low: A separate layout for low battery. Select the background and set Low battery threshold (%) under Power modes.
  • Night: A separate night layout. Select the background, enable Night layout, and choose scheduled hours or Do Not Disturb, where supported.

Modes inherit a layout until you customize them. Use Mode settings → Reset to initial design to remove a mode’s overrides. In automatic mode selection, low battery takes priority over Night. A clock-time appearance rule uses the local clock within a layout; it does not switch the watch into Night mode.

Change appearance with rules

Rules change a layer’s color or visibility when a condition is met. For example, a battery layer can turn red when the battery is low.

  1. Select the layer and open Rules in the inspector.
  2. Choose a suggested rule or Add custom rule.
  3. Set the data source, condition, and effect.
  4. Change the simulated value to check the result.

Rules run from top to bottom. The last matching color wins; a matching Hide rule always hides the layer. Missing data keeps the base appearance. Check rule-priority messages if two rules can match at once.

Time windows include their start time and exclude their end time. An end time earlier than the start continues into the next day. Use the rule’s preview time to check both sides of a boundary.

Enable controls on the watch

Select the background and open Watch customization. On a supported watch, turn on Allow changes on watch, then choose what the wearer may change:

  • Choose colors adds a watch style that can replace layers assigned to the Accent and Data color roles. Fixed-color layers keep their designed color.
  • Choose night layout lets the wearer select the Night layout manually. Enable and design a Night layout first.
  • Data fields controls the default and allowed sources for each visible text complication. The designed source remains available and is used as the fallback unless you choose Show unavailable.

Use Preview to try the configured style, colors, and data choices before building. These preview choices do not change the design or the wearer’s saved watch settings.

Watch customization appears only for Garmin models that expose the native watch-face configuration feature. It is device-specific, not guaranteed by the Connect IQ API version alone. When you create a version for another watch, Studio preserves the authored configuration, disables it where unsupported, and omits individual data choices the target cannot provide. Check the compatibility summary before building.

Review permissions and compatibility

Select the background and find Compatibility in the inspector. The summary shows whether the current watch is supported, the required Connect IQ API level, and any permissions, restrictions, or automatic fallbacks. Choose Review for the full inspector.

Use Add comparison device to open the device picker above the inspector. Add watches to compare their status, API requirement, issues, and fallbacks without changing the project’s current target. Remove comparison watches when you are done. For an issue tied to a layer, choose Show to close the inspector and return to that layer.

After installation, open the face’s settings on the watch to choose a style, colors, or data fields. The exact menu path varies by model. Appearance rules continue to use their configured data sources; changing a displayed data field does not retarget its rules.

For supported data layers and watches, enable Interaction → Hold to open to open the related watch information by holding that field.

Keyboard shortcuts

Use Command on macOS or Ctrl on Windows for the shortcuts below. Select a layer first; text fields use normal text-editing shortcuts while focused.

  • Command/Ctrl + C, X, V: Copy, cut, or paste layers.
  • Command/Ctrl + D: Duplicate the selection.
  • Delete or Backspace: Delete the selection.
  • Command/Ctrl + ] or [: Move a layer forward or backward. Add Shift to move it to the front or back.
  • Escape: Leave Preview.
  • Command/Ctrl + Enter: Open the build flow in desktop.

Save and check your design

Changes save locally. Use Save as template for a reusable full face or Save selected layers for a reusable part. Export your library for a separate backup.

Open the editor’s design checks and address errors before building. Review warnings about layout, device support, and power modes. Then follow the step-by-step how-to guides or set up the desktop build tools.

Up nextHow-to guides