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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Grids
You certainly use grids, this is a great tool.
- 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.
- 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.
- Rotate copies
A small tool that will again, saves you lot of trouble and time.
- 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
- Download free trial
- Buy on the Mac App Store
- Meng To blog posts (special thanks to him, he convinced me to jump in)
- Sketch tips & tricks blog
- Sketch sources
