Use these guides when you know what you want to do but are not sure where the control lives. Each workflow starts from an open project in the editor unless it says otherwise.

Make a simple digital watch face

Open Projects and choose New project, or open Marketplace and choose Use template on a simple design.
Rename the project in the top bar.
Select Background in the Layers list and choose a face color in the inspector.
Choose Add element → Time & date → Digital time.
Drag the time layer on the canvas, or enter exact X and Y values in Position.
Use Typography and Appearance in the inspector to set font size, alignment, and color.
Choose Add element again and add a date, battery, or steps layer.
Choose Preview and check 09:00, 21:00, long dates, and empty data values.
Return to the editor, open design checks, and fix blocking issues before building.

Start with the time and one or two data layers. Add decoration after the core information fits comfortably.

Add and edit a data layer

Choose Add element in the left rail.
Browse a category such as Health, Activity, Weather, or System.
Select a layer type, such as heart rate, steps, battery, weather condition, or a complication.
Select the new layer in Layers.
In the inspector, choose the source, presentation, label, units, and formatting options that appear for that layer.
Use the footer simulation control to try realistic values while editing.
Choose Preview to open the floating preview controls. Use the quick 09:00 and 21:00 clock buttons, sample values, and Preview unavailable when the selected layer supports unavailable data.

Available sources and presentations depend on the selected watch. If an option is missing, check the device target and design checks.

Move, resize, and align layers

Select a layer on the canvas or in Layers.
Drag it on the canvas to move it.
Use corner handles to resize supported layers.
Enter exact X, Y, width, or height values in the inspector when you need precision.
Turn on Grid, Snap, or Guides from the canvas controls.
Select multiple layers in Layers with Shift or Command/Ctrl, then use alignment controls in the inspector.
Lock finished layers so they do not move by accident.

Zoom changes only your working view. It does not change the final size on the watch.

Reorder, hide, or lock layers

Open Layers on the left.
Drag a row by its handle to change draw order.
Use the visibility button to hide a layer while comparing layouts.
Use the lock button when a layer should remain in place.
Right-click a layer or use the inspector actions for duplicate, delete, copy, cut, paste, and layer order commands.
Hovering a canvas layer highlights the matching layer row. Hovering the row highlights the canvas without adding a row outline.

If a layer is missing in the preview, check whether it is hidden manually or hidden by a rule. Preview-hidden rows show a small status dot with the reason.

Save selected layers as a reusable kit

Select one or more layers in Layers or on the canvas.
Choose Save selected layers at the top of the layer rail.
Name the saved item.
Confirm the save.
Find it later in Projects and in Add element → My kits and assets.

A saved group appears as one named row in the layer list with a layer-kit badge. Select the row to move, reorder, hide, duplicate, or delete the group together. Open an individual part from the inspector when you need to edit just one piece.

Image layers with conditional rules are saved as Dynamic assets. Other saved selections are Layer kits. Adding a saved item to another face creates an independent copy.

Use a layer kit or dynamic asset

Choose Add element.
Open My kits and assets.
Select the saved item.
Move it on the canvas or use the inspector to adjust its position.
If Studio warns that part of the saved item may be clipped, resize or reposition it for the current watch.
Edit individual parts from the inspector when the saved item contains multiple layers.

Saved items preserve their relative layout, but every watch has different screen dimensions. Always preview on the target device.

Add a day and evening image pair

Choose Add element → Visuals → Day/evening image pair.
Add the day image.
Add the evening image.
Set the daytime start and end.
Preview both images in the dialog.
Add the pair to the face.
Use preview clock controls at 09:00 and 21:00 to verify the switch.

The pair uses local watch time and can cross midnight. Studio inserts two image layers together, so one Undo removes the pair.

Hide a layer at night

Select the layer.
Open Rules in the inspector.
Choose Add custom rule.
Set the source to clock time.
Set the condition for the evening or night range.
Set the effect to Hide.
Use preview clock controls to check times before, during, and after the range.

Time windows include the start and exclude the end. If the end time is earlier than the start time, the rule continues into the next day.

Change color when a value crosses a threshold

Select the data layer, such as battery, steps, or heart rate.
Open Rules.
Choose a suggested rule or Add custom rule.
Pick the data source and comparison.
Enter the threshold.
Set the effect to a color change.
Simulate values below, at, and above the threshold.

Rules run from top to bottom. The last matching color wins; any matching hide rule hides the layer.

Preview unavailable data

Select a numeric data layer, such as battery, steps, heart rate, or another supported metric.
Choose Preview.
In the floating preview controls, turn on Preview unavailable.
Check whether the layer falls back to a placeholder, hides, or shows fallback artwork.
Add or adjust rules if missing data should change visibility or color.

Use unavailable previews for fallback art and data sources that may not be present on every watch or at every moment.

Create a night layout

Select Background.
Open Night settings in the inspector.
Enable the night layout.
Choose scheduled hours or Do Not Disturb behavior where supported.
Switch the editor mode to Night.
Edit the night layout: dim colors, simplify artwork, and keep core information readable.
Preview the night layout and check rules that also use clock time.

Night mode is a separate display layout. A clock-time rule changes a layer inside the current layout; it does not switch the watch into Night mode by itself.

Optimize always-on or low-battery layouts

Switch the editor mode to AOD or Low.
Keep the layout simple and remove decorative layers that are not needed.
Use dim colors on AMOLED always-on layouts.
Select Background and check Power modes for low-battery settings.
Review design checks for power-mode warnings.
Preview the layout and compare it with Normal mode.

Modes inherit the normal layout until you customize them. Use Mode settings → Reset to initial design if you want to start over for a mode.

Build and install a face

Finish the design and fix blocking design checks.
Use Dial Studio desktop for builds and installs.
Complete build setup until Studio reports Build environment ready.
Choose Build in the editor.
Review the target watch and start the build.
When the build finishes, choose Continue to Install, or open Projects → Builds later.
Connect the watch with a data-capable USB cable.
Choose Install on watch and keep the cable connected until Studio reports success.
Apply the new face from the watch’s Watch Face menu.

Browser design is enough for editing and previewing. Building and USB transfer require the desktop app.