Sketch for Developers
Table of Contents
Sketch is a popular graphic design tool for Mac OS. But, unlike the 800-pound Photoshop-Gorilla, it's a design tool that proves valuable for developers, too.
This is a guest post from Pieter Omvlee, founder and developer at Bohemian Coding, the team behind Sketch.
In many cases, developers are very close or even take part in the design process - e.g. in agencies or larger teams, where developers work closely together with designers, or as independent developers who do the design for their apps themselves.
In this post, I want to highlight some of Sketch’s features that you as a developer might find helpful.
Ease of Use
I might be biased here, but I think Sketch is a lot easier to learn than, say, Photoshop. The UI is modern and as a user you’ll feel immediately at home. Drawing quick UI mockups or making changes is very easy and doesn’t require you to lean any obscure commands.
A feature like Artboards will feel instantly familiar to mobile developers who’ve used Xcode’s storyboards: separate canvasses inside a single document.
Exporting
Developers no longer have to wait for designers to slice the assets for them. Exporting any layer or group of layers in Sketch is trivial, even if no slices have been set up previously. You can grab any layer from the layer list and drag it onto the Finder directly and it’ll be exported for you. It’s that simple. Sketch can even export your assets 2x and 3x - or any other scale - automatically.
Sketch can also export PDF and SVG. With the latter becoming increasingly popular on the web, that’s a nice thing to get out of the box.
Another nicety for web developers is our "Copy CSS attributes" feature: Select any layer(s) and choose Edit > Copy CSS Attributes in the menu and you’ll get all the CSS styling you’ll need (borders, colors and even gradients).
Measurements
Besides exporting individual elements, Sketch can also help you get the general layout just right. Using its smart guides system, you can easily measure the distance between any two layers. Just select one layer, hold the option key, and move your mouse over another layer. Sketch will tell you exactly what the various distances are.
Scripting
Sketch can be scripted using CocoaScript, which is a Javascript bridge to talk to Objective-C directly, and there’s a lot you can do. Some people wrote very elaborate plugins (sketch-measure), but others have written small but useful scripts that help them with exporting assets. Or you just write a little one-off script to make some common action easier. There’s a mailing list and we’ve got extensive documentation on our website.
SketchTool
We’ve also released a command-line tool that can export slices or artboards - or any kind of layer - out of a Sketch document. Some companies have integrated the sketch tool in their continuous deployment system, others have added it as a build step in Xcode so that they always have the latest assets.
Of course we have a ton more features that will make Sketch a joy to use, and you can read all about them on our website. If you have any more ideas for how we can make developers’ lives easier, please tell us at @sketchapp or via our support channels.
