Sketch plugins open up so many opportunities for creative and new ideas. As you probably have found, plugins can do a wide variety of things such as automate existing features, provide new interfaces, get data from external locations, and more! Let’s dive into some of the very basics of plugin development.

The only thing you need for this tutorial is a copy of Sketch. A little knowledge of Javascript won’t hurt either, but if not, that’s ok, I’ll be describing each step along the way. First, you will learn how to use Sketch’s script panel. By the end, you will have made a plugin that will create some awesome shapes and be well on your way to building plugins of your own.

The Script Panel

Getting started is super simple. Open up Sketch and navigate to Plugins > Run Script...

This is the script panel. It’s a little space to test your code quickly. Inside the panel you’ll find some example code already written for you.

Here is that code in a little nicer format in case you need it again.

console.log('This is an example Sketch script.') var sketch = require('sketch') var document = sketch.getSelectedDocument() var selectedLayers = document.selectedLayers

var selectedCount = selectedLayers.length if (selectedCount === 0) {

console.log('No layers are selected.')

} else {

console.log('Selected layers:');

selectedLayers.forEach(function (layer, i) {

console.log((i + 1) + '. ' + layer.name)

})

}

Sketch’s JavaScript API — Breaking down the example code

The Sketch JavaScript API is a way for us to interact with Sketch via code. Hereafter we will simply refer it to the JS API. With the JS API you can manipulate layer properties, select layers based on complex rules, export assets, and more!

To start things off let’s click the “Run” button and see what happens. This will help us get an idea what is going on.

Once you click “Run” a few lines appeared in what is called the console.

'This is an example Sketch script.'

'No layers are selected.'

Script executed in 0.119558s

The first two lines are pieces of text and the last line tells us how quickly our script took to run. You will often see messages like this in the console. Other times you will see helpful error messages in debugging your code.

To get a better sense of how what is actually going on let’s look over the example code. The first line starts with this:

console.log('This is an example Sketch script.')

This logs some text (or a String ) to the console. You will often use console.log(‘something’) for checking to make sure your code behaves as expected. This is how that first line in the console was printed.

The next line is this:

var sketch = require('sketch')

This is the way you import the JS API. We will need this bit if we want to interact with Sketch.

var document = sketch.getSelectedDocument()

getSelectedDocument() is a method defined on our object sketch . It returns the selected document or null if there are no documents selected.

var selectedLayers = document.selectedLayers

var selectedCount = selectedLayers.length

Here we get the selected layers from the selected document. This is a very, very common pattern so be sure to remember that to get the selected layers you will need to do so through the document object. The length property gets the number of layers that are selected.

*One small note here for those that have a bit more Javascript experience. selectedLayers isn’t an array but rather a Selection class. If you want to get an array of the layers selected you can do so by using the Selection class’ layer property:

document.selectedLayers[0] // This doesn't work

document.selectedLayers.layers[0] // This does

Last but not least, is checking to see if there are any layers selected and if so, logging the names of the layers.

if (selectedCount === 0) {

console.log('No layers are selected.')

} else {

console.log('Selected layers:');

selectedLayers.forEach(function (layer, i) {

console.log((i + 1) + '. ' + layer.name)

})

}

First, we check if the number of layers is 0 . If true, then we log the text “No layers are selected.” If the number of layers isn’t 0 , we then log the text “Selected layers:” to prefix the list of layer names that we are going to log.

After that, for each layer we log the layer index and layer name. More specifically, we use the forEach method on selectedLayers . We pass in a function which takes two inputs: the layer and the index. Since the first layer index starts at 0 we add 1 to it so we can get the log output to look like this:

1. First Layer Name

2. Second Layer Name

etc...

Hit the Road Running

Now that you know how the code works, hit the run button in the bottom right! See if you can trigger the different console messages. If you have no layers selected, then when you run the plugin you should see the text “No layers selected” in the console. If you did have some layers selected before running the script then you will see their names reported in the console. Pretty cool huh? Ah, we are just getting started…