I’ve been using Sketch for about two weeks. I’ve played around and, while I can’t say I’ve completely learned how to use it at its full capacity, I can definitely point out the coolest features and aspects I like (a lot!). Those I will mention below are, in my opinion, extremely useful features for UI/UX designers.
The artboard system in Sketch is pretty amazing. You have unlimited space on which you can add unlimited artboards. These can be, of course, of different sizes and for different purposes. For example, you can have the desktop artboard and, next to it, the mobile view, tablet and landscape tablet views while designing a responsive website. Another example would be having all the screens of an app design on different artboards next to each other. It’s like having all the project files integrated in a single screen. In Sketch, everything is vector-based so you can zoom to 100% and work on each artboard. On the layers panel, on the left side of the image above, you can see every artboard as a major layer group.
2. Stacked Layer Styles
In Sketch, you can assign different layer styles to each layer. The cool thing is that you can stack as many of the same style types as you want. In the example above (don’t judge the looks, it’s meant to demonstrate the layer styles capability) we have a rectangle with several styles. Under fills, we have a solid color fill, a gradient fill and a texture fill, each with a different opacity (and you can also set individual blending modes). Under borders, there are 2 outside borders. These stacked styles work like layers and you can arrange them as such. These rules also apply to shadows and blur styles.
3. Pathfinder Always Keeps Shape Info
I have to explain this one. When you create, let’s say, two shapes and you apply a pathfinder action, “intersect” in our example in the image above, Sketch creates a single shape (Rectangle 7), but will always keep the info of the paths intersected and the pathfinder action. This way, you will be able to edit the positioning and action at any time.
4. Artboard Layouts (Grid Systems)
Sketch has a very useful grid system generator, called Artboard Layout. It essentially allows you to easily create grid sets (like the Bootstrap grid system, for example). You can set the total container width, number of columns, column width, grid positioning and lots more, such as colors, the option to use fill or stroke columns. It also lets you set up rows, which is very nice. Having this feature built-in is great, especially when you design directly for developers. The new Bootstrap grid system generator looks a lot like the one in Sketch, making these features work great with each other.
5. Background Blur
A very cool feature in Sketch is the background blur which you can apply on shapes (very important). As you may have seen, the current trend is to use blurred backgrounds or blur parts of the background for better readability, especially in the UIs of mobile apps. In Photoshop, for example, achieving this kind of effect involved copying a section of the image and manually blurring it, then placing it exacly on top of the image and, the worst part, it wasn’t moveable – it was just a static image well aligned. In Sketch, not only do you apply the blur filter very easily, but the blur layer is functional and transparent, meaning that you can move it around and it will actively apply the blur to the content beneath it.
6. Incredible Exporting Options
This is one the coolest features Sketch comes built-in with. This is one of the reasons I previously said that it saves you a lot of time. It basically cuts the annoying process of exporting previews and assets. In order to export assets, you simply have to select the group you want to export, select the file format and the exporting size (1x, 2x, 3x and so on) and then you’re good to go. As you can see in the image above, after selecting the objects you want to export, you only have to set the sizes and it will save the desired assets in a folder of your choosing. You can also drag the export preview directly into the native Apple e-mail app and it will automatically slice the asset and make it ready to send to the team or clients. The same applies to exporting a whole artboard (or all of the artboards).
7. Built-in GUI Templates
Sketch comes packed with some incredible GUI templates. There are iOS icon templates, web design templates, iOS GUI and an incredibly detailed material design template with all elements you can think of. Of course, there are plenty of UI templates you can download for Photoshop and Illustrator, but seeing this kind of thing coming packed natively in Sketch is a great thing, in my opinion.
8. Sketch Mirror
Last but not least, one of the most amazing features actually, is the Sketch Mirror. This lets you preview your work in Sketch on any iOS device – LIVE. As long as your device (i.e. your iPhone) is connected to the same Wi-Fi network as the MacBook or iMac you’re working on, you can preview and make changes live. The Sketch Mirror app for the devices costs an additional 5$, but I say it is completely worth it, especially when you design UIs for iPhone or iPad apps. I use it a lot and it comes in extremely useful.
The Bottom Line
Some may say Sketch doesn’t have the power of Photoshop or the whole Adobe suite and is a lot more limited on various levels. It’s true, BUT Photoshop comes with features that UI designers will never use. Sketch is a lot more lightweight and a perfect tool for UI/UX design. I personally think its features make it a lot more efficient and save you a lot of time when you work on designs. I personally love it and I’m making the transition to working mostly on Sketch.
We could say that a drawback of Sketch is its compatibility exclusively with Apple products. It is true, Sketch only works on Mac and the Sketch Mirror only works with Apple devices. Maybe in the future Sketch will be available on other platforms too.
Now that I’m making my way through Sketch, I will constantly be posting tutorials, freebies and tips for it, so stay tuned.