1.1 .xd File Structure and Key Components - dilitirio/xd-scenegraph-toolkit GitHub Wiki

1.1 .xd File Structure and Key Components

Introduction

A file with the .xd extension is a container for design projects created in Adobe XD. At its core, an .xd file is a standard ZIP archive, which allows access to its internal contents using any standard archiving tool. Inside this archive is a structured set of files and directories that collectively describe all aspects of the design—from graphical elements to interactive prototypes.

The central element is the Scenegraph Description Format—a detailed JSON-based structure that describes the hierarchy and properties of all objects on the artboards. This information is primarily stored in files named graphicContent.agc. Understanding the structure of these files is the key to any programmatic analysis or conversion of .xd projects.

Key Files and Directories Within the Archive

The .xd archive contains a standardized set of components. The most important of these are listed below.

File / Directory Purpose
mimetype A simple text file that defines the precise MIME type of the project: application/vnd.adobe.sparkler.project+dcxucf.
manifest A JSON file that serves as the "table of contents" and also holds configuration for XD's cloud features (e.g., sharing for review and development).
graphicContent.agc The primary JSON file containing the detailed scenegraph description (MIME type application/vnd.adobe.agc.graphicsTree+json). Component-internal interactions are often defined here.
/resources A directory that stores resources shared across the entire project, such as master components (symbols), gradient definitions, and raster images.
/interactions Contains interactions.json, which defines the global prototype flow. This includes the home artboard and artboard-to-artboard transitions. This file may be minimal if all interactions are defined within components.
/renditions A directory that stores auto-generated raster previews of layers and artboards to speed up display within Adobe XD.
/previews A directory containing smaller thumbnail previews of the artboards, which are displayed, for example, in the OS file manager.

Detailed Analysis of Key Files

manifest

This file is the entry point for understanding the project's structure. It does not only contain a map of all contents but also configuration data.

  • Structural Mapping:
    • children: An array of objects describing the main project elements, including the "pasteboard" where all artboards reside.
    • components: An array listing all components (symbols) in the project, their id, and paths to their resources.
    • artboards: An array of objects, where each object provides metadata for a single artboard, including its name and the path to its corresponding directory within the archive.
  • Cloud Feature Configuration:
    • The manifest contains numerous keys prefixed with uxdesign#, such as uxdesign#specSharedURL and uxdesign#specAllowCommentsPrivate. These keys store settings related to Adobe XD's cloud-based "Share for Review" and "Share for Development" features. This makes the manifest not just a structural map but also a configuration file for sharing prototypes and specifications.

graphicContent.agc

This is the core of the entire design project. Each such file contains a scenegraph description in JSON format.

General Structure

The file has the following high-level structure:

{
  "version": "...",
  "children": [
    {
      "type": "artboard",
      "id": "...",
      "artboard": {
        "children": [
           // ... array of nodes (shapes, groups, text, etc.) ...
        ]
      }
    }
  ],
  "resources": {
    "symbols": [
      // ... array of master components, often with interaction logic ...
    ],
    "gradients": {},
    "clipPaths": {}
  }
}
  • version: The version of the scenegraph format.
  • children: An array of top-level nodes, typically containing one or more artboard objects.
  • resources: An object containing definitions for resources used within this scenegraph, primarily master components (symbols).

A full, detailed breakdown of each node type, the styling system, components, and both interaction models will be provided in their respective Wiki sections. This page only describes the overall file structure and the location of the data.