Skip to content
English
Submit a request
  • There are no suggestions because the search field is empty.

Builder 2.0 UX: Hover Live Preview & Numeric Field Nudge

Hover effects preview once on selection; arrow keys enable fine-tuned position and size adjustments

1. Purpose & Scope

This article documents two Builder 2.0 UX improvements shipped in Tiled v55.0.1: the Hover Effect Live Preview (TD-5903), which plays a hover animation once on tile selection for faster iteration, and the Numeric Field Keyboard Nudge (TD-6101), which enables arrow key increment and decrement in position and size input fields.

Scope: All Tiled users with Builder 2.0 access (Editor role and above).

2. Feature 1: Hover Effect Live Preview (TD-5903)

Tiles in Builder 2.0 can be configured with hover effects — visual state changes (opacity, scale, color, border) that trigger when a viewer hovers over the tile in the Viewer or Share Link. Prior to v55.0.1, creators had to switch to Preview mode and manually hover over the tile to see the effect, making iteration slow.

Before v55.0.0

To preview a hover effect, the creator had to open Preview mode, navigate to the correct page, and manually hover over the tile with the mouse cursor.

After v55.0.1

When a tile with a configured hover effect is selected in the Builder, the hover animation plays once automatically, giving the creator an immediate preview of the effect without leaving the Builder.

Trigger

The preview plays once each time the tile is selected in the Builder. Selecting the tile again replays the preview.

Scope

Builder 2.0 only. Builder 1.0 hover preview behavior is unchanged.

 

Note: The in-Builder hover preview plays once on selection and does not loop. To see the looped or repeated effect, use Preview mode. The Builder preview is intended for quick visual confirmation, not a full interaction simulation.

3. Feature 2: Numeric Field Keyboard Nudge (TD-6101)

Numeric input fields in the Builder 2.0 Properties panel — including X position, Y position, width, height, and other numeric properties — now support arrow key increment and decrement for fine-tuned adjustments.

Up Arrow

Increases the field value by 1 unit (or the field's configured step value).

Down Arrow

Decreases the field value by 1 unit (or the field's configured step value).

Shift + Up

Increases the field value by 10 units (10× standard step).

Shift + Down

Decreases the field value by 10 units (10× standard step).

Applies To

All numeric input fields in the Builder 2.0 Properties panel when the field has keyboard focus. Click or Tab into the field, then use arrow keys.

This behavior matches the keyboard nudge standard used in most professional design tools (Figma, Sketch, Adobe XD), making Builder 2.0 feel consistent for designers familiar with those workflows.

4. QA Validation

QA Scope: Builder 2.0 hover/hotspots and numeric nudge were included in the v55.0.1 QA scope. Hover preview was tested across all tile types with hover effects configured. Arrow key nudge was tested in X, Y, width, and height fields.

5. Change History

v1.0 — December 9, 2025

Initial article. Both features shipped in Tiled v55.0.1 (TD-5903, TD-6101).