sketchdev
v0.8.0
Published
Sketchapp utilities to streamline designer/developer workflow (using sketchapp tool chain).
Downloads
91
Readme
Note: Requires
"type": "module"
(i.e., ESM module)
Intro
Command line (with API available) node module that generate html assets (.svg, .png, .jpeg, .css) from sketch.app application.
This extension uses sketchapp tool chain.
Changelog
- 0.7.2 Jan 23, 2022
.
update dependencies
- 0.7.0 - 0.7.1 Jan 10, 2022
!
update to ESM module
- 0.6.1 - 0.6.5 Oct 11, 2020
+
(big one) Add support for new Sketch Color Variables !!! (replace the current style export)- See Sketch Color Variables Intro (youtube)
+
Added download original and download flag (to automatically download origin)^
Save file .css and .svg only if content changed
- 0.6.0 Sep 13, 2020
!
Major refactor, nowsketchdev.config.js
driven.
Usage
npm install -D sketchdev
# create sketchdev.config.js (or .sketchdev.config.js) as below
node ./node_module/.bin/sketchdev
sketchdev.config.js
module.exports = {
input: 'design.sketch', // path of the sketch file relative pwd
// support one or more output
output: [{
type: 'svg', // supports png, svg, jpeg
out: 'svg/sprite.svg', // for svg only, if out is a file, it will create a sprite svg
artboard: /^ico\/.*/, // only export the artboards that match this regex
flatten: '-' // flatten the artboard '/' with '-' char
},
{
type: 'color', // export the color variables as css var
out: 'pcss/colors.pcss',
name: /^txt\/.*/, // (optional) only the color variables that match txt
group: 1, // (optional) "comment group" the style names from their number of path element
// (prime/900 is 2, so, a value o1 2 will group all of the prime/*
// together )
prefix: 'clr-', // (optional) prefix for the css var names
ref: ['gray','prime'] // (optional) define the reference colors that others will use if match
}
]
}