2.3 Node: Shape

The Shape node is one of the most fundamental visual elements in the Adobe XD Scenegraph. It is a versatile node used to represent all vector graphics, from simple geometric primitives like rectangles and ellipses to complex, freeform paths.

Purpose and Role

• Vector Graphics Foundation: All vector drawings, icons, and graphic elements are represented as Shape nodes or collections of them.
• Styling Target: Shape nodes are primary targets for applying visual styles, including fills, strokes, and various effects.
• Building Block: They serve as basic building blocks for more complex UI elements and components.

Key Structure

A Shape node typically consists of two main objects:

1. shape: Defines the geometry of the shape.
2. style: Defines the visual appearance (fill, stroke, effects).

{
  "type": "shape",
  "id": "shape-example-id",
  "name": "Example Shape",
  "transform": { "a": 1, "d": 1, "tx": 100, "ty": 100 },
  "shape": {
    // ... geometry definition ...
  },
  "style": {
    // ... fill, stroke, effects ...
  }
}

The Shape node also inherits all Common Node Properties.

The shape Object: Geometry Definition

The shape object within a Shape node defines its geometric form. The most important property here is type, which specifies the kind of geometric primitive.

Common shape.type Values and Their Properties

1. rect (Rectangle)

Defines a rectangle, potentially with rounded corners.

Property	Type	Description	Example Value
type	string	Always "rect".	"rect"
x	number	X-coordinate of the top-left corner.	0
y	number	Y-coordinate of the top-left corner.	0
width	number	Width of the rectangle.	200
height	number	Height of the rectangle.	100
r	array	Array of 4 numbers for corner radii (top-left, top-right, bottom-right, bottom-left). Can be a single number if all radii are equal.	[10, 10, 10, 10] or 10

JSON Example (rect):

"shape": {
  "type": "rect",
  "x": 0,
  "y": 0,
  "width": 200,
  "height": 100,
  "r": [10, 0, 10, 0]
}

2. ellipse

Defines an ellipse or circle.

Property	Type	Description	Example Value
type	string	Always "ellipse".	"ellipse"
cx	number	X-coordinate of the center.	75
cy	number	Y-coordinate of the center.	50
rx	number	Radius along the x-axis.	75
ry	number	Radius along the y-axis.	50

JSON Example (ellipse):

"shape": {
  "type": "ellipse",
  "cx": 75,
  "cy": 50,
  "rx": 75,
  "ry": 50
}

3. path

Defines a custom shape using an SVG-like path definition string.

Property	Type	Description	Example Value
type	string	Always "path".	"path"
path	string	SVG-compatible path data string.	"M0,0 L100,100 L0,100 Z"
winding	string	(Optional) Winding rule, e.g., "evenodd".	"evenodd"

JSON Example (path):

"shape": {
  "type": "path",
  "path": "M0,0 C30,80 70,80 100,0 Z"
}

4. line

Defines a straight line segment.

Property	Type	Description	Example Value
type	string	Always "line".	"line"
x1	number	X-coordinate of the starting point.	0
y1	number	Y-coordinate of the starting point.	0
x2	number	X-coordinate of the ending point.	150
y2	number	Y-coordinate of the ending point.	0

JSON Example (line):

"shape": {
  "type": "line",
  "x1": 0,
  "y1": 0,
  "x2": 150,
  "y2": 0
}

5. polygon

Defines a regular polygon.

Property	Type	Description	Example Value
type	string	Always "polygon".	"polygon"
n	number	Number of sides of the polygon.	6
points	array	Array of point objects {x, y} for vertices. Usually calculated by XD based on n and size.	[ {"x":50,"y":0}, ... ]
cornerRadii	array	(Optional) Array of corner radii values.	[5, 5, 5, 5, 5, 5]

JSON Example (polygon):

"shape": {
  "type": "polygon",
  "n": 6, // Hexagon
  "points": [ /* ... array of {x,y} points ... */ ]
  // cornerRadii might also be present
}

6. compound

Defines a compound shape created by boolean operations on child shapes. This is typically nested within a BooleanGroup (a specialized Group node). The shape object itself might be minimal for a compound shape node, as the geometry is derived from its children and the boolean operation.

Property	Type	Description	Example Value
type	string	Often "path" for the resulting compound geometry.	"path"
path	string	The resulting SVG-like path of the compound shape.	"M ... Z"

The actual boolean operation (e.g., "union", "subtract") is usually defined in the parent BooleanGroup's meta.ux.groupTransform.op property.

The style Object for Shapes

The style object for Shape nodes is critical and typically contains:

• fill: Defines how the shape is filled.
• stroke: Defines the outline of the shape.
• effects: An array of visual effects like shadows or blurs. JSON Example: style for a Shape

"style": {
  "fill": { "type": "solid", "color": { "mode": "RGB", "value": { "r": 255, "g": 99, "b": 71 } } },
  "stroke": { "type": "solid", "width": 2, "color": { "mode": "RGB", "value": { "r": 0, "g": 0, "b": 0 } } },
  "effects": [
    { "type": "dropShadow", "visible": true, "params": { /* ... shadow params ... */ } }
  ]
}

The specific parameters for fills, strokes, and effects are detailed in their respective Wiki sections.