Sketch 3 and How Your Keyboard Can Be Your Best Friend
I switched to Sketch 3 by Bohemian Coding this past year after spending most of my adolescence and adulthood working in the industry standard and ever-popular Adobe Creative Suite. The switch to Sketch has been fantastic for me. I had to relearn shortcuts and rethink some of my process, yes, but the benefits have proven themselves worthy of the investment of time. Sketch is the slim and efficient cousin program compared to the bloated, three-eyed monster breathing heavily in the corner of your hard drive sipping on memory from a curly straw and eating gigabytes for snacks.
I’m not here to tout Sketch’s many advantages. Sketch also has it’s bugs and holes. It’s not complete or perfect. Nor is it meant to replace Photoshop and Illustrator in their entirety. I’m merely writing this to help any existing Sketch users to possibly discover an improved workflow.
How I typically work
Being a product of the Adobe ecosystem, I am most accustomed and efficient using a mouse with my right and keyboard shortcuts with my left hand whilst working on web related projects. Any shortcut that requires me to use both hands slows me down. It annoys me. The mouse has just become a preference, but that’s how I went into Sketch and have been using it — mouse and keyboard style.
Sketch was adaptable for me from Adobe because it has many one-handed shortcuts that I could use with ease. The shortcuts that are a lot more intuitive because Sketch is in essence a much more streamlined, smaller program and thus has more keys on which to throw all these functions.
For example, V = Vector (or pen tool), R = Rectangle Tool, A = Artboard, Crtl + L = Toggle Layout Guides, T = Type Tool.
As you can see, most all of them involve a letter of the main function of the tool. Letter association = easier to remember. So I had no need to change. I could do everything I was accustom to doing in the same way I had done it in Photoshop and Illustrator even though it wasn’t necessarily the best way to work in Sketch.
My recent revelation
I came to realize these leftover habits were not doing me any favors. I discovered a series of shortcuts that in my mind make working in Sketch a lot more user-friendly and pleasant. I could very well be the last person to realize this and could have just been completely dense over the last 8 months of using Sketch so if you already know of these, bravo. If not, read on.
Shortcuts are one of the first things I look for in a new program. I don’t know how many times I’ve looked through Sketch Shortcuts and found a new shortcut I never realized was there. I recently came to realize you can do most anything without leaving the comfort of your keyboard. You can select, reposition, resize, rename, rearrange, and more. Let me elaborate.
Moving through layers
I’ve always felt Photoshop files have a tendency to follow the second law of thermodynamics, i.e. they increase in chaos the longer someone (or a group of someones) works on them. Layers are everywhere. It’s nearly impossible to select the exact thing you want to edit without digging into some group or other. The effort to organize and maintain the file is enormous especially with layer comps. Sketch has a system that allows you to navigate the layer menu (that lovely panel on the left) with much more ease.
TAB moves you down to the next layer or group on the same hierarchy level. So if you have Group A with rectangles 1, 2, and 3 like this:
⌊ Rectangle 1
⌊ Rectangle 2
⌊ Rectangle 3
TAB cycles you through selecting rectangles 1 → 2 → 3, then back to 1.
SHIFT + Tab moves you back up the other way. Rectangle 1 → 3 → 2 → 1. This is very similar to moving through a web form online. TAB goes forward, SHIFT + TAB goes backward.
Well, what if you selected Group A and want to select Rectangle 1 inside that group? Just press ENTER. ENTER drops you down one hierarchy level. From there, TAB to the desired layer within the group. Need to get back out of that group (or up one hierarchy level)? Press ESC. You can ESC all the way back up to the artboard if you like.
Simple as that. Now you’re poised to move through the document and selections in a flash.
Keeping a document clean and tidy is not only good practice, but common courtesy. So let’s add one more useful shortcut to your repertoire.
⌘ + R = Rename a layer. (Enter [or ESC] = Done)
Once you have a layer selected, just hit the ole ⌘ + R and get it labeled to something more relevant than Rectangle 1. And when you have edits for multiple layer names, you can just TAB through while renaming is active to edit them much quicker.
Note: If you need to batch rename layers (so make the same edit to a bunch of layers) there’s a plugin for that. I’d check out Renamy.
One of the most frustrating things is double-clicking into oblivion before hitting the right layer. Double clicks in Sketch drill down into group structures but it also activates the text edit at the lowest level. There’s nothing like accidentally double-clicking one too many times and having to start the drill down all over.
⌘ + Enter enters a text layer in edit mode
And ⌘ + Enter takes you back out of text edit and saves the changes.
More of my commonly used shortcuts
Those are the main shortcuts I wanted to highlight. My other most used shortcuts are below and mainly involve positioning and resizing.
- → ← ↑ ↓ = Nudge by 1px in any direction
- SHIFT + → ← ↑ ↓ = Move by 10px in any direction
- ⌘ + → = Increase width by 1px
- ⌘+ SHIFT + → = Increase width by 10px
- ⌘ + ↓ = Increase height by 1px
- ⌘ + SHIFT + ↓ = Increase height by 10px
- CRTL + L = Toggle layout grid
- ⌘ + D = Duplicate layer/group
- ⌥ + Hover = Measuring distances between element selected and element hovered over
Real world example
So let me take you through a relatively common real-world example of how all these shortcuts can be used together.
Say you have Button A on an artboard. You need to make a Button B that’s the same color, different label, 10px wider, and below Button A.
I would ⌘ + D (duplicate) Button A, ⌘ + R to rename it to “Button B” and then use SHIFT + ↓ to get it below Button A. Then, ENTER to open the Button B group and TAB to the button background color. ⌘+ SHIFT + → to make the button wider by 10px. TAB through to select the text layer, ⌘ + ENTER to edit the text and ⌘ + ENTER to save it. And boom, new button done. My hands never left my keyboard.
You can do so much through the keyboard in Sketch. You’re able to eliminate that clumsy transition between keyboard and mouse that can create frustration and slow down your work. The trackpad then becomes the natural tool to use when you need a cursor.
I sincerely hope Bohemian Coding intended for a user to utilize this trackpad and keyboard setup when they created these shortcuts for Sketch (because intent would make their handiness that much better). Although I still keep my mouse handy, I’m finding myself using the keyboard and trackpad combo more in my everyday designing because of these shortcuts.
(Note: I realized after typing up the first draft that maybe Adobe had some of these shortcuts already. I looked them up and while there are similar functions, they don’t work nearly as efficiently and are attached to obscure keys that would take practice and use to remember. I picked up the Sketch shortcuts in a day or so. Not to mention I’ve used Adobe for 10+ years and just now found out about them. Again, I could be slow, but I’ve also never encountered anyone else who has consistently used them.)