Skip to content
Get Design Tokens in JSON format from Sketch library file
JavaScript
Branch: master
Clone or download
vjandrei Merge branch 'akx-prettier'
# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.
Latest commit 35e0909 Nov 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets added readme and images Nov 12, 2019
design-tokens.sketchplugin/Contents added gitignore files Nov 19, 2019
example-file tested and approved Nov 19, 2019
src tested and approved Nov 19, 2019
.appcast.xml appcast update Nov 13, 2019
.babelrc init commit Nov 12, 2019
.eslintrc.js Fix some ESlint complaints Nov 12, 2019
.gitignore added gitignore files Nov 19, 2019
.skpmrc init commit Nov 12, 2019
LICENSE Initial commit Nov 11, 2019
README.md update remove bug information Nov 13, 2019
package-lock.json tested and approved Nov 19, 2019
package.json Add ESlint Nov 12, 2019

README.md

alt text

Design Tokens

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.

Features

  1. Design tokens in single source of truth file as Sketch library
  2. Color tokens as JSON object
  3. Typography tokens as JSON object
  4. Icon tokens as JSON object
  5. Utils tokens as JSON object

1. Design tokens in single source of truth file as Sketch library

Use example design-tokens.sketch file in example-file folder. You can fill in the content you want in the example file. Make sure that you use layer style and text styles when you create tokens. All tokens must be at the subfolder in Sketch named by color, typography, icons and utils.

2. Color tokens as JSON object

To define color tokens must be inside group call colors and layer named by color/{name}. Importan also to make layer to Layer Style. To create a Layer Style, select a layer, and choose Layer › Create new Layer Style Learn here

alt text

Sketch naming - colors/color/name
JSON output - color/index.json

{
    "color": {
        "name": {
            "value": "#ffd59e",
            "type": "color"
        }
    }
}

3. Typography tokens as JSON object

To define text tokens must be inside group call typography and layer named by font/{name}. Importan also to make layer to Text Style. To create a Layer Style, select a layer, and choose Layer › Create new Text Style Learn here

alt text

Sketch naming - typography/font/name
JSON output - typography/index.json

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

4. Icon tokens as JSON object

To define icons tokens must be inside group call icons and layer named by icon/{name}. Important to keep the SVG icon to union format.

alt text

Sketch naming - icons/icon/name
JSON output - icons/index.json

{
    "icon": {
        "icon-eye-solid": {
            "value": "<svg id='icon-eye-solid' width='24px' height='16px' viewBox='0 0 24 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->    <title>Shape</title>        <g id='design-tokens' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>        <g id='tokens' transform='translate(-120.000000, -767.000000)' fill='#000000' fill-rule='nonzero'>            <g id='icons' transform='translate(24.000000, 763.000000)'>                <g id='icon/eye-solid' transform='translate(96.000000, 4.000000)'>                    <path d='M23.8549772,7.39166667 C21.5953939,2.98291667 17.1220605,0 11.9999772,0 C6.87789388,0 2.40331055,2.985 0.144977215,7.39208333 C-0.0483257383,7.77445825 -0.0483257383,8.22595841 0.144977215,8.60833333 C2.40456055,13.0170833 6.87789388,16 11.9999772,16 C17.1220605,16 21.5966439,13.015 23.8549772,8.60791667 C24.0482802,8.22554175 24.0482802,7.77404159 23.8549772,7.39166667 Z M11.9999772,14 C8.68626872,14 5.99997721,11.3137085 5.99997721,8 C5.99997721,4.6862915 8.68626872,2 11.9999772,2 C15.3136857,2 17.9999772,4.6862915 17.9999772,8 C18.0007514,9.59153616 17.368859,11.1181095 16.2434729,12.2434957 C15.1180867,13.3688818 13.5915134,14.0007742 11.9999772,14 L11.9999772,14 Z M11.9999772,3.99998885 C11.6429486,4.00498962 11.2882238,4.05810724 10.9453939,4.15791667 C11.529363,4.95150825 11.4460613,6.05266558 10.749352,6.74937482 C10.0526428,7.44608405 8.95148546,7.52938577 8.15789388,6.94541667 C7.70949625,8.59740065 8.36454792,10.3513572 9.78606474,11.3049826 C11.2075816,12.2586081 13.0789344,12.1994915 14.4374264,11.1580449 C15.7959183,10.1165982 16.3389584,8.3247936 15.7871857,6.70440527 C15.2354129,5.08401694 13.7117293,3.9959707 11.9999772,3.99998885 L11.9999772,3.99998885 Z' id='Shape'></path>                </g>            </g>        </g>    </g></svg>",
            "type": "icon"
        },
    }
}

5. Utils tokens as JSON object

To define text tokens must be inside group call utils. There is different naming convation for other tokens. Utils has multiple token types. Types are space, radius and shadow. See how to name layer from below list.

alt text

Sketch naming - utils/space/name
Sketch naming - utils/radius/name Sketch naming - utils/shadow/name
JSON output - utils/index.json

{
    "utils": {
        "space-name": {
            "spacer": 4,
            "type": "utils"
        },
        "radius-name": {
            "radius": [
                16,
                16,
                16,
                16
            ],
            "type": "utils"
        },
        "shadow-name": {
            "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"
        }
    }
}

How to install

Roadmap

  • To-Do

Shout out ❤️

  • Koodiklinikka #javascript channel for support to answering my stupid questions https://koodiklinikka.fi/
  • Niki Ahlskog for helping me to start the development! GitHub
  • Family to support me to having the time to making this!

Contact/Feedback

Mail andreas.koutsoukos@gmail.com

License

This project is licensed under the terms of the MIT license.

You can’t perform that action at this time.