Interface design has moved from Photoshop to a new contender: Sketch. Designed by Bohemian Coding, a company with less than 20 people, it has eclipsed the nearly 5-billion dollar behemoth, Adobe, to capture more than a third of the market for digital design. There are lots of good articles and blog posts that one can read to get the hang of it (for switching from Photoshop check here, for the learning community behind Sketch here and the Sketch collection on Medium here).

We challenge our tools all the time and I am personally very excited to see the evolution of live-collaboration within tools like Figma for instance. However, in this article, I want to share how I use Sketch, what works for me and what I have learned along the way.

Things to consider before you even start…

Following a few simple steps can simplify your life, especially when you work on large projects or when more then one person is working on the same Sketch file. Even though I know that following these rules can be annoying at times, for me it proves itself worthwhile every single time.

Always work on a clean file…

That sounds obvious, but it’s very crucial to actually do it. I structure my files by the features of the application that I am designing. For example, if I were working on a mobile taxi-hailing app, I might structure my file as follows:

  • 01-Login
  • 02-Home
  • 03–Ride
  • 04-Food
  • …and so on and so forth

That means I use one page for each flow or a feature. That allows me to name Pages and Artboards in a way that when we present work to each other or clients, it’s easy to identify exactly which screen we are talking about.

Since every Artboard across our Sketch document now has a unique ID, I can identify each Artboard individually and don’t have any duplicates like Enter Name or Menu etc.

I find this very helpful when I have to navigate a client through a flow over a phone call or Skype. It’s much easier to say “Screen 04a goes to 07g and then to 08b”.

Parent Folder / Child Folder / Grandchild

You can use a slash (/) to tell Sketch to create a folder structure. For example, when you export your screens, Sketch uses the titles of the artboards with the slash as a folder separator. So, a title like this “01-Login/01a-Login with Facebook” creates a file called “01-Login with Facebook” under a folder called “01-Login”. The same thing works for nested symbols and styles.

ProTip: How to use the Slash to create a folder structure in your Sketch exports

Name your layers…all of them!

Well, that sounds like a lot of work but it isn’t at all, considering the amount of time I save later in my design process. I follow a very simple, yet very effective rule. Name a layer for what it is, and not what is in it. So all these layers called Group671 (yes, it took me a while to learn that lesson) should become something like List Item Double Row or Full Bleed Button. Now I don’t use names like Enter Phone Number or Select All. Instead, I call them Single Line Text Input and Menu Item. This goes very well with the search panel in Sketch when you want to select the same elements across multiple Artboards.

Sketch has Symbols and Styles — and they are very powerful tools!

There are many good articles out there already that explain Symbols and styles very well. There are also Text Styles and Shared Styles. These are one of the reasons that Sketch is so great.

Most UI elements can be converted into symbols, and believe me, that saves a lot of time. Sketch has improved the functionality of symbols quite a bit — in the latest update, for example, you can even swap nested symbols. While this might seem advanced at first, once you’re designing lots of screens, you’ll need to utilize these options to tame your files!

UI elements library

I use symbols to create libraries of UI elements. Once we hand over our Sketch source file to a client, we make sure they get something that our client’s in-house team can take forward easily. That way it becomes very easy to extend the design later, for example, to add a feature or functionality. Similarly when handing over a file to developers one should be able to find all assets well organised so that the transition from Design to Development is as seamless as possible.

We create libraries using symbols

Text Styles

One way to use text styles is to set up a style guide before you even start your file. This, however, implies that you already know how many, and what kind of text styles you need. I create a text style library along the design process and name them according to their function. That way it becomes easy to change and adjust them later on. As before, use the ‘/’ to organise your styles in folders according to their function i.e. Dialog/Title or App Bar/Tab Inactive.

Grids are great!

They are easy to make…

You need them all the time, so never waste time on difficult margin adjustments and copies of layers. Especially when you want to be pixel perfect — I know that Sketch allows you to use fractions of pixels, but having the option doesn’t mean it should be used. Ever.

Design in a grid

You can set up a grid according to your Layout and Control+Gswitches the Grid on and off. If you are designing for mobile just keep it at 8px — life will get much easier.

Shortcuts that I can’t work without

Ok, most people probably know all of them, but just in case, there are some essential ones that one has to know. Standard shortcuts like hold Shift while transforming to keep the ratio, are the same in Sketch as they are everywhere else.

  • cmd+alt+v: this lets you paste the style of any object into another object
  • cmd+shift+v: this lets you paste in the same place. For instance, pasting something from one group into another in the same art-board.
  • cmd+click: Simple, yet extremely useful. having pressed cmd you can select any layer no matter how deep it is nested inside a group.
  • Don’t browse through your layer list to get into higher levels in your groups. Just press Esc.
  • If you looking for another layer in the same group, press Tab to go through them one by one.
  • Press Alt to measure all the distances
  • Use A to create an Artboard, S for Slice, R for Rectangle, U for Rounded Rectangle, O for Oval/Circle, L for Line, V for Vector, P for Pencil and T for Text.

Well, most of all one should go through this list of shortcuts and start using them. They will help you speed up a lot. Once you start using plugins, their custom shortcuts are also very useful!

Plugins we use on a daily basis

Speaking of plugins: they are the best, and they make Sketch incredibly powerful. You can make your own Plugins and there are tons already out there and new ones coming out all the time. Consider signing up to the Sketch Newsletter to stay updated. The ones below are the ones I use and find essential every day.

  • Sketch Toolbox: lets you download, install and manage all plugins that are out there in one place.
  • Craft by InVision: this is probably the most powerful Plugin out there. Sync your work, create a style library, pull in placeholder images, stock and life data (text, pictures, tables) and duplicate elaborate nested groups having full control over individual content (think of contact lists, an email inbox, picture grid etc). You even can have one style library that you share across multiple Sketch documents. That means if you want to change one colour in all of you screens as well as in multiple files you can do that with one single click. And I am quite excited about Craft Prototype when it fully releases.
  • Remove Unused Symbols: Well, let’s just say not all of my Symbols survive the design process and as I said earlier, having a well-sorted symbol page is great, make sure you get rid of what you don’t need.
  • Rename It: a very useful plugin, to rename multiple Layers or Artboards at one go. You can sequence them, add dimensions and much more.
  • Sketch Commands: Everything and the kitchen sink. It’s best to go through the documentation; this plugin definitely comes in handy.
  • Sketch Constraints: When you design for multiple screen sizes, there is no way around this one. You can define any position and alignment relative to other objects as well as borders.
  • Relabel Button: this is quite a simple plugin, but I use it all the time. It means that no matter what the label of your button is, the margins stay the same. The cool thing is that works for any kind of bounding box.
Zeplin

Handing over finished designs to our friendly developers in a way that they can easily use is extremely important. Zeplin offers exactly that. Its integration with Sketch makes this process super easy.

In Conclusion

The set of available design tools is ever changing and improving. I always try to explore different ways of getting things done and exploring new tools which allow us to do new kinds of design work. For me, that means following a very simple rule: never be afraid of learning a new tool, even if it means investing some extra time in the beginning. Nothing is worse than stagnation, especially in design.

If you have better ways of doing things do let me know below. I am always eager to learn and to improve the design process that I follow.

Read more