Why Sketch is the perfect design tool for developers
As a developer building apps for iOS, I am confronted daily with the importance of combining solid code with beautiful and well thought out design. An app may have a lot of awesome features, but without a properly designed user interface, it most likely won’t succeed in the App Store.
Even so, I have met few developers who can perform more than a few basic design tasks, while most designers these days at least know how put together a website with some HTML and CSS. Now this is by no means scientific, but my theory is that this has a lot to do with the tools that are available. While there are many tools that simplify the development process, such as Dreamweaver, WordPress or things like Squarespace, there aren’t many tools that are simple enough to allow developers to experiment with doing their own design work. I mean we don’t all have to be as good as this guy, but sometimes it can be useful to be able to visualize some idea or concept without having to go through a designer.
Enter Sketch
Sketch is a vector graphics app focused on the ability to do interface design. It has allowed me, as a developer, to venture into design territory without feeling immediately lost. I have been using the app for a few days now, and I already feel like I am able to use and understand most of the features the app has to offer. Not only that, but it has enabled me to think of design in a more structured way. Learning to use the application has enabled me to begin to understand some of the techniques that go into creating a design, much in the same way that learning to program helped me understand how computers work.
The reason that Sketch works so well for a developer like me, is that in many ways, it operates like a development tool instead of a design tool. It’s like a framework for design. Like a framework, it provides basic building blocks, which can be stacked together, combined, altered and shaped into whatever end result you might have in mind. Like any good framework, it provides a simple and consistent “API”, which enhances discoverability and ease of use.
Revelation
The main building block for creating a design in Sketch is a shape. Shapes can be combined with four different boolean operations: union, subtract, intersect and difference. With these four basic actions, and some styling options like gradients, borders, shadows and inner shadows, most interfaces can be easily recreated. Now to designers and graphic artists this will all be old news, but this idea never dawned on me until it was presented to me so plainly by this app.
Take this camera icon that I created for instance. It is nothing more than the combination of a few basic shapes.
Features
Some of the main features that will make developers feel right at home using Sketch are the following:
Non-destructive editing
In addition to supporting Auto Save and Versions, most operations are non-destructive. Meaning that any changes you make can always be altered or undone. This makes it easy to experiment, without having to worry about destroying what you’ve made.
Linked Styles
Layer styles can be shared amongst multiple layers to keep them in sync. Although this is already a useful feature, I think it could be improved by adding more fine grained control over which elements of a style are to be synced. As it is now, you can either use the exact same style, or create a completely new style. Also, linked styles for text seem buggy, or at the very least a bit confusing.
Designing with numbers
Sketch makes it easy to control every element of your design with exact numbers. This is something that makes a lot of sense from a design as well as a development standpoint.
CSS Attributes
This is a great feature for web developers. It allows you to copy the style of an element as CSS attributes so you can paste it right into your CSS file.
Scripting API
One last interesting thing about the app is that it offers a scripting API , which allows anyone to write their own plugins for the app using JSTalk. The documentation could use a little more love, but a lot can be figured out by looking at the provided code samples and plugins that others have already written. These are the ones I’ve found so far:
Related articles
Disclaimer: I am in no way affiliated with, or endorsed by Bohemian Coding.
