Delivering consistent Design System

A Sketch plugin that exports Design Tokens to JSON format. You can export colors, typography, icons and utilis. A must-have tool for design system project.

Download plugin

Includes the starter tokens Sketch file.

Github read documentation

SKETCH

Color tokens

Solid or Gradients

Typography tokens

Font-families, font-weights and letter-spacing consistently

Heading 1

Heading 2

Heading 3

Paragraphy

Utils

Spacing, Radius and Shadow

8px 16px 24px

JSON

{ "typography": { "body": { "font-family": {     "value":"Roboto" }, "font-size": {     "value":11 }, "weight": {}, "letter-spacing": {     "value":0 }, "line-height": {     "value":40 }, "type":"typography" }

See how to use plugin

Using the plugin and example file is easy

Colors

Naming color token layer by color/name. Important to make color token layer style in Sketch. See in the JSON example what token data will export.

JSON

"color": { "color-name": { "value": "#fff", "type": "color" }, "color-name": { "value": "#0000", "type": "color" } }

Typography

Naming typography token layer by font/name. Important to make typography token text style in Sketch. See in the JSON example what token data will export.

JSON

"typography": { "body": { "font-family": { "value": "Helvetica" }, "font-size": { "value": 12 }, "weight": {}, "letter-spacing": { "value": 0 }, "line-height": { "value": 16 }, "type": "typography" }, }

Icons

Naming icons token layer by icon/name. Icon tokens will output SVG code for value.

JSON

"icon": { "icon-eye-solid": { "value": "svg inline code", "type": "icon" } }

Utils

Naming utilis token layer by utils/space/name, utils/radius/name and utils/shadow/name. See in the JSON example what token data will export.

JSON

"utils": { "space-2xs": { "spacer": 4, "type": "utils" }, "radius-4": { "radius": [ 16, 16, 16, 16 ], "type": "utils" }, "shadow-dialog": { "shadows": [ [ { "blur": 24, "x": 0, "y": 8, "spread": 0, "color": "#473f4f29", "enabled": true }, { "blur": 16, "x": 0, "y": 4, "spread": 0, "color": "#2e293314", "enabled": true } ] ], "type": "utils" } }

❤️ by Andreas Koutsoukos