Layers

Group Layer

Group layers are containers that hold multiple child layers. When you transform a group, all children move, scale, and rotate together. Groups can be nested for complex compositions.

Example

group-layer.json

{
  "type": "group",
  "id": "group-1",
  "name": "Header Group",
  "visible": true,
  "locked": false,
  "expanded": true,
  "baseWidth": 0.8,
  "baseHeight": 0.3,
  "widthMode": "hug",
  "heightMode": "hug",
  "layoutMode": "column",
  "children": [
    {
      "type": "text",
      "id": "text-1",
      "name": "Title",
      "content": "Welcome",
      ...
    },
    {
      "type": "text",
      "id": "text-2",
      "name": "Subtitle",
      "content": "to Efecto",
      ...
    }
  ],
  "transform": {
    "x": 0,
    "y": -0.3,
    "width": 1,
    "height": 1,
    "rotation": 0,
    "opacity": 1
  }
}

Properties

Property	Type	Description
`children`	Layer[]	Array of child layers (any layer type)
`expanded`	boolean	Whether the group is expanded in the layers panel
`baseWidth`	number	Normalized width (0-1 relative to artboard)
`baseHeight`	number	Normalized height (0-1 relative to artboard)
`widthMode`	"hug" \| "fixed"	Horizontal sizing mode for flex groups
`heightMode`	"hug" \| "fixed"	Vertical sizing mode for flex groups

Transform Behavior

Group transforms are applied to all children:

Position (x, y) - Children move relative to the group's position
Scale (width, height) - Children scale proportionally with the group
Rotation - Children rotate around the group's center point
Opacity - Group opacity multiplies with child opacity

Base Dimensions

The baseWidth and baseHeight properties store the group's actual size in normalized coordinates (0-1 relative to the artboard). These are separate from transform.width and transform.height, which act as scale multipliers.

baseWidth: 0.5 means the group spans half the artboard width
transform.width: 2 would then double that to fill the full artboard
Child positions are relative to the group's base dimensions
Flex groups default to widthMode: "hug" and heightMode: "hug"

Nested Groups

Groups can contain other groups, allowing for complex hierarchical compositions. Transforms cascade down the hierarchy.

nested-groups.json

{
  "type": "group",
  "id": "outer-group",
  "name": "Card",
  "children": [
    {
      "type": "group",
      "id": "inner-group",
      "name": "Card Content",
      "children": [
        { "type": "text", "id": "title", "content": "Title", ... },
        { "type": "text", "id": "body", "content": "Body text", ... }
      ],
      ...
    },
    {
      "type": "image",
      "id": "card-image",
      "mediaUrl": "https://...",
      ...
    }
  ],
  ...
}

Common Use Cases

UI Components - Group related elements (icon + text, card with title and image)
Animations - Animate multiple elements together by animating the group transform
Organization - Keep complex compositions organized in the layers panel
Reusable templates - Create reusable compositions that can be positioned and scaled