• Stars
    star
    306
  • Rank 136,456 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ’Ž Javascript library to manipulate sketch files

πŸ’Ž node-sketch

Javascript library to manipulate sketch files

Build Status

Install

npm install node-sketch

Example:

const ns = require('node-sketch');

async function run() {
    const sketch = await ns.read(__dirname + '/design.sketch');

    //Search the symbol named 'button'
    const buttonSymbol = sketch.symbolsPage.get('symbolMaster', 'button');

    //Search all instances of a symbol named 'old-button' and replace it with 'button'
    const firstPage = sketch.pages[0];
    
    firstPage
        .getAll('symbolInstance', instance => instance.symbolMaster.name === 'old-button')
        .forEach(instance => instance.symbolMaster = buttonSymbol);

    //Save the result
    sketch.save('modified-design.sketch')
        .then(console.log('File saved!!'));
}

run();

API

Two classes are used to manage sketch files:

Sketch

Represents the sketch file and contains all data (pages, symbols, styles, shapes, etc). Contains the method .save() to create a sketch file with the result.

const ns = require('node-sketch');

ns.read('input.sketch').then(sketch => {
    sketch.document           // document data
    sketch.meta               // meta data
    sketch.user               // user data
    sketch.pages              // array with all pages
    sketch.symbolsPage        // the Symbols page
    sketch.layerStyles        // array with the layer styles
    sketch.textStyles         // array with the text styles
    sketch.colors             // array containing the colors stored in the color palette
    sketch.gradients          // array containing the gradients stored in the gradient palette
    sketch.symbols            // array with all symbols stored in the document

    sketch.foreignSymbols     // array with the symbols loaded from external libraries
    sketch.foreignLayerStyles // array with the layer styles loaded from external libraries
    sketch.foreignTextStyles  // array with the text styles loaded from external libraries

    sketch.save('output.sketch');
});

Node

It's the base class used by all other elements. Any page, symbol, color, etc is an instance of this class.

const symbolsPage = sketch.symbolsPage;

console.log(symbolsPage instanceof Node); //true 

//It include useful methods to search an inner node by class:
const button = symbolsPage.get('symbolMaster');

//by class and name
const button = symbolsPage.get('symbolMaster', 'button');

//by class and callback
const button = symbolsPage.get('symbolMaster', symbol => symbol.name === 'button');

//Just a callback
const button = symbolsPage.get(node => node._class === 'symbolMaster' && node.name === 'button');

//And the same than above but returning all inner nodes instead just the first:
const allSymbols = symbolsPage.getAll('symbolMaster');

There are other classes extending Node to provide special funcionalities in some nodes, like Style or SymbolInstance.

JSON Scheme

Technically, the sketch format consist in a zip with some json files. To manipulate a sketch file with this library, you need to know the scheme of json. You can use this code to read and extract a sketch file into a directory, in order to inspect the json scheme:

const ns = require('../');

ns.read('demo.sketch').then(sketch => sketch.saveDir('demo'));

Here you can see an example of extracted file

CLI

Starting from v0.14.0, the command node-sketch was included to use the library from CLI. You only need a file named node-sketch.js exporting the function to manipulate a sketch file. For example:

module.exports = sketch => {
    //Convert the text style names to uppercase
    sketch.textStyles.forEach(textStyle => {
        textStyle.name = textStyle.name.toUpperCase();
    })
}

To execute this script with the sketch file my-styles.sketch, run node-sketch my-styles.sketch. By default, the file is readed, but not saved. If you want to override the file with the modifications, run node-sketch my-styles.sketch --save.

And to execute a script file with a different name, use the --script argument: node-sketch my-styles.sketch --script=my-script.js --save.


See the API detailed

Or build it locally with npm run docs

More Repositories

1

Embed

Get info from any web service or page
PHP
2,045
star
2

psr7-middlewares

[DEPRECATED] Collection of PSR-7 middlewares
PHP
672
star
3

imagecow

PHP library to manipulate and generate responsive images
PHP
240
star
4

simple-crud

PHP library to provide magic CRUD in MySQL/Sqlite databases with zero configuration
PHP
237
star
5

form-manager

PHP library to create and validate html forms
PHP
152
star
6

jquery-cheatsheet

jQuery interactive cheatsheet
CSS
137
star
7

awesome-design

A collection of open resources for web designers
97
star
8

social-links

Simple library to count shares and generate share buttons
PHP
95
star
9

env

Simple library to read environment variables and convert to simple types.
PHP
81
star
10

bookmarklets

Simple framework to build bookmarklets easily
JavaScript
68
star
11

keep-a-changelog

Node & Deno package to parse and generate changelogs
TypeScript
56
star
12

deno-cheatsheet

Deno cheat sheet with APIs and tools
CSS
53
star
13

stylecow

[deprecated] CSS preprocessor written in PHP
PHP
46
star
14

vento

🌬 A template engine for Deno & Node
TypeScript
44
star
15

middleland

Simple PSR-15 middleware dispatcher
PHP
34
star
16

jQuery.media

jQuery based library to manage video and audio html5 elements
JavaScript
30
star
17

php-server-manager

Manage PHP built-in server in node
JavaScript
28
star
18

semantic-html

Collection of semantic HTML use cases
23
star
19

inline-svg

Insert svg in the html so you can use css to change the style
PHP
19
star
20

css-style-guide

My own css style guide
HTML
15
star
21

nginx-snippets

Custom snippets for nginx
14
star
22

html-parser

Simple utility to parse html strings to DOMDocument
HTML
13
star
23

fly-crud

Basic crud system built on top of flysystem
PHP
12
star
24

nodedeno

Script to convert Node libraries to Deno
JavaScript
11
star
25

folk

Universal CMS to use with any web
PHP
10
star
26

html

PHP library to generate HTML code
PHP
9
star
27

gpm

Git-based package manager for Deno
TypeScript
9
star
28

uploader

Basic php library to upload files
PHP
7
star
29

d.js

DOM manipulation micro library (~4Kb)
JavaScript
7
star
30

dbin

Library to download binary files from GitHub releases detecting the correct platform.
TypeScript
7
star
31

typofixer

Fix microtypography issues in html code
PHP
7
star
32

server

Simple class to emulate Apache's "mod_rewrite" functionality from the built-in PHP web server
PHP
5
star
33

psr7-unitesting

Test your psr-7 http messages easily
PHP
5
star
34

server-style-guide

Step-by-step instructions to install and configure a web server
CSS
5
star
35

polyfills

List of polyfills to use modern things safely
4
star
36

awesome-talks

Collection of design talks in galician and spanish
4
star
37

zume

A static-site generator built on top of gulp.
JavaScript
4
star
38

memes-da-vida

Xerador de memes con debuxos de Castelao
HTML
3
star
39

vscode-vento

Vento for Visual Studio Code
3
star
40

fol

Base app to build websites
PHP
3
star
41

ha

CΓ³digo pΓΊblico de historia-arte.com
PHP
3
star
42

gist-runner

Simple script to run github gist files in localhost
JavaScript
3
star
43

jose

Feed reader
PHP
3
star
44

history-navigator

Minimalist js library to navigate across the browser history
JavaScript
3
star
45

jquery.lazyscript

Simple jquery plugin to load or transform elements in lazy mode
HTML
3
star
46

view-helpers

Collection of useful functions to use in your templates
PHP
2
star
47

form-manager-bootstrap

Simple FormManager extension to create bootstrap-like forms
PHP
2
star
48

simple-crud-extra-fields

Extra fields for simple-crud package
PHP
2
star
49

php-cs-fixer-config

My own custom php-cs-fixer config
PHP
2
star
50

matomo-tracker

Generate Matomo tracker urls that you can use to insert tracking images in your site
PHP
2
star
51

netlify_cms_config

Netlify CMS config generator
TypeScript
1
star
52

chipi-client

JavaScript
1
star
53

domplates

Easy HTML <template>
JavaScript
1
star
54

how-to-do-it

cli utility to help me to remember other cli commands
JavaScript
1
star
55

icona

1 svg + 1 css = multiple icons
CSS
1
star
56

designtokens

A Deno/Node library to parse, manipulate and transform design tokens
TypeScript
1
star