June 17, 2019 From Photoshop to Sketch

You might be thinking that I’m about to share the ultimate guide to quickly convert PSD files into Sketch files, but spoiler alert – you are wrong. Honestly, such a thing doesn’t really exist, believe me, I’ve tried! I’ve even paid for services; everything is a lie.

So back to the real world, after spending too much time looking for an unnecessary solution I found myself at an interesting crossroads; keep using Photoshop as my main UI design tool or invest some time trying to learn a new tool. I did choose the second one, and this is what is this post about.

I know that many designers in our community still use Photoshop for designing user interfaces. I’ve seen this a lot as a copilot especially when I get questions like, “can we use Photoshop?” and “is Photoshop allowed?”

Investing some time on learning a new tool is necessary in any field. You will see architects learning 3D software, medical doctors learning how to use some complex machines to examine their patients more deeply, and school teachers adapting their teaching methodology to new technologies; this is a natural part of our professional growth. And, this is how we really have to see it: as an “investment”.

For me this was really hard initially. I was reluctant to change because I had been a web designer using Photoshop for more than 10 years, and then suddenly there was a new way to work using these new tools, Sketch and XD. I even remember telling someone here in the community, “those tools don’t have a future, you will see everyone coming back to Photoshop again”. I was wrong.

So you might be wondering, how was my transition? How did I start? Was it really worth it? Let me tell you my story.

A friend once told me “create something in Sketch”, so I did that. Now I thank him for that advice. But in order to create something you have to know the basics.

1) I dedicated some long hours to learning the tool by watching online videos in English and Spanish. Studying in your own language is always an advantage. I’m sure you will find videos about using Sketch in Indonesian, French, Russian, or even Chinese.

2) Once I did know the basics of Sketch, and with basics I mean knowing its user interface, the controls, and even the keyboard shortcuts; I started to “play around” with the software. For example: creating a splash screen or designing a login page are small exercises that will start getting you familiar with the new software.

3) After playing around for a while, I realized it was time to create something. So I took an afternoon to create a full website for a personal project of my wife’s using only Sketch. This was the moment when I finally understood the potential of this tool.  I started to spot the main advantages over Photoshop and I asked myself “wow, why I didn’t start earlier?”. Yes, cliché right?

Of course in this process you will need answers about how to do X thing using Sketch. Maybe something you used to do with closed eyes in Photoshop will require some extra time in Sketch. For that, a quick Google search will always give you the answer.

Finally, without getting too techy about why one is better than the other, I will give some advantages that I see from my own personal point of view after a year using Sketch.

• I can design faster using Symbols, but more important, I can fix/change things faster.
• Overall faster software performance. While designing in smaller sizes I can have more and more artwork without losing any computer performance. For example, to create a beautiful iPhone retina App I used to design in Photoshop using 750px by 1334px. Now in Sketch I design using half size 375px by 667px and I’m still able to export the design to @2X or even @3X without losing performance or quality. This is amazing!
• Plugins: yes I love them! It is amazing the amount of plugins available for Sketch. From plugins that allow you to quickly add dummy data to plugins to export the design directly to Marvel or Invision with options to get the CSS code for developers. You can literally find a plugin for everything.
• Libraries. The quick access to tons of icons, Android and iOS UI, stock photos, etc, is really something helpful.

There are tons of advantages, but I invite you to explore this tool (or Adobe XD) and discover for yourself your own pros over your current tool.

I will share with you the same advice that someone once shared with me, “create something in Sketch”.