Skip to content
Sketch.app plugin to apply design tokens to Sketch layers
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Examples Moved Aug 21, 2019
PuzzleTokens.sketchplugin/Contents 3.0.2 released Sep 16, 2019
archives 3.0.2 released Sep 16, 2019
.gitignore Updated .gitignore Sep 13, 2019
CHANGELOG.md 3.0.2 released Sep 16, 2019
LICENSE Moved Aug 21, 2019
PuzzleTokens.sketchplugin.zip
README.md Moved Aug 21, 2019
appcast.xml 3.0.2 released Sep 16, 2019

README.md

puzzle-tokens

Sketch.app plugin to apply design tokens (specified in LESS format) to Sketch layers (with shared styles)

Installation

  1. Download Puzzle Tokens plugin
  2. Unarchive and install
  3. Download and install Node.js
  4. Instal less using the following Terminal commands:
sudo -s  
npm i less -g 

Usage

  1. Download example and unarchive it into some local folder.
  2. Open Widget Library.sketch file in Sketch.app
  3. Run Plugins > Puzzle Tokens > Apply Design Tokens menu command
  4. Specify LESS and JSON files according to screenshot

  1. Repeat the same operation, but select "tokens-blue.less" file. See how styles and widgets look now.

Features

The following styles are supporting.

Text Layers:
-----------------------------------------
"font-size":             "12.0",   
"font-face":             "Open Sans" // or "Open Sans","Times New Roman"
"font-weight":           "bold", // "extra-light", "light", "regular", "medium", "semibold", "bold"
"line-height":           "1.0", // or 1.2 or 1.5 or any other mulitplier for font-size
"text-color":            "#FFFFFF"
"text-color-opacity":    "63%", // "63%" or "0.42"
"text-transform":        "uppercase",  // "uppercase", "lowercase", and "none"

Shape Layers:
-----------------------------------------
"fill-color":            "#B0AFB1",
"fill-color-opacity":    "63%", // "63%" or "0.42"

"fill-gradient-type":    "linear", // or "radial" or "angular" 
"fill-color-from":        "#B0AFB1",
"fill-color-from-opacity": "63%", // "63%" or "0.42"
"fill-color-to":        "#B0AFB1",
"fill-color-to-opacity": "63%", // "63%" or "0.42"


"border-color":          "#000000",
"border-width":          "2", //px
"border-position":       "center", // center or inside or outside
"shape-radius":          "5", //px !!ATTENTION!! Shared styles don't include Radius, 
                              // so you need to apply it on layers or symbols directly
"shape-radius":          "5;5;0;0",
"shadow":                "0 10px 20px 2 rgba(0,0,0,0.1)",
"inner-shadow":                "0 10px 20px 2 rgba(0,0,0,0.1)",

Requirements

Some styles, such as text font/transformation/etc require the latest Sketch 53

You can’t perform that action at this time.