Sketch AST anatomy

Style Parsing

At the root of the /apps/xlayers/src/app/editor/preview/viewer we can find several UI components of the preview and the core project reside inside /libs which are located different types of Sketch AST parsers and optimisers.

Sketch file anatomy

A Sketch file (*.sketch) is a compressed archive with the following content:

.
+-- pages/
|   *.json
+-- previews/
|   +--preview.png
+-- meta.json
+-- user.json

The meta.json file describes the sketch project:

{
  "commit" : "ebe35af5ba78090fd351ed427ecaafac003e0331",
  "pagesAndArtboards" : {
    "DF58F6C1-4219-4E6B-86D1-3F805B49AD2E" : {
      "name" : "Page 1",
      "artboards" : {

      }
    }
  },
  "version" : 121,
  "fonts" : [
    "Roboto-Regular",
    "Roboto-Medium"
  ],
  "compatibilityVersion" : 99,
  "app" : "com.bohemiancoding.sketch3",
  "autosaved" : 0,
  "variant" : "NONAPPSTORE",
  "created" : {
    "commit" : "ebe35af5ba78090fd351ed427ecaafac003e0331",
    "appVersion" : "59.1",
    "build" : 86144,
    "app" : "com.bohemiancoding.sketch3",
    "compatibilityVersion" : 99,
    "version" : 121,
    "variant" : "NONAPPSTORE"
  },
  "saveHistory" : [
    "NONAPPSTORE.86144"
  ],
  "appVersion" : "59.1",
  "build" : 86144
}

This file also references all pages by their hash under the "pagesAndArtboards" property:

{
  // ...
  "pagesAndArtboards": {
    "<hash>": {
      "name": "<string>",
      "artboards": {}
    }
  },
  // ...
}

The page file include a root object defining the page information and a recursive tree of layers providing data and properties (position, styles, dimensions...) about the actual design produced by SketchApp:

{
  "_class": "String",
  // ...
  "frame": {
    "_class": "String",
    "constrainProportions": "Boolean",
    "height": "Number",
    "width": "Number",
    "x": "Number",
    "y": "Number"
  },
  // ...
  "style": {
    "_class": "style",
    // ...
  },
  "layers": [{
    "_class": "group",
    // ...
    "layers": [{
      // ...
    }]
  }]
  // ...
}

Solid Parsing

In SketchApp, all elements are of type shape which contains a set of points describing each point position and curve parameters that will be described later.

{
  // ...
  "points": [
    // ...
    {
      "_class": "curvePoint",
      // ...
      "point": "{Number, Number}"
    },
    // ...
  ]
  // ...
}

Each cuvePoint have at least the coordinate of the current point represented as {x, y} in the point field. Every point will be linked sequentially by these point in order they are declared in the points array.

Curve

In some cases, the current point can be the beginning; the end of a Bezier curve or between several curves (polybezier). To know if the point is part of the a curve we have the fields hasCurve(From|To) which are simple Boolean. And the fields curve(From|To) applying the respective transform on the control points of the curve.

{
  // ...
  "points": [
    // ...
    {
      "_class": "curvePoint",
      "curveFrom": "{Number, Number}",
      "curveMode": "Number",
      "curveTo": "{Number, Number}"
     // ...
    },
    // ...
  ]
  // ...
}