2.4 Node: Text

The Text node in the Adobe XD Scenegraph represents any textual element within the design. This can range from single-line labels to multi-line paragraphs with rich text formatting. Understanding its structure is key to accurately reproducing typography in any target application.

Purpose and Role

• Content Display: Primarily used to display static or dynamic textual information.
• Rich Text Support: Allows for complex formatting within a single text block, including different fonts, sizes, colors, and styles applied to various segments of the text.
• Semantic Information: Text content often carries significant semantic meaning within the UI.

Key Structure

A Text node typically contains two main objects that define its content and appearance:

1. text: Defines the actual text content and its paragraph/character level structure.
2. style: Defines the visual appearance of the text, such as font, color, and basic text attributes.

{
  "type": "text",
  "id": "text-example-id",
  "name": "Example Text Label",
  "transform": { "a": 1, "d": 1, "tx": 100, "ty": 200 },
  "text": {
    // ... text content and structure ...
  },
  "style": {
    // ... font, fill (color), text attributes ...
  }
}

The Text node also inherits all Common Node Properties.

The text Object: Content and Structure

The text object details the textual content and its formatting.

Property	Type	Description	Example Value (JSON)
rawText	string	The plain, unformatted string content of the text node.	"Hello World"
paragraphs	array	An array of paragraph objects. Each paragraph can contain multiple styleRuns. Essential for rich text.	[ { "lines": [ ... ], "styleRuns": [ ... ] } ]
textAlign	string	Horizontal alignment of the text. Known values: "left", "center", "right", "justify".	"center"
lineAlign	string	Vertical alignment of lines within the text frame (observed in some XD versions). Known values: "leading" (aligns to the top/baseline).	"leading"
frame	object	Describes the text box's sizing behavior.	{"type": "auto-height"} or {"type": "auto-width"}
frame.type	string	Defines how the text frame adapts to content. Common values: "auto-height" (fixed width, height adjusts), "auto-width" (fixed height, width adjusts), or it might define fixed width and height.	"auto-height"

paragraphs and styleRuns

The paragraphs array is key to understanding rich text formatting.

• Each object in the paragraphs array represents a single paragraph.
• Each paragraph object contains a styleRuns array.
• Each object in styleRuns defines a segment of text (length) and the specific style (font, color, etc.) applied to that segment.

JSON Example: text object with styleRuns

"text": {
  "rawText": "Bold Text then Regular Text",
  "textAlign": "left",
  "frame": { "type": "auto-width" },
  "paragraphs": [
    {
      "lines": [ // Array of lines, each line is an array of segments.
        [
          { "x": 0, "y": 0, "text": "Bold Text " }, // x,y relative to paragraph origin
          { "x": 100, "y": 0, "text": "then Regular Text" }
        ]
      ],
      "styleRuns": [
        {
          "length": 10, // Length of the text segment "Bold Text "
          "style": {
            "font": { "family": "Arial", "style": "Bold", "size": 24, "postscriptName": "Arial-BoldMT" },
            "fill": { "type": "solid", "color": { "mode": "RGB", "value": { "r": 0, "g": 0, "b": 0 } } }
            // ... other text attributes like underline, strikethrough ...
          }
        },
        {
          "length": 18, // Length of the text segment "then Regular Text"
          "style": {
            "font": { "family": "Arial", "style": "Regular", "size": 24, "postscriptName": "ArialMT" },
            "fill": { "type": "solid", "color": { "mode": "RGB", "value": { "r": 50, "g": 50, "b": 50 } } }
          }
        }
      ]
    }
  ]
}

The style Object for Text Nodes

The style object at the top level of a Text node often defines the default style for the entire text block if no styleRuns override it, or it can sometimes be absent if all styling is handled by styleRuns.

Property	Type	Description	Example Value (JSON)
font	object	Defines the default font properties.	{"family": "Roboto", "style": "Regular", "size": 16, "postscriptName": "Roboto-Regular"}
font.family	string	The font family name.	"Roboto"
font.style	string	The font style (e.g., "Regular", "Bold", "Italic", "Light", "Medium").	"Bold"
font.size	number	The font size in points.	16
font.postscriptName	string	The PostScript name of the font, crucial for precise font matching.	"Roboto-Bold"
fill	object	Defines the text color. Structure is the same as shape fills.	{"type": "solid", "color": {"mode": "RGB", "value": {"r": 0, "g": 0, "b": 0}}}
textAttributes	object	Contains additional text styling attributes.	{"lineHeight": 24, "letterSpacing": 0.5, "underline": false}
textAttributes.lineHeight	number	The line height (leading) in points.	24
textAttributes.letterSpacing	number	The letter spacing (tracking).	0.5
textAttributes.underline	boolean	Indicates if the text is underlined.	false
textAttributes.strikethrough	boolean	(Observed) Indicates if the text has a strikethrough.	false
textAttributes.textTransform	string	(Observed) Case transformation, e.g., "uppercase", "lowercase".	"uppercase"

Interpreting text nodes, especially those with styleRuns, requires careful parsing to reconstruct the rich text formatting accurately. The PostScript name of fonts is generally the most reliable identifier for font matching across different platforms.