2.5 Node: Group

The Group node in the Adobe XD Scenegraph is a fundamental container element used to organize and manage collections of other nodes (like Shape, Text, other Group nodes, or Component instances). It plays a crucial role in structuring complex designs and applying transformations or styles to multiple elements simultaneously.

Purpose and Role

• Organization: Allows designers to logically group related layers, making the design hierarchy easier to manage.
• Collective Transformations: Transformations (position, scale, rotation) applied to a Group node affect all its children collectively.
• Shared Styling (Limited): While individual child nodes retain their own styles, a Group can have its own opacity or blendMode that affects the rendering of the entire group. Effects (style.effects) can also be applied to groups.
• Facilitating Complex Structures: Used to build up complex UI elements from simpler parts.
• Boolean Operations: A specialized type of group, often referred to as a BooleanGroup, is used to create compound shapes through boolean operations (union, subtract, intersect, exclude) on its child shapes.
• Scrolling Areas: Groups can be configured to act as scrollable viewports for their content.

Key Properties

The Group node inherits all Common Node Properties. Its primary distinguishing feature is its role as a container, defined by its children array.

Property	Type	Description	Example Value (JSON)
type	string	Always "group" for this node type.	"group"
children	array	An array of direct child nodes (e.g., Shape, Text, other Group nodes, syncRef instances) contained within this group.	[ {"type": "shape", ...}, {"type": "text", ...} ]
style	object	Can contain opacity, blendMode, and effects that apply to the entire group and its children. Fill and stroke are usually not applicable.	{"opacity": 0.8, "effects": [ ... ]}
meta.ux.scrollingType	string	Defines if the group is a scrollable area. Values include "vertical", "horizontal", "panning", or "none" (default).	"vertical"
meta.ux.viewportHeight	number	If scrollingType is active, this defines the visible height of the scrollable viewport.	300
meta.ux.viewportWidth	number	If scrollingType is active, this defines the visible width of the scrollable viewport.	200
meta.ux.groupTransform.op	string	For BooleanGroups, this specifies the boolean operation (e.g., "union", "subtract", "intersect", "xor" (exclude)).	"union"

Boolean Groups

A BooleanGroup is a special kind of Group where its child Shape nodes are combined using a specified boolean operation to form a single compound shape. The resulting visual is often represented as a single path.

• The actual boolean operation is defined in meta.ux.groupTransform.op.
• The child shapes contribute to the final combined path.

JSON Example: Basic Group

{
  "type": "group",
  "id": "group-example-id",
  "name": "User Profile Section",
  "transform": { "a": 1, "d": 1, "tx": 50, "ty": 150 },
  "style": {
    "opacity": 0.9,
    "blendMode": "normal"
  },
  "children": [
    {
      "type": "shape",
      "id": "avatar-placeholder-id",
      "name": "Avatar Placeholder",
      // ... shape properties ...
    },
    {
      "type": "text",
      "id": "username-text-id",
      "name": "Username Label",
      // ... text properties ...
    }
  ]
}

JSON Example: Group as a Scrollable Area

{
  "type": "group",
  "id": "scroll-panel-id",
  "name": "Scrollable List",
  "transform": { "a": 1, "d": 1, "tx": 20, "ty": 300 },
  "meta": {
    "ux": {
      "scrollingType": "vertical",
      "viewportHeight": 250 // The visible height of the scroll area
    }
  },
  "children": [
    {
      "type": "shape",
      "id": "long-content-id",
      "name": "Long Scrollable Content",
      "shape": { "type": "rect", "x": 0, "y": 0, "width": 300, "height": 800 }, // Content is taller than viewport
      "style": { "fill": { "type": "solid", "color": { "mode": "RGB", "value": {"r": 240, "g": 240, "b": 240 }}}}
    }
    // ... more items in the scrollable list ...
  ]
}

Understanding Group nodes is essential for parsing the hierarchical structure of a design and for correctly applying inherited transformations and styles. BooleanGroups and scrollable groups represent more specialized uses of this versatile container.