Switching to Sketch

My first 30 days using Sketch


A year ago, a lot of my Twitter friends were raving about Sketch and I thought it was really interesting as well.

That article that I linked to was what really intrigued me about Sketch. Meng To, a designer that I’ve been following for quite some time, really was a big promoter of it. It seemed like such a great tool that was perfect for UI/UX designers. Although I really wanted to try Sketch out, I didn’t want to get out of my comfort zone. And everyone at my job used Adobe Photoshop and Illustrator, so I told myself that I would try it out later.

Time for something new

I recently took on a new role as a product designer for SmartRecruiters and on my first day at work (March 2nd), I had a conversation with my fellow designer, Jason Hegyessy about the tools and processes of the design team.

Me: So what does the team use? Photoshop? Sketch?
Jason: I’ve been using Sketch and I really like it. You’re free to use whatever you would like. Your machine has Adobe Creative Cloud, so you can still use Photoshop if that’s what you want.
Me: I think I’m gonna give Sketch a try. I’ve wanted to learn it and now is the perfect time to finally give it a try.

Veering away from what you’re already comfortable with is always nerve-wracking, especially when you’re doing it at your new job. But I’ve always thought that the best way to learn is by diving right in, so I decided that I would immerse myself in it for 30 days. If it sped up and improved my current workflow, then I would make the switch permanent.

Teaching an old dog new tricks

I received my first project at work, and I was off to the races. After reading through the spec and a doing a few sketches, it was time to finally use Sketch. I opened it up and started designing. Everything was pretty straightforward, and although there were a few nuances, I was quickly getting the hang of it.

One thing that did slow me down quite a bit was not knowing the shortcuts. As a Photoshop user for 10+ years, I could work incredibly fast because I did everything with the keyboard. Sketch keyboard shortcuts were quite different, and that was extremely frustrating to me. In order to learn the keyboard shortcuts, I took some advice from Google designer Jean-Marc Denis and decided to hide my toolbar.

Look Ma, no toolbars!

It was a bit painful at first, but I finally learned most of the shortcuts and have since went back to using the toolbar.


Another difficulty for me was that the Sketch UI differed greatly from Photoshop. I often found myself getting lost and not knowing where something was. Thankfully, OSX has a built-in search in the Help section that would help me quickly find what I was looking for.

OSX search was very useful to me when I needed to find where a certain Sketch feature was.

One great thing about Sketch is that it’s all vector based. I had a bad habit of using raster elements in Photoshop because I was lazy, and Sketch has forced me to keep everything in vector.


Sketch for the long run

After using Sketch for exactly 30 days, I’m sold. I now plan to add Sketch permanently to my toolbox. It just has so many features that just make sense. Let me show you a few of my favorite things about Sketch.

Artboards

This is probably one of the best things in Sketch that I never thought I would need. My first project was to add a new feature to our iOS app, and using artboards has just been a timesaver. Being able to see all the screens of your app at one time is helpful and having just one file for all your mockups is awesome. The artboards feature in Sketch makes this possible.

Built-in templates

Sketch comes with some templates that you can use as a starting point on your project, such as the iOS app icon and UI design template from Teehan+Lax. You can also create your own templates if you would like.

Background Blur

Blurring in Sketch is similar to Photoshop, but they have something called background blur, similar to how Apple does it in iOS 7. You can read more about it here. Blurring in Sketch is also none-destructive.

Color Picker

The Sketch color picker is great because it allows you to select colors that are not part of the application. It’s a feature that can save you time, as you no longer have to drag an image to Sketch just to select its color.

Exporting

The Sketch export functionality is powerful, fast, and useful. Exporting to different DPI’s is very easy. It also has a nifty drag-and-drop feature that I tend to use often.

Auto-save and versions

Sketch uses Apple’s Auto Save, which automatically saves your work. You can also view your previous versions.

File > Revert To > Browse All Versions

Plugins

There are many plugins for Sketch, and someone also created Sketch Toolbox, which is an excellent plugin manager. My favorite is the Content Generator plugin, which was created by Timur Carpeev. It allows you to quickly generate sample content such as avatars, names, and more.

I work on a lot of designs that contain lists, and the content generator plugin saves me a lot of time by automatically filling in my mockups with realistic content.

Sketch Mirror

It comes as an add-on for $4.99 but it is well worth it. Sketch Mirror shows you a live preview of your artboards on your iPhone. It’s a little buggy at times, but it is a great when designing iOS apps.


These are just some of the many useful Sketch features that I’ve fallen in love with over the past month. Photoshop and Illustrator still have their rightful place in my toolkit, but Sketch now deserves to be included as well.

What’s really great about Sketch is that it was created for UI designers. Unlike Photoshop which is a tool that tries to be everything for everyone, Sketch has more of a narrowed focus towards creating interfaces. It is also Mac-only, which means that the small, scrappy team behind Sketch is able make changes faster and push new features easier than if they had to also develop for the PC.

Nobody’s perfect

While Sketch is a great tool, it is far from perfect. There is definitely room for improvement. My biggest issue with Sketch is the zoom functionality. It’s constantly falling behind and freezing on me. Also, I’ve had the app crash a couple of times since I started using it, but nothing consistent to make me worry too much.


Just like a paint brush does not an artist make, Sketch will not make you a better designer if you don’t know the principles of design. Ultimately, Sketch and Photoshop are both just tools to help us in our work, and what works for me might not work for you. But if you are a UI/UX designer, I highly encourage you to give Sketch a try. They offer a 30 day free trial and if you decide to make the switch, a license is only $99, which in my opinion, is a great deal!

Resources to get you started

I’ve compiled a list of articles/resources/tutorials that helped me get started. If you’re getting started as well, this list should be plenty enough to help get you acclimated with Sketch.

Free Sketch Files

Other

Hope you enjoyed reading and if you have any questions, feel free to reach out. I’m @jadlimcaco on Twitter. And if you are in San Francisco or the Silicon Valley, I would be glad to get coffee with you and talk design. ☺