Exporting design tokens

Formatting your Sketch document

hubble-scripts uses a special way of artboard formatting to extract data from your Sketch document. Before you try exporting any data from your document, please make sure your document adheres to this format.

For a correct example of how to format a Sketch document you can take a look at the Sketch file in the mocks folder.

Exporting tokens using hubble-cli

The easiest way to extract your data is by using hubble-cli:

$ ./hubble-cli "/Users/hubble/Desktop/MyDesign.sketch"
$ cat hubble-data.json

{
  "textStyles": [...],
  ...
}

JSON output format

hubble-scripts lets you easily export the design tokens in your Sketch file to a universal JSON format. This JSON tree is structured in a generic way so it is easily pluggable into any project, and provides the option to map this output to another format.

Every token type is a top-level key in the tree and has an array of tokens as value. You can see the full example output for the mocks in this project:

{
  "textStyles": [
    {
      "token": "text-style",
      "id": "heading1",
      "weight": "bold",
      "size": 48,
      "family": "FiraSans-Bold",
      ...
    }
  ],
  "colors": [
    {
       "token": "color",
      "id": "primary500",
      "variant": 500,
      "name": "powderBlue",
      "red": 160,
      "green": 214,
      "blue": 224,
      "alpha": 1,
      ...
    }
  ],
  "gradients": [...],
  "shadows": [...],
  "borders": [...],
  "fonts": [...],
  "sketchVersion": "53.2"
}

Style Dictionary

The final result of hubble-scripts is a design token file. Our default token format contains all the information gathered from the sketch file. We provide an additional option to export to a style dictionary compatible format, to make use of the transforms of that project to pipe your tokens to a desired platform/language.

Style Dictionary compatibility chart

We are currently generating the following valid Style Dictionary Tokens in the output file:

Token	Type	Status	Notes
font family name	asset	✅	Font file not exported
font size	size	✅
font color	color	✅	Does not reuse existing colors previously defined
font weight		⛔️
color	color	✅	Additionally includes the color name as a comment
gradient colors	color	⛔️
gradient direction		⛔️
gradient position		⛔️
shadow color	color	✅
shadow position		⛔️
shadow spread		⛔️
shadow blur		⛔️
border color	color	✅
border width	size	✅
border radius		⛔️