Read more about Sketch 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.
- Design tokens in single source of truth file as Sketch library
- Color tokens as JSON object
- Typography tokens as JSON object
- Icon tokens as JSON object
- Utils tokens as JSON object
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.
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
Sketch naming - colors/color/name
JSON output - color/index.json
{
"color": {
"name": {
"value": "#ffd59e",
"type": "color"
}
}
}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
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"
}
}
}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.
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"
},
}
}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.
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"
},
"border-all": {
"border": [
1
],
"type": "utils"
}
}
}- Download the design-tokens.sketchplugin.zip. Extract zip and double-click the
design-tokens.sketchpluginfile - Download the example-file.zip. Extract zip and double-click the
design-tokens.sketchfile
- 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!
Mail andreas.koutsoukos@gmail.com
This project is licensed under the terms of the MIT license.
