How Sketch is helping me back into code. –

Coding my first Sketch Plugin

When I began university, I had never expected to graduate as a UX Designer. During the majority of high school I was focused equally on technology and fine arts. As predicted, when I began university, I was drawn to the more traditional courses in the design curriculum.

Throughout my four years, however, I became more and more interested in the practice of Human Centred Design (HCD) and during my final year, the majority of my studies revolved around this practice. When exiting school I became more interested in continuing this practice. After interviewing for a few different types of design positions, I landed myself a job as a UX / UI Designer.

How does this have anything to do with Sketch and learning to code?

Just as university was able to introduce me to HCD and how to implement its practices into my workflow, so did Sketch in solidifying code as a skill I wanted to further explore.

Sketch as an open platform

When I was first introduced to Sketch in early 2011, I was impressed at how barebones the interface was while still housing all the necessary features; As I was accustomed to the tool heavy workspaces traditionally found in photoshop and illustrator, Sketch was very refreshing.

Not only was Photoshop industry standard, it felt safe. I was told I would have everything I would ever need and each feature I would get to know and learn with time.

In reality, I maybe used 40% (if that) of the available features in the program and out of those 40%, it was only the 10–20% that I would use on a daily basis. Don’t get me wrong, I understand why Photoshop is built this way, I’m just saying there was a better solution for the reason why I was using it.)

This is when I fell in love with Sketch. As a designer using Photoshop for interface design, discovering Sketch was like tripping over the entrance to King Tut’s tomb.

Plugins are your friend

The one feature that makes Sketch a true user centred product, is its potential for customization and user built tool improvements. Yes, on the surface you have a system that houses the most important tools when designing, but what about when you need something a little more niche; that’s where the community is able to help.

Sketch has everything you will ever need. And when it doesn’t, there’s a plugin for that.

There are even plugins to manage plugins. Through my own personal experimenting and downloading of plugins, it became clear how Sketch is not just a static platform meant to help designers. It is fluid and evolves to complement your own personal workflow.

Sketchpacks and Sketch Runner are both great options for plugin management

What if you can’t find that one plugin?

Solution: Make your own!

This is where I found myself a couple of weeks ago; trying to organize and clean up my workflow. I was looking for a plugin that would help me rename my groups as I make them. This would allow me to learn to instinctively name my groups and layers after I created them. This specific plugin didn’t exist, so I was at somewhat of a loss. As I had recently recoded my portfolio website, I was interested to see how coding a plugin differed from coding for web.

Where do I start?

If you’re also interested in creating your own sketch plugin, I would suggest familiarizing yourself with how Cocoascript is executed. I started by looking at already created plugins and diving into their code. This helped me understand the overall structure of a Cocoascript file as well as how .Sketchplugin files are organized.

Inside a .sketchplugin file you will find all the components organized in a similar way

Deconstructing a Sketch Plugin


Every sketch plugin is created from a .Sketchplugin file. This file is similar to a .zip file, as it contains all the components that make up the plugin itself. In order to see the contents of said plugin, all you have to do is locate the .Sketchplugin file you wish to open (you can do this by going to plugins>manage plugins>⚙️>show plugins folder) right click and show package contents. This will open a folder containing all the resources and files that are used to make the plugin.

Author: Brock Donaldson

Collect by: