Browse documentation

Design

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, alignment aids, simulated values, and display mode.

A layer is one item, such as the time, an image, or a step count. 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, floors, and active minutes.
  • Weather: Conditions, temperature, and other available weather fields.
  • System: Battery, notifications, status indicators, and configurable complications.
  • Visuals: Text, shapes, icons, images, goal progress, and history charts.

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 data goal. History chart shows sensor history as a line or bar chart. Sources and options depend on the watch and the selected element.

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.

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.

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. Use Simulate time and the data simulation controls to test different values. Check wide digits, long labels, empty values, and goal limits.

Preview data is simulated. Real readings depend on the watch, sensors, and permissions. The preview does not measure 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. Always-on and low-battery modes take priority over the night layout.

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.

Enable controls on the watch

Select the background and enable On-watch customization → Enable customization. After installation, Garmin’s watch-face settings can change text complication sources and colors, or select the night layout. Rules continue to use their configured data sources.

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 starting point, and export projects 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 set up the desktop build tools.

Up nextSet up for local builds