Efficient Design in Sketch With Custom Keyboard Shortcuts

Since 2012, Mac OS X (macOS now) has included support for custom keyboard shortcuts in any application installed on your Mac. It was kind of a Big Deal™ when it was announced, but has since fallen out of the spotlight and people don’t really talk about it anymore. Turns out, I was a pretty big Apple nerd in 2012, and what seemed like a Big Deal™ to me wasn’t such a big deal for normal people. A couple of peer-design sessions recently shed light on this disparity, and it turns out quite a few designers I work with weren’t aware that OS X (for now) had that ability, and that the feature works hand in hand with Sketch to drastically increase the efficiency of designing pixel-perfect apps and website and…whatever else people do in Sketch these days.

Somehow, Sketch out of the box includes neither toolbar icons, nor keyboard shortcuts to perform one of the most common actions as a designer: Aligning and Distributing. Drives me nuts. You can’t even customize the toolbar with those icons. Every time, tens of times a day, the mouse cursor moves up to Arrange, down to Align Objects, right to one of the options, and…ops, I moved too far. Back to Align Objects, slowly move to one of the alignment options, and click.


Here’s the solution:

Open System Preferences and click on Keyboard. I’m gonna assume you can do those without screenshots.

Go to the Shortcuts Tab, down to App Shortcuts in the list on the left, and click the “+” to add a new App Shortcut, as the “+” label would suggest.

The panel is fairly self-evident. You can select which installed app you want your shortcut to be scoped to. Shortcuts in one app won’t affect shortcuts in other apps.

Step number two is to type in the Menu Title, as it appears in the app itself. This is where you have to exercise your rote memorization techniques (Wish OS X would just scan the Menu for all the items and let you search, but alas, everybody at  is working on iOS or something (WHERE’S MY NEW MACBOOK PRO!).

Go back to Sketch, find the menu item you’re creating a shortcut for, and type the name exactly as it appears, capitalization and all. Next, click on the Keyboard Shortcut field, and type your shortcut. You need to get creative, but it helps to have a system, so they’re easy to remember.

PRO TIP: What happens if there are two menu items with the same name? In Sketch’s case, “Horizontally” applies both to distributing the selected objects horizontally, and to centering them horizontally. If you simply type “Horizontally” in the Menu Title field, OS X will simply find the first one, and apply the shortcut to that. To disambiguate, you need to type the entire path to the menu item you want, separated by “->

For example, to simply center items horizontally, you can type “Horizontally” since that’s already the first item. But to add a shortcut to distribute items horizontally, you need to type the full path, starting with the top-level menu item. In this case: “Arrange->Distribute Objects->Horizontally

That’s it! To confirm it worked, go back to Sketch and find the menu item, it should have the shortcut listed there:

Here’s my list of shortcuts for Sketch. I’ve been using these shortcuts in both Sketch and Photoshop for years, and they work well, are memorable, and don’t override other important shortcuts in either app. (In Photoshop, you customize keyboard shortcuts in the app itself.)

“C” in these shortcuts stands for “Center” which by definition means horizontal centering, and “M” stands for “Middle” which also by definition stands for the vertical middle.

Hope that helps!

p.s. You’re mapping your useless Caps Lock button to Control, right?

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.