Sketch Design Tokens Exporter

With this plugin you can export to your desktop a design-tokens.json file compatible with Amazon Style Dictionary.

The plugin extracts from your current opened Sketch document all your Color Variable, Layer Styles and Text Styles.

It also add some extra layer of Design Tokens, such as:

• Shadows
• Font Families
• Font Sizes
• Font Weights
• Text Alignments
• Border Positions

Each Design Token Layer is then used when requested in your Text and Layer styles.

All the references to an existent token is defined with a $ sign:

For example:

"layer-styles": {
  "icons": {
    "dark": {
      "background-color": {
        "value": "colors.black"
      }
    }
  }
},

colors.Black refers to a previously generated Color Token defined into the colors section like:

"colors": {
    "black": {
      "value": "rgba(0, 0, 0, 1)"
    }
}

Aknowledgments

Thanks to Ale Munoz and Francesco Bertocci for all their support 🙏

Installation

• Download the latest release of the plugin
• Un-zip
• Double-click on sketch-tokens-exporter.sketchplugin

Development Guide

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.

Notes

This plugin is a port of a File Format Design Tokens exporter, which permits you to perform the same action from any OS (by having a downloaded Sketch document available oon your Computer). The File Format project is available here.