2.2 Node: Artboard

The Artboard node is a fundamental top-level container in the Adobe XD Scenegraph. It represents an individual screen, frame, or distinct design canvas within a project. All visual elements intended for a specific view are typically nested within an Artboard node.

Purpose and Role

• Primary Design Surface: Serves as the main canvas where designers lay out UI elements.
• Defines Viewport: Specifies the dimensions (width, height) of a particular screen or design area.
• Organizational Unit: Helps organize a project into logical screens or sections.
• Prototyping Anchor: Artboards are key elements in creating interactive prototypes, acting as destinations for transitions and links.

Key Properties

The following table details the specific properties commonly associated with an Artboard node, in addition to the Common Node Properties it inherits.

Property	Type	Description	Example Value (JSON)
type	string	Always "artboard" for this node type.	"artboard"
width	number	The width of the artboard in pixels.	1920
height	number	The height of the artboard in pixels.	1080
artboard	object	A nested object that often contains the actual children array for the visual elements placed directly onto the artboard.	{"children": [ ... ]}
children	array	(If not nested under artboard object) An array of direct child nodes (shapes, text, groups, etc.) placed on the artboard.	[ {"type": "shape", ...}, {"type": "text", ...} ]
style	object	Defines the visual style of the artboard itself, typically its background fill.	{"fill": {"type": "solid", "color": {"mode": "RGB", "value": {"r": 255, "g": 255, "b": 255}}}}
meta.ux.viewportWidth	number	Often defines the width of the viewport for responsive designs or scrolling prototypes. Can match width.	1920
meta.ux.viewportHeight	number	Often defines the height of the viewport for responsive designs or scrolling prototypes. Can match height.	1080
meta.ux.gridStyle	object	Contains properties defining layout grids (column grids or square grids) applied to the artboard. Details in section 6.2.	{"type": "layout", "columns": 12, ...}
meta.ux.constraintsDisabled	boolean	If true, responsive constraints for direct children of this artboard are disabled, leading to absolute positioning.	true
meta.ux.markedForExport	boolean	Indicates if the artboard has been marked for export by the user in Adobe XD.	false
meta.ux.hasCustomName	boolean	Indicates if the artboard has been given a custom name by the user (as opposed to a default like "Artboard 1").	true

Structure and Content

An Artboard node primarily serves as a container. Its most important content is the children array (often found within a nested artboard object as shown below), which holds all the visual elements designed for that screen.

JSON Example: Typical Artboard Structure

{
  "type": "artboard",
  "id": "artboard-example-id",
  "name": "Main Screen",
  "width": 375,
  "height": 812,
  "style": {
    "fill": {
      "type": "solid",
      "color": { "mode": "RGB", "value": { "r": 248, "g": 248, "b": 248 }, "alpha": 1 }
    }
  },
  "meta": {
    "ux": {
      "viewportWidth": 375,
      "viewportHeight": 812,
      "constraintsDisabled": true,
      "gridStyle": {
        "type": "layout", // Can also be "grid" for square grids
        "visible": false,
        "columns": 6,
        "gutterWidth": 16,
        "columnWidth": 40,
        "marginLeft": 20,
        "marginRight": 20
        // ... other grid properties
      }
    }
  },
  "artboard": { // Note the nested "artboard" object containing the children
    "children": [
      {
        "type": "shape",
        "id": "shape-id-1",
        "name": "Header Background",
        // ... shape properties ...
      },
      {
        "type": "text",
        "id": "text-id-1",
        "name": "Screen Title",
        // ... text properties ...
      }
      // ... more child nodes ...
    ]
  }
}

The properties within meta.ux.gridStyle define either column layout grids or square grids, which help in aligning elements during design. The viewportHeight and viewportWidth are particularly relevant for scrolling artboards and responsive design previews.

The Artboard node itself also inherits all [Common Node Properties] like transform (which positions the artboard on the global pasteboard), visible, and opacity.