# sketchdev

> Sketchapp utilities to streamline designer/developer workflow (using sketchapp tool chain).

Latest version **0.8.0** (published 2024-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install sketchdev
pnpm add sketchdev
yarn add sketchdev
bun add sketchdev
```

Provides the command `sketchdev`.

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2024-08-24 |
| First published | 2016-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 14 |
| Unpacked size | 93.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jeremy Chone |
| Maintainers | jeremychone |

## Links

- npm: https://www.npmjs.com/package/sketchdev
- Repository: https://github.com/BriteSnow/node-sketchdev
- Homepage: https://github.com/BriteSnow/node-sketchdev#readme
- Issues: https://github.com/BriteSnow/node-sketchdev/issues
- npm.io page: https://npm.io/package/sketchdev

## Dependencies (14)

- [yauzl](https://npm.io/package/yauzl.md) ^3.1.3
- [fs-aux](https://npm.io/package/fs-aux.md) ^0.1.1
- [rimraf](https://npm.io/package/rimraf.md) ^6.0.1
- [cheerio](https://npm.io/package/cheerio.md) 1.0.0
- [p-spawn](https://npm.io/package/p-spawn.md) ^0.5.5
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [minimist](https://npm.io/package/minimist.md) ^1.2.8
- [utils-min](https://npm.io/package/utils-min.md) ^0.2.3
- [yauzl-promise](https://npm.io/package/yauzl-promise.md) ^4.0.0
- [@types/minimist](https://npm.io/package/@types/minimist.md) ^1.2.5
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [follow-redirects](https://npm.io/package/follow-redirects.md) ^1.15.4
- [@types/lodash.debounce](https://npm.io/package/@types/lodash.debounce.md) ^4.0.9
- [@sketch-hq/sketch-file-format-ts](https://npm.io/package/@sketch-hq/sketch-file-format-ts.md) ^6.5.0

## Recent versions

- 0.8.0 (latest) — 2024-08-24
- 0.7.5 — 2024-01-12
- 0.7.4 — 2022-09-10
- 0.7.3 — 2022-09-04
- 0.7.2 — 2022-06-23
- 0.7.1 — 2022-01-11
- 0.7.0 — 2022-01-11
- 0.6.10 — 2021-04-16
- 0.6.9 — 2021-03-15
- 0.6.8 — 2021-03-05
- 0.6.7 — 2021-02-28
- 0.6.6 — 2020-11-11
- 0.6.5 — 2020-10-11
- 0.6.4 — 2020-09-19
- 0.6.3 — 2020-09-18
- … 23 more at https://npm.io/package/sketchdev/versions

## 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](https://www.sketch.com/) application.

This extension uses [sketchapp tool chain](https://developer.sketch.com/cli/).


## 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)](https://www.youtube.com/watch?v=3_dvCpetsgc)
  - `+` 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, now `sketchdev.config.js` driven. 


## Usage

```sh
npm install -D sketchdev

# create sketchdev.config.js (or .sketchdev.config.js) as below

node ./node_module/.bin/sketchdev
```

**sketchdev.config.js**
```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
	}
	]
}
```

---
_Source: https://npm.io/package/sketchdev · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._