1. The non-destructive UI focused vector concept

With sketch you don’t have to think about screen densities anymore. Just create an art board in the size of the view, no matter if it’s retina or ultra mega samsung HD, e.g 360×640 for android and sketch does the rest. I remember the time when I had PSD files with sizes like 500MB and a resolution of 1080×1920 just because I had to make sure that i can deliver assets in the needed resolution and view the design not pixelated when zooming in. After a while I was used to divide by a number of 2 (iOS) or 3 (android) to give the developer the correct font size or margin values but it was always time eating and a potential source of mistakes. That workflow always felt like it included annoying and redundant steps just because photoshop is pixel based and simply not made for web design, especially not for mobile apps.

2. The way text fields just changes his size when you fill it with text

When you create a text field with Photoshop and fill it with more text than the height of it allows, either you have to resize you text paragraph or you have to make manual breaks. Sketch just makes the text box larger. Not more, but not less.

3. The properties of the text boxes

In Sketch padding-top and -bottom of text fields depend on the line-height. For example a text field with a font size of 20px and a line height of 30px includes 5px padding on the top and the bottom. Exactly as it happens in the HTML implementation. This sure has a pretty big influence of the vertical margins between the elements beneath and above. Photoshop ignores that, Sketch not. That means with Sketch the designer and the developer don’t need to guess any margins and paddings between text fields anymore. Just copy and paste the margins you see in Sketch and give it to the developer. With Zeplin this is even easier.

4. The big world of plugins

There’s an infinite number of plugins the Sketch community offers. My most used plugins like ‘dynamic buttons’, ‘asset export for iOS and android’, ‘palettes’ or ‘fluid’ (see next paragraph) are making my workflow so much smoother. There’s a plugin for everyone and every need to make your workflow as effective as possible for you. Use the Toolbox for easy installation.

5. The fluid plugin makes your layout liquid and flexible

This plugin was a revelation for me. You can now define constraints to keep constant margins between elements or inside groups or artboards. That means if you increase the content (e.g. more text, bigger image) and you defined some constraints beforehand you just just hit ‘update’ and your layout adapts to that change. No need to rearrange elements after you changed the size of one. Or if you want to check how your design works on bigger screen, just define margins left and right, resize the artboard, hit update. No need to resize the width of the element because it does automatically. The nerd within me is really happy 🙂 Awesome!

6. The new editable Symbols (in Symbols)

Finally you can put symbols into symbols. Means e.g. you can create a button or icon symbol and put it into any other symbol. Furthermore you can scale symbols now and not to forget: you can now fill text fields and image containers of each symbol with custom content. That makes the symbols even more useful and flexible.

7. The new text styles are just easy to handle

Ok, Photoshop has this feature, too. But for me this never felt intuitive and seem never to work properly. In Sketch the handling of text styles is just easy and comprehensible…and the best thing is: if you change accidentally or by purpose a property of a text field with an assigned style, it’s not applied on the global style until you hit reload in the style.

8. Renaming layers with cmd+r (not doublick)

That sounds ridiculous but since I’m using shortcuts whenever possible, hitting cmd+r is so much faster than making a doublick with mouse or pen on this little layer text field and you know: there are many many layers…

9. Shadows, rounded corners, borders and other properties

With Sketch every property is just easy to create and assign. No need to assign effects on layers. No need to go into the Photoshop’s layer effect window with thousands confusing and redundant setting possibilies. Everything is CSS based, what’s very cool, because now you can tell the developer what values and settings to use. Or if you want to make a developer really happy, give him CSS snippets ;). The implementation will exactly look as your design.

10. Last but not least: The small size of Sketch files

I don’t know how much hard drive space you have, but my SSD is limited. So I’m really glad that I don’t have to care anymore about duplicating Design files as often as I want.