4 Things Every First Time Sketch Plugin Developer Should Know
When I started my internship at Yummygum I had no experience in developing Sketch plugins. Of course I’ve used a couple of Sketch plugins before but I never actually worked on the development of one. The first project I was involved during my internship was SketchCleaner, a plugin that would clean your Sketch files using auto-layer renaming and layer sorting.
I figured I would first take a gander at a .sketchPlugin file of one of the other Sketch plugins the Yummygum team had released before. To my surprise the coding language, CocoaScript, looked familiar but it was also different from JavaScript, a language I *did* know.
After doing some research on this seemingly strange language its value became clear to me. CocoaScript is basically Javascript but it can be combined with Objective-C; Apple’s main programming language. What’s nice about CocoaScript is you can use Sketch’s native objects & classes inside of JavaScript. And although I didn’t know anything about Objective-C my knowledge of JavaScript helped me figure out how to create my first Sketch plugin! Because of the lack of documentation I found myself in need of, I wanted to share a few things with you I wish I had known when I started working on my first Sketch Plugin.
As you read along I can advise you to download the latest version of SKPM(Sketch Package Manager) and leave this boilerplate open for a better understanding of a nice and clean Sketch plugin setup.
Setting up the basics
1. Stick to the file structure
The very first pointer I can give is about file structure; something I had to find out about through trial and error. The file structure of a Sketch plugin requires a pretty strict conventions. If you don’t stick to this convention you will get errors.
2. Use the manifest file for structure
Keep in mind your folder should in all cases include a manifest.json file. This is because Sketch needs to know what to do with your plugin. It’s actually a metadata file that let Sketch know how you want your plugin to be structured. Thi is the file where you’ll define things like your name, version, author etc. . However, it also contains commands for your tasks and/or different function handlers, and even the menu-bar options for your Sketch plugin.
This is what I ended up with as a basic manifest.json I can use for future plugins. By all means go ahead and re-use it. If you really want to throw yourself in at the deep end of Sketch plugin development you could take a look at http://developer.sketchapp.com/guides/plugin-bundles/#manifest for a detailed documentation on manifest files.
Getting your plugin to talk to your Sketch file
After I had become acquainted with the basics of CocoaScript and it’s principles I ran into another hurdle. I needed to figure out how to manipulate the Sketch file in order to have the plugin actually perform the actions. The answer was the connecting my functions to the Sketch API using the context variable.
3. Take advantage of the Context variable
Every function has I saw had a parameter called context. Context is basically the Sketch API itself. This means you can use this context variable to get all pages, layers, styles, symbols etc.
For example within SketchCleaner I used the context variable to grab all the layer styles. And even though I knew how to use the context variable, the actual CocoaScript syntax was a lot more complicated than expected. That’s because functions are chained together in CocoaScript, unlike how I prefer defining them in JavaScript.
For example:
selection.firstObject().parentGroup().insertLayers_beforeLayer([layerCopy], selection.firstObject());Even for getting one simple layer style value the CocoaScript code looks something like this:
What I did in the snippet is as following; I get all the layers from the current page and loop over all of them. Each layer has its own style properties, in this example i’m only showing shapes. You can get the styles from layer.style(), which returns an array with all the style types. As you can see I’m using layer.style().borders() to get all the border values, this will return an array.
Making the plugin trigger a dialogue window
If you want to make a Sketch plugin that would only perform a single action and trigger (eg. using a keyboard shortcut or the menu bar item) you would probably be able to do so with my above-mentioned pointers. However, if you want to give the user more options of what action to perform and where it has to be performed, being able to create a dialogue window is key.
Basically, there are two ways of making a dialogue window. The first one is by using an HTML template and having this communicate with your CocoaScript. The second method is creating a rectangle filled with content in pure CocoaScript which is what I’ll be explaining. If you’re interested in making a HTML dialogue window (as seen in SketchCleaner) I can wholeheartedly recommend reading this article: https://awkward.co/blog/how-to-create-floating-sketch-plugins-i/ written by Marc Bouchenoire (@bouchenoiremarc).
Displaying information and actions in a dialogue window
Whether you’re using HTML for the layout/content of your plugin’s dialogue window or plain CocoaScript, this can be accommodated by using NSMakeRect() .
4. Use NSMakeRect() to give shape to your dialogue windows
NSMakeRect() is a function where the name gives it’s functionally away; it draws a rectangle. Kind of like a div in HTML. These rectangles can have four properties: x offset, y offset, width and height. To set the dimensions and offset values of a rectangle you can use
NSMakeRect(x, y, w, h). So if you want to draw a rectangle with an offset of 100px from the top and 50px from the left with a size of 500x500 you’ll use NSMakeRect(100, 50, 500, 500). The offset is set from the initial dialogue panel. You can see this in the snippet below.
Now that I’ve showed you the ropes, you should now be able to create your first basic Sketch plugin with the correct file structure that includes a manifest.json, and can manipulate things like layers and styles, using a dialogue window that contains information and UI elements using NSMakeRect(). Now all you need is an idea of what you want your first Sketch plugin to do and some JavaScript knowledge.
Nils Hoenson (@nilshoenson) deserves an honourable mention as he was of big help pointing me in the right direction, developing my first Sketch plugin.
If you want to read more about Sketch plugin development, I wholeheartedly recommend the following reads as well:
