Sketch features that made me forget about Photoshop

While working on our latest project, I got really frustrated with Photoshop. I’ve just got a brand new MacBook Pro, the project has just started and it already took ages for my Photoshop to run a simple PSD file. This is it, we have to look for a new solution here.

People were talking around me about Sketch for quite some time now and to tell the truth, I’ve tried it a couple of times, but every time the trial ended after 15 minutes in pretty much the same way — Where are my tools? Where can I change the colour? What about the layers? Oh c’mon, what is this right panel for? This is stupid. — Yup, it’s true. Sadly. My stubbornness and loyalty for Photoshop were stronger than a desire to learn something new. But then, along with slow PSDs, the good days have come — I have to learn it. I just have to.– I took the already designed screens — 3 of them to be exact– and decided to recreate them in Sketch during the weekend as a training. It was one of the best decisions that I’ve made in quite some time.

During the weekend I’ve managed to learn the basics and find the most useful plugins. I have successfully recreated these 3 screens for both iOS and Android… and will never design a single web or mobile app user interface in Photoshop ever again. Why?

Light files

The most complicated project that I have designed in Sketch until now consists over 100 art boards, it weighs 31,5 MB and opens up in about 2 seconds. Try to do that in Photoshop.

Metric Guides are awesome!

I know, I know, it’s also a feature that Photoshop has for some time now, but if you’re a pixel perfect freak as I am, you’ll quickly find out that compared to Sketch, those guides in Photoshop simply suck.

You can activate the guides in Sketch by holding Alt and moving your mouse around the artboard while one of the layers is selected. It just works.

Sketch knows math

Picture this situation. You have a rectangle that you want to fill with text. Then you decide to split it into three equal columns. What do you do? Well, what I did, was to turn on a calculator and simply divide the width of the rectangle by three. Now I do the same but I don’t have to use a calculator, Sketch does the math for me.

You can use the most basic operations like plus, minus, multiplication, division, but you are also very welcome to use brackets or exponentiation.

Vector designs make everything just easier

While layers in Photoshop are rasterized, in Sketch almost everything (besides photos) is in the vector. It’s not only great because you can zoom in and take a look at the details, but mainly makes your work and collaboration with developers easier.

You can design @1x resolution — that means while designing for iPhone 6S, you create an artboard that is 375px wide and 667px tall and this is your base. Why is that better than designing @2x in Photoshop? All the sizes are already in the right dimension — pt for iOS, dp for Android — and font sizes are compatible (more or less) as well, that means you don’t have to do any additional math while talking with developers. Everything is just less complicated.

You can export multiple elements in multiple resolutions… at once

If you never tried it, you’ll love it. You can simply choose which UI elements you want to export, and then specify multiple resolutions that you want it to be exported in.

It’s really handy and make the boring part of the project go away much faster.

Symbols

Imagine you’re creating a design that consists a list of products (or locations as in my project presented above). Each card is built in the same way, the only thing that changes is content. By changing it to Symbol you can duplicate the element as many times as you want, and then change the content easily in the right panel.

Later on, if you decide to do some changes in the design itself, you can simply reorganise the symbols. All changes will apply automatically to all the symbol copies.

Plugins

If you can’t do something you want in Sketch, there is probably a plugin for that. Here are my favourites so far:

1. Zeplin — it is not only a plugin but a standalone app as well. It is just perfect in case of creating project guidelines for developers in a blink of an eye.
2. Craft — whether you need to duplicate some of the UI elements or just want to fill gaps with random text or image, Craft will make it for you.
3. Sketch Pallets — as the name suggests, this plugin helps you import and export colour palettes created in Sketch.

Hope this brief overview encourage you enough to give Sketch a try, even if you’re Photoshop loyal fan since ages. Definitely, Sketch can do a lot more than the features I’ve mentioned earlier. You simply need to start playing around with it and figure out your way. Be brave!

Related posts