Sketch icon by Emanuel Sá

Discovering Sketch

“the designer’s toolbox”

During my last trip to San Francisco for the WWDC 2013, I have been lucky enough to meet great people from all over the world that are dedicated and passionate about building better experiences and better tools for designer.

I tried Sketch (Mac only) when it was first released a year ago. The lack of some feature and the difficulty to move away from my routines drove me back to Photoshop. Still, the designer community seemed really enthusiastic about it. This made me dedicate some serious time exploring it and teaching myself the basics. The idea was to evaluate if at some point Sketch could be a viable replacement for Photoshop.

Today 80% of my designs are made with Sketch. It took me less than a month to transition and so far I have nothing to regret. Let me explain why.

Photoshop, the wooden leg

Why Photoshop is not enough? The more we want to focus on qualitative, effective and collaborative work, the more we understand that we use a broken tool.

I will not talk about Fireworks for many reasons, the main one being: Adobe discontinued the product.

Not designed for us

The initial purpose of Photoshop was digital image processing. Béziers paths and vectors tools only appeared in V2. When taking a closer look at the version history and the latest updates, it’s obvious that user interface designers are not the target audience for this software. We forget we’re actually ‘hacking’ the software in the sense we’re performing actions with it that it wasn’t primarily meant to do. The truth is we need a simpler software with simpler features. Photoshop is overkill.

Not suited for the mobile era

If you have to export assets for multiple resolutions, you are going to have a bad time. Even with the sprite technique you have to make all the assets aligned to the grid and it remains very time consuming. Most of the time-saving features come from third party add-ons: iOS screens and icons templates, grid layouts and symbols.

Aging engine

Since Photoshop is old and meant for image processing, the engine behind requires a lot of resources. Even when Adobe engineering team made an impressive optimization effort, everything is still slow enough for us to be bothered. Moving multiple groups always guarantees a beach-ball even though it’s a pretty basic feature. We can’t really blame them because they’re being held back by their cross-platform support.

It’s taking years

Do you remember when retina screens got released and how much time we had to wait for an update to use Photoshop, dashed stroked lines, dynamic rounded corners? Too much. I get it and don’t blame them. Huge teams often move slowly. It does not change the fact that we have been eagerly awaiting some key features that are still not there: decent text rendering, multiple blending options, usable smart guides, etc.

Features that makes Sketch a serious alternative

Autosave and versioning

Ever dreamed of getting away from compulsive ⌘+s? It’s there. Sketch is autosaving for you and it even allows you to restore a previous version of your file.

“Browsing All Versions…” will show you a time machine interface of your previous saved files

Vector editing and pixel perfection

Vector means scalability. That means you’ll stop wasting your time making your assets bigger or smaller. Sketch does it for you, at a pixel perfect level. Switching from vector to pixel view is also very useful when it comes to icon or illustration design.

You can switch from pixel to vector view with ^P

Smart Guides

Do you love xScope? Are you using marquee tool trick to get measurements? Painful grids? Smart guides will help you to get all your elements with the correct alignment, padding and margin in a very easy way. It saves me lot of time and ensures peace of mind. One of the most useful feature in my opinion.

Select your shape or group, press ⌥ and drag your cursor hover other shapes or groups

Edit elements on the fly

Dynamically edit corner radius, height, weight? Yes we can. I use it a lot and frankly it has been a huge relief when I switched to Sketch. Getting the perfect shape size or corner radius by entering values in the input fields is one of my favorite feature. It’s seems so obvious now that I wonder how I lived without it.

http://www.youtube.com/watch?v=dPbdgEBS0EY

Shapes connection

You can combine shapes to make new shapes! Easy to union, substract, intersect or difference. You know theses already but what is really great is that all theses sub shapes can be edited on the fly too. Also since they are listed as shapes, you can select them separately without troubles, you can layer them and so on. No more struggle with moving things between back and front. That allows you to manage and create more complex shapes.

Multiple blending options per layer

The dribbble-single-layer-photoshop-showoff trend is over. In Sketch, you can do what you want with a single shape. That means 4 solid or gradients fills and infinite borders, shadows, inner shadows, etc.

Up to 4 fills, infinite borders and shadows

Round to Nearest Pixel Edge

Round to Nearest Pixel Edge rounds a shape or layer to its nearest pixel edge. If a shape’s X lies at 5.3px it’ll round to 5px. No more decimals pixels, dirty shapes and alpha-blended-mashed pixels. I use a keyboard shortcut for that to be sure all my shapes are pixel perfect. Way more effective and fast than aligning all the vector points to the grid one by one.

I use ⌥ ⌘ x as shortcut. One of the feature I use the most.

Linked Styles

When you deal with text-heavy design, linked style allows you to set a specific style that you can assign to any text. If you change it on any linked styled text, it will deflect on all text using this style. The best part? It also works with shapes.

You can quickly and easily change all you text with linked style

Exporting Assets

Slicing and exporting assets is usually one of the most painful process, even more with Photoshop slicing tool. Sketch being vector friendly and well-thought, the export is one click away and allows different sizes and formats (pdf, eps, svg, png, jpg, tiff). Of course it’s not a plugin or a third-party application, it’s built-in.

One click export

Distribute Spacing

When you work with rich content such as images where beautiful layout matter, this feature will help you to quickly test several of them in a heartbeat.

http://www.youtube.com/watch?v=uRoapX21DY0

Grids

You certainly use grids, this is a great tool.

On the fly grid

Text Rendering

Using it’s own advanced text rendering, Sketch is doing a great work at displaying text and typefonts. It’s a relief to leave Photoshop’s anti-aliasing behind.

Text rendering at it’s finest

CSS Styles

If (unlike me) you are doing some web development or work with a web developer, this feature will translate all your blending options into CSS code.

Simply paste the code somewhere (a css file sounds like a good idea)

Gradient border are not supported yet

Rotate copies

A small tool that will again, saves you lot of trouble and time.

http://www.youtube.com/watch?v=5bdn23O0oNo

Sketch Play

It’s still in beta but Sketch is on it’s way to have iOS mirroring. I am using it daily and it’s very helpful. Again, it’s not a plugin, it’s built-in.

Reactivity is the deal maker

Sketch is a small team, growing and going fast. As their changelog testifies, every update brings new relevant features to the table.

I encourage you to use the beta version and witness the high frequency of updates for yourself.

The software is getting better and better because they are listening to Sketch users. Their tenderapp is the perfect place to report bugs or submit feature requests.

Development axis

Of course Sketch is not perfect. There is still some stuff I’d love to have so I never have to open Photoshop again.

Basic bitmap editing such as cropping and deleting pixels (Henry Moran just explained me in the note how to do it)

Filters for groups such as gaussian and motion blur

3D transformation for groups such as skew, distort, perspective

Export / import settings and presets so team can share colors palette, gradients, text style, etc

Exporting assets at different size ratio (not only @1x and @2x)

Firework’s Symbols can speed up our process, even more if these are linked. Updating one will reflect everywhere they have been used

Better state management, so far the best one I have been able to use is the Firework’s one

Get my new Sketch master class — Learn to design an iPhone app with Sketch

Related links