Design Mode
Layers
Layer types, properties, transforms, and blending in the design layer stack.
Every design layer has these core attributes:
Layer Structure
| Attribute | Type | Description |
|---|---|---|
id | string | Auto-generated unique ID |
type | string | Plugin layer type (e.g. typography:text, filter:grain) |
name | string | Display name |
visible | boolean | Whether the layer renders |
locked | boolean | Prevents accidental edits |
opacity | number | 0 (transparent) to 1 (opaque) |
blendMode | string | CSS blend mode (default: normal) |
properties | object | Type-specific properties |
transform | object | Position, size, rotation, scale |
Transforms
| Property | Type | Default | Description |
|---|---|---|---|
x | number | 0 | X position (pixels) |
y | number | 0 | Y position (pixels) |
width | number | canvas width | Layer width |
height | number | canvas height | Layer height |
rotation | number | 0 | Rotation in degrees |
scaleX | number | 1 | Horizontal scale |
scaleY | number | 1 | Vertical scale |
anchorX | number | 0.5 | Anchor X (0=left, 1=right) |
anchorY | number | 0.5 | Anchor Y (0=top, 1=bottom) |
Blend Modes
All 16 CSS blend modes are supported:
normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity
Layer Ordering
Layers render bottom-to-top. Index 0 is the bottom layer (renders first, closest to the algorithm output). The top layer renders last and appears on top.
Use design_reorder_layers to change a layer's position in the stack.
Visibility and Locking
- Hidden layers (
visible: false) are skipped during compositing but retained in the definition - Locked layers (
locked: true) cannot be modified through update tools — unlock first