It’s been a little over a month since I’ve started designing in Sketch App, versus Photoshop —which is what I’ve used for all of my career. That is until now.
I finally understand all the hype around Sketch and want to share the top three reasons why I’m glad I made the switch. By no means am I an expert in the tool yet, and there are still features I’m trying to get used to, but overall I am very pleased with these three particular features Sketch brings to UI design in comparison to Photoshop; Symbols & Styles, Exporting Assets, and Plugins.
Before I begin, I want to say thank you to my company Shockoe, for allowing me to take the leap and learn something new despite the risks associated with learning curves. I’m glad I work in a company that is always eager to learn new things in the effort to improve workflow and time efficiency.
At first Sketch was slightly frustrating but this is to be expected with change. However, in just one month I’ve designed three mobile apps, worked on two prototypes, and exported design assets for the development team. This has giving me a pretty well rounded view on the Sketch.
Reason One – Shared Styles & Symbols
It’s amazing how much time I can save with Shared Styles when making design changes. Shared Styles also keep design consistency when using various artboards. For example, I start using a hex color blue. Later along in the design process, I decide to use a different blue. To assist me with this, I create a Shared Style called “Blue Fill” and use this style on any shape/item that needs to be filled with the color blue. If the hex color for that blue needs to be changed, I edit my style “Blue Fill”. I do not have to select every item using the blue I want to change. This concept can also apply to a button or other actionable items with all of its various states including but not limited to focused, pressed, and disabled.
Symbols work very similarly but for grouped items, or multiple items that collectively make a whole. One example is a navigational item that might be the same on multiple artboards. Once again allowing you to only edit once versus changing every instance that group is used. The only comparable feature in Photoshop are smart objects, but I would have to argue it’s not as intuitive as Sketch’s Symbols.
Reason Two – Exporting Assets
When it comes to exporting assets for development it’s a fast and easy process compared to Photoshop. You can easily export sliced layers/groups at various sizes or formats, meaning it will save the same slice into multiple files for various screen resolutions with a click of a button! In Photoshop, slicing and saving assets is very time consuming, especially when trying to save an asset in multiple resolutions. You can also export multiple layers/groups at a time, by selecting “Export All.” Voilà! All of your assets have been saved at all the various screen resolutions and file types.
Reason Three – Plugins
Another great thing about Sketch is how many Plugins there are to make my life easier. One plugin called Zeplin will take your Sketch file and provide developers with its design specs. This makes the hand-off very easy for the designer and developer. The developer doesn’t have to sort through groups and layers to find the specs they need. This also frees up time for the designer as they did not have to prepare a spec document. There are a bunch of Sketch plugins and integrations available for mockups, prototypes, spec inventory, and collaboration.
Sign up for the Shockoe newsletter and we’ll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.