How to improve your Sketch workflow to save time and mental effort
A short collection of ideas I’ve gathered over time that are definitely worth sharing
The role of the designer in a company changed from I first started by a lot. From the position we have at the table to the way we organise our files, the modern designer has to continually adapt and always improve.
During my time working as a professional designer — by Steve Pressfield’s definition of a professional found in his book called Turning Pro — I’ve had the opportunity to work as the single designer in the company, but also work in teams up to 14 designers, both local and international teams. In this time I saw how other people work, what their strengths were and what they usually lacked in their workflow.
In 2018, Sketch dominates the market as the preferred tool for designers in which they can create their rockstar UI and I’m one of the majority who uses it as well.
Next, I’ve compiled a short list of best practices that I’ve observed and actively use myself in my daily routine. I hope you’ll find these things useful and integrate them in your workflow. Let’s jump into it!
Tiny time savers that live in your keyboard
I haven’t seen a single great designer that uses the UI to navigate around, they all use keyboard shortcuts.
Shortcuts are exactly what we’re always looking for in our daily lives; as humans use them to save time and resources whenever we can, not only at work. The shortcuts available in Sketch can save you a tremendous amount of time in the long run if you do the math.
Say that you want to access a tool from a dropdown. If you’re like me, that might take you 3–4s, but if you use the keyboard shortcut equivalent, that’s pretty much instant. Think about the thousands of times you select something from a menu per day.
Jeffrey and Robert from Sketch Shortcuts compiled and maintain a list of Sketch shortcuts that you should definitely learn. I can’t rave enough about how important this website is!
If you want to take this a step further and become a power user you can also create your own.
Keyboard shortcuts are essential for having a productive workflow and they are really easy to learn and use. Give them a try!
The most powerful aspect of Sketch
I’ve been using Sketch as my main tool for design for a while now and I’ve installed every possible plugin that caught my eye, except this one. People on Designer News were raving about something called Sketch Runner and for some reason I always found something to distract me rather than trying it out. It turns out it’s amazing and helps a lot. 💥
Sketch Runner allows you to do a wide variety of things, but the most important two for me are:
1. You can run everything
2. You can install other plugins and run their actions
Make sure you check all it’s features, you might find something you’ve been looking for a long time.
The good news here is that Runner is not the only one that proves to be a huge help, I’m not gonna lie!
I found that the most time saving plugins, that eliminate busy work, prove to be these ones: RenameIt, LaunchPad, Symbol Organiser, Craft, Artboard Tricks just to name a few from my list. I’m also working on a plugin myself and I’m looking for a developer that can help me finish it. If this is you or you know someone willing to help the community, let me know!
Once you integrate the usage of plugins in your daily routine, they will improve the way you work by an incredible amount. I’ve saw designers who don’t use plugins to automate their work right next to those who do, the difference was enormous!
Clean your r̶o̶o̶m̶ Sketch file
If you live on the internet like me, you probably already know about Dr. Jordan Peterson and about his advice on cleaning your room. If not, you can check him here:
And this applies on your work ethic as well. Keeping your file organised is one of the most important things you can do when designing anything. Your future self will definitely thank you for it.
Here’s how I currently do it:
File
Start by giving your file a proper name. I saw big companies using name systems that look similar to this…
[initials-of-the-designer]-[date]-[version]
es-04042018-v1.sketch
…and I tend to see the reason for it more and more. By doing this you can easily identify who worked on the file and in which state the file is when working in a big team that has everything in the same spot. Using Finder’s colour tag to mark if the file is done (green dot) or in progress (yellow dot) it’s also an added bonus.
Pages
Usually I have the chance to work on designs that will be implemented on three platforms: iOS, Android and Web, so my page structure looks like this:
The old UI or the un-needed things are dumped into a special page called Archive. My friend Teo likes to name this page “Graveyard ⚰”, because he’s cooler and makes good use of emojis too.
Artboards
Let’s suppose I’ve designed a couple of screens by now and the structure looks like a mess. While having my artboards selected, I fire up Sketch Runner by pressing the keyboard shortcut “cmd + ’ “, run the Rename it plugin (see how it all ties up? ) and give them a proper name.
For easy export, I tell Sketch that the screens in my selection should be in the same folder, so I add for example “iOS/” at the beginning, followed by a number that indicates the screen’s position in the flow and last the name I desire.
After that I run the ArtboardTricks plugin mentioned above and everything gets arranged into a nice grid. This is the minimum I do, yay for automation!
Groups
Since a file can have a huge amount of groups, it is fair to name just the important ones. You’ll know which ones are important but don’t stop just at naming them. Make sure the layers inside the group have the appropriate layer constraints.
When I notice repeating elements, I usually use AnimaApp’s Autolayout so I can save time and headache moving or removing anything.
Symbols and text styles
Symbols are a huge topic, I can dedicate a whole entire article about them but I’m sure other people already had, so I’ll just remind you that it is strongly recommended that a designer makes great use of these tremendous time savers. Whenever you can make something into a symbol or a text style, do it. It will save you time along the way just because you can edit the content on the spot.
Tag team the developers
Usually you are not alone when working on a project. You’ll interact a lot with non-designers, mostly developers, and that’s a great thing. A short empathy driven exercise will make you aware that your final .png files are not that useful for them. This means your work is not done just yet.
Exporting the assets and specifications is no longer a pain, and if your company allows you to use services like Zeplin or Invision Inspect you are saved.
A great alternative for these two is called Sketch Mesure and it will locally (no cloud involved if you worry about security) generate a specification page like this at a press of a button.
If you didn’t know, correctly slicing your work will allow the developers to have easy access to assets like images or icons that you placed in your design. Here is the way to do it in Zeplin, a tool that I’ve used thee most:
This will turn out very useful since you are delegating part of a tedious work and in exchange you’ll have more time focusing on more important issues. I could never imagine a world without these tools!
Lend a hand to your project manager
Did I told you I have a Sketch plugin in progress? Well, I hope it will work well automating this next thing I do.
Because most of the time it’s a good idea to document everything design related on mediums like Confluence, a thing I like to do is to provide an overview of the flow/entire app by using the actual screens. It looks something like this:
What this does is to create an overview of everything I’ve designed so that people can use it as a reference. It has a big title, names for each artboard (that mimics the titles you already defined) and a big slice all around. Some people even like to print these and leave comments with coloured crayons and sticky notes.
Finally, I place everything in a Dropbox folder and share it with the team. My preferred folder structure looks something like this:
In conclusion, I think it’s safe to say that we all love to work smart and to save time. These few simple tricks made my workflow more streamlined and much more easy to execute when facing any type of project and I hope you learn something from them. 💥
If you think these things will help your workflow as well, please let me know so I can post more about similar subjects. Thank you for reading!
