In the excitement of learning a new tool and all of it’s ins-and-outs, some stuff can just get lost in the noise. Only recently (read: 6 months) did I start using Sketch in my regular workflow. I was put on a project with our product team and decided it was time to check it out. So I downloaded it and started clicking around. In general, it was easy to pick up and get stuff done. However, a few things took me a while to figure out that would’ve kicked my workflow into high gear had I known about them earlier.

What are “pages” and why do I need them?

I honestly had no idea what I was supposed to do with the “pages” feature in Sketch, and most of the people around me weren’t using them either. Now that I’ve had some time working in Sketch and have worked on a few larger projects, I have come to love them. I’ll usually start a project with one “page” and then, as the artboards grow, I’ll split it up into multiple pages to help keep everything organized.

SketchTips-Pages-01
See how easy it is to switch between the different pages of a project?

For example, I’m currently working on refining the alert system we use at work, so I’m trying out my ideas in various settings. To keep them from getting all jumbled in one “page,” I broke it up into the different places where you might find alerts to make it super simple to jump around and show my team what I’m working on. Use the organizational system that you are afforded in Sketch. There’s no reason to have that many artboards in one page area when you can break it up and save yourself some sanity (and file size!).

How do you collapse all of the layers in the layers list?

I navigate my Photoshop files by layer and hardly ever use the direct select tool. The shortcut to collapse all layers in Photoshop is to hold Option and click the arrow next to the artboard (or layer group) you are trying to collapse. This will collapse all folders and effects, giving you a list of your artboards and layers. Sketch has no such shortcut. I have been passed a file to work on and all of the vectors, masks, groups, “Detach from Symbol” symbols are all open and it. Drives. Me. Crazy. I want to collapse them all and organize them, but there’s no obvious way to do this in Sketch (without doing it manually, one at a time).

Gone are the days of manually collapsing layers and folders. Huzzah!
Gone are the days of manually collapsing layers and folders. Huzzah!

I scoured the internet looking for a master list of shortcuts hoping it was simply an oversight in all of the “Top 10 Tips & Tricks for Sketch Newbies” posts. Then one day I was in the “View” toolbar menu (doing god knows what) and saw the option “Layer List.” Under “Layer List,” there’s an option to “Collapse Artboards and Groups.” Oh happy day! I have finally found you! Work has been a better place since.

How the heck does this zoom tool even work?!

I’ve been using Photoshop for about 12 or 13 years. I have become accustomed to a life where you hit “Z,” and you get a zoom tool that you drag a marquee and zoom in on a section. Sketch’s zoom tool frustrated me to no end because just hitting the “Z” didn’t enable zoom. I’d absent-mindedly hit “Z” and start clicking around and just move around a bunch of layers and curse Sketch as I CTRL+Z all of the mess I’d just made.

You have to hold it down and then drag your marquee where you want to zoom in. It took a while, and many fuck-ups, but my pinky has finally been trained in the art of holding that “Z” while I do my zooming.

Draw grey rectangle with grey border. Remove border. Repeat.

Every time you draw a rectangle in Sketch, the default style is grey with a grey border. 90% of the time I remove that border. This doesn’t take much time, but it’s something I’m doing 90% of the time I’m drawing a rectangle (which is tedious). Sketch has so few preferences I just assumed they’d done their research and determined this styling would be the best starting point for every rectangle in every situation (#RookieMistake).

Get rid of that border!
Get rid of that border!

A few weeks ago Andy Orsow over at Invision put out this video containing a few tips for working faster in Sketch. Cool. Tip #3 (starts around 1:05) is about changing the default styling. It was a fucking revelation for me. He shows you how to change this default by setting your rectangle to the default you want, then going to Edit > Set as Default in the toolbar.

Mind. Blown.

So many moments of my life will be saved because of this tip alone.

After using Sketch daily for the past few months, I’ll never go back to Photoshop. Every day I get quicker and the flow is just so much better for UI design. If you have the time and determination (it’s not really that difficult), it’ll definitely speed up your workflow, and, with all of the awesome plugins out there, you can tailor it to your needs.

If you’re looking 👀  for even MORE tips and resources for Sketch, check out this round-up that Kim put together. It has everything. Literally. Everything.

What are your favorite Sketch tips? Share them with us in the comments or Tweet them to us!

Sketch Tips from a Photoshop Convert

Jamie Aucoin

Designer @ Spiceworks

Category: ResourcesUI/UX
7
475 views

7 comments

  • Awwwwwwww yessssss, some of these were game changers. Changing default styling on shapes and a shortcut to collapse all the boxes made my fucking day. Yeeeeeeeeee hawwwwww, yeah I just drank too much coffeeeeeee. Thanks man.

  • Talking about the “Collapse Artboards and Groups” option, if you haven’t already, you should lookup how to bind keyboard shortcuts to menu commands in Sketch. I have it setup so I can press “⌃⌘G” to trigger this.

  • To *Collapse All Layers* via a custom keyboard shortcut you might want to try this trick: http://sketchshortcuts.com/#settings (Not my post).

  • The collapse artboards and folders has a shortcut! CMD+SHIFT+OPTION+C

    • I tried this, did you maybe set that as a custom shortcut somehow? I need details!

  • Thank you so much!! A few of these blew my mind. I am also a Photoshop convert. But I loooooove Sketch!

Join the discussion

Your email address will not be published. Required fields are marked *