Documentation

Select and edit

Precise controls for the interface you are running.

In Select mode, click any element to select it. Shift-click adds compatible elements. Repeat a click to cycle through overlapping targets, or use Layers for exact hierarchy navigation. In Interact mode, Option-click temporarily selects an element without leaving interaction mode.

The Inspector exposes only properties that apply to the selected element and can be represented safely. Available controls include:

  • Position, fixed, hug, fill, minimum and maximum sizing, ratio, overflow, alignment, distribution, and linked spacing
  • Typography presets, font properties, line height, letter spacing, alignment, and editable content
  • Project colors, gradients, fills, strokes, opacity, radius, effects, and contrast guidance
  • Accessible names, interaction states, responsive context, and motion values

Numeric fields support keyboard entry and label dragging. Preview undo and redo affect temporary visual changes, not project source.

Use the label to scrub, click the value to type, or choose a mapped project value when available. Effects include drop shadow, inner shadow, layer blur and background blur where the selected source can represent them safely. Unsupported values are not silently converted.

Motion Studio discovers CSS animations, CSS transitions, and Web Animations on the selected element. You can play, pause, replay, loop, change playback speed, scrub the timeline, and edit rendered keyframe tracks before review.

Typography Studio compares Current and Candidate specimens side by side with identical copy, dimensions, settings, and context. It reports loaded-face status, line count, rendered size, and clipping before a mapped font choice enters Review.