Multi-Selection Spacing

Overview

When you select multiple objects (or a single frame/group with multiple direct children), you can set a fixed horizontal or vertical spacing value:

• From the right panel in the Distribute section.
• Directly on canvas using smart spacing drag handles (Figma-style).

Both interaction paths call the same editor API and validation logic.

Panel Controls

In multi-selection mode, the Distribute section shows numeric inputs:

• Horizontal: gap between grouped columns.
• Vertical: gap between grouped rows.

If spacing is not uniform, the field shows Mixed.

Smart Spacing Handles

Smart handles appear only when spacing is currently uniform on an axis:

• A magenta spacing line is shown for each adjacent gap.
• A draggable handle appears on each spacing line.
• Dragging any handle updates the shared spacing value for the whole selection.
• Dragging updates object positions continuously.
• A numeric value label follows the handle during drag.
• Releasing the drag commits a single undo/redo history entry.
• For direct children of the same auto layout container, drag writes back to the container spacing (spacing or wrap gap) and triggers auto layout relayout.

When spacing is mixed on an axis:

• A normalize icon appears at the selection bottom-right corner.
• ||| indicates horizontal spacing normalization.
• === indicates vertical spacing normalization.
• Clicking the icon averages current gaps and applies one unified spacing value.

API

Use editor APIs for external integrations:

editor.setSelectedObjectsSpacing('horizontal', 24)
editor.setSelectedObjectsSpacing('vertical', 16)

const spacing = editor.getSelectedObjectsSpacing('horizontal')
const metrics = editor.getSelectedObjectsSpacingMetrics('vertical')

Validation Rules

• Direction must be 'horizontal' or 'vertical'.
• Spacing must be a finite number.
• Supported spacing range is -1000000 to 1000000.

Invalid API inputs throw typed errors.

Interactive Demo

For an operable docs demo (panel-style input + on-canvas handle drag), see:

• /docs/guide/smart-spacing