Javascript library to manipulate sketch files
npm install node-sketchconst 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();Two classes are used to manage sketch files:
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');
});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.
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
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.
Or build it locally with npm run docs
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent