The Designer combines a layer list, a live canvas and a focused inspector. Confirm the active Screen, Profile and layer before changing a value.
The workspace#
| Area | Action |
|---|---|
| Layers | Select a layer; Add element, Duplicate or Delete. |
| Canvas | Drag an unlocked element to move it. Hold Shift before pointer-down and drag to resize. |
| Profile | Choose Base or a device override before editing. |
| Screen | Switch between Loading and the separate Post-Loading document. |
| Zoom / Fit / Effects | Inspect, recenter or browse indicator styles. |
| Element Inspector | Appearance, Layout and Animation for the selection. |
| Hide / Lock / Up / Down | Visibility, editing lock and drawing order. |
Middle-mouse drag pans the viewport without changing element data. Ctrl+S saves when handled by the Builder. Ctrl+D and Delete apply when the Designer canvas has focus. Try moving Title, then Undo to verify the selection and reversible change.
Text, typography and color#
Open Appearance > Content, replace the authored title and save. Leave Localization Key empty for direct text, or provide a key resolved by your request's localization callback. Authored Content remains fallback copy.
Use Text for titles/status, Number for percentages/fractions/stages, Tip for collection content, and Countdown for the post-screen timer. A field Reset affects that field or override; Reset selected element has broader scope.
| Group | Controls |
|---|---|
| Typography | Theme/local TMP font, style, size, auto-size bounds, alignment, wrapping and overflow. |
| Color & spacing | Theme/local color, letter spacing and line spacing. |
| Text gradient | Horizontal, Vertical or Four Corners. |
| Outline & shadow | Contrast styling over artwork. |
Use Theme Font keeps an element on design defaults. A local font disables that choice for the element. Set TMP fallback coverage for your languages. Test the longest title/hint, wrapping and sensible auto-size minimums.
Horizontal gradients use Top Left to Top Right; Vertical uses Bottom Left to Top Left. Four Corners uses all four values. Gradient values multiply the base tint; start with white to preserve the gradient colors directly.
Layout and anchors#
- Choose an anchor preset. A normal click preserves the visible rectangle.
- Hold Shift while clicking to set the pivot too; hold Alt to set position too.
- Expand Position & size for precise values.
- Use Left/Center/Right alignment and inspect a phone profile.
Fixed axes show Pos X/Width or Pos Y/Height. Stretched axes show Left/Right or Top/Bottom. Anchors & pivot exposes normalized values; Scale & sizing includes pixel/parent-percent units, min/max and aspect lock. Keep important text and actions inside the safe area. Decorative full-screen art can extend behind it.
Combine animation effects#
- Enable Animation > Primary effect.
- Choose Fade, with trigger Enter.
- Set Timing: duration, delay, speed and easing.
- Add a simultaneous Slide and set its trigger/timing.
- Preview and test Reduced Motion.
Playback includes loop, repeat, reverse, ping-pong and unscaled time. Effect parameters expose distance, typewriter speed/pauses and character scope. Custom tracks target opacity, position, scale, rotation or RGB.
Position offsets and rotation add; scale and opacity multiply. Explicit custom tracks can override their target property. Each effect has its own timing. Enter, Loading, Ready and Exit are different moments. Post screens use Enter/Ready; they do not emit Loading. Typewriter, Wave and Color Sweep can combine with other effects.
Indicators and number formatting#
Open Effects. Add as new indicator creates another layer. Replace selected style changes the selected Indicator. A spinner and a measured progress bar can coexist.
| Family | Styles and settings |
|---|---|
| Measured | Linear, Radial, Segmented, Logo Reveal, Wave Fill, Steps; direction/origin, geometry, count/gaps and sprites. |
| Activity | Spinner, Dots, Wave Dots, Orbit, Pulse, Bounce, Shimmer, Sprite Sequence; speed, radius, spacing, frames/FPS. |
| Text / custom | Text Only uses text/number binding. Custom uses a RectTransform prefab implementing ILoadingIndicator. |
A Number layer supports Percentage, Fraction and Stage, zero to two decimals, Floor/Round/Ceiling, prefix/suffix, stage copy and Unknown Text. Clear the default % suffix for a fraction when appropriate. Final full values are reserved for readiness.
Open Global themes or Theme & fonts for design defaults: colors, TMP font/body size and Reduced Motion. Local overrides remain explicit. For resizable Linear bars, set nine-slice fill/track sprite borders with appropriate size and filtering.
Check: an indicator style changes the appearance; Progress Source supplies the value. Decorative animation or manual progress does not complete unfinished work. Custom indicator scripts do not execute in the Designer canvas.