Sketch Tutorials
Shortcuts, Hotkeys, and Gestures: 5 Ways to Become a Design Ferrari in Sketch
Note from the author: This article was written with the Sketch application in mind, but these tips will apply to any day-to-day workflow!
I remember the first time I really experienced the power of shortcuts. A friend of mine did 3D modeling in Autodesk Maya, and I asked him to show me one of his projects. As he manipulated the canvas, I watched in disbelief as his hands never touched the mouse. He was zooming in and out, selecting and moving vertices, positioning the camera, and creating new objects on the screen…all from the keyboard.
According to him, he hadn’t had a mouse in two or three months, and couldn’t really be bothered to get one, so he just taught himself how to get by without it.
I thought he was crazy, but was silently fascinated by his ability to operate such a complicated application so nimbly and masterfully without the single-most necessary input device in computing.
Today, I regularly use 107 shortcuts in Sketch.
But I don’t think that’s uncommon. When you use an application every day, whether you’re a creative or an accountant, you start to crave efficiencies — tiny little things you can do to make your job faster and easier — so you can spend time doing more important things like hanging around the water cooler to talk about the latest season of Stranger Things.
The first week or so of learning a new shortcut or hotkey will be strictly recall. You might even need to write it down. The trick is to force yourself to use the shortcut at all costs, even if it means taking the time to look it up.
The first week or so of learning a new shortcut or hotkey will be strictly recall. You might even need to write it down.
You’re training your brain to learn the keys, and your muscles to remember the shapes the shortcuts form on the keyboard.
After the first week, muscle memory takes over. You won’t have to look at the keyboard for Command-Shift-J (reveal layer in layer list) or Control-Command-H (distribute objects horizontally). Before you know it, you’ll have a large toolbox of efficiency tricks that save you hours throughout the week.
Here are some techniques I use to speed up my Sketch workflow:
1. Create custom shortcuts in the Mac Keyboard preferences.
If this is the only thing you learn from this article, then it’s a win for us both.
Open your system preferences and find the Keyboard panel. Did you know that you can create your own custom keyboard shortcuts for any menu item in any application?
I remember being frustrated that seemingly-common actions in Sketch (alignment, in particular) didn’t have default shortcuts out of the box. Luckily, I learned how easy it was to create application-specific shortcuts in this hidden Mac menu.
The syntax is simple. Start by finding the action in the Sketch menu (use Help if you can’t find it).
Once you’ve located the action, write down the menu map that gets you to that action, separating each “step” with a “->”. That’s a hyphen then a greater than symbol. Don’t forget the top menu.
So the menu map for “Align Objects Left” would be:
Make sure you don’t add any extra spaces. Once you’ve written out the menu mapping, click into the Keyboard Shortcut box and assign a key combination that will trigger this action. Don’t make it too obscure…if it’s align left, use something obvious like Control-Command-Left Arrow.
That’s it…now go test it!
2. Use the BetterTouchTool app to fire shortcuts using trackpad gestures.
I promise I’m not affiliated with BetterTouchTool, but I am a massive fan. BetterTouchTool is the absolute best application for taking control of your Mac and making it work the way you want.
The app lets you configure and perform actions using all kinds of methods: via keyboard, mouse, trackpad, drawing, Siri, Apple Remote, and more. Shortcut actions can be set to work globally or only in specific applications.
My four favorite BetterTouchTool actions help me align objects in Sketch. You’ll first have to create menu maps and shortcuts using the Apple Keyboard shortcut menu from Tip #1, then you can assign this shortcut to trigger however you want.
Here are four that I’ve configured that I could not live without:
- Three Finger Swipe Down: Center Object(s) Horizontally
- Three Finger Swipe Up: Center Object(s) Vertically
- Three Finger Swipe Left: Align Object(s) Left
- Three Finger Swipe Right: Align Object(s) Right
These gestures have become so second-nature to me that it’s painful to work on other computers that don’t have them configured. I’ve found a trackpad gesture to be far superior than just a keyboard shortcut because I don’t have to reach for the keys. It’s such a natural movement to “flick” an object to the left to align it to the left.
But I use a mouse! -Lots of people, probably
Oh, for you mouse users? Just…I don’t know…stop? I kid, I kid. But really, I’ve found the trackpad to be 10x more efficient (not necessarily faster!) than a mouse. Multitouch gestures make things feel natural, and you literally have a wealth of actions at your fingertips. I mean look at all the gestures my trackpad is picking up:
If we’re getting technical, yes, the Magic Mouse is both a trackpad and a mouse, but after using it for about a year, I still found a trackpad to be better.
Just a personal preference!
But really, you should just use a trackpad.
3. Group similar shortcuts using comparable key combinations/shapes.
One of the handiest plugins for Sketch has to be the Content Generator. You can use it to quickly generate placeholder text, names, profile pictures, etc. If you’ve never used it, download it now.
If I had a nickel for every time I’ve had to generate a list of names or fill a list with profile pictures, I swear I could host a catered In-N-Out Burger lunch for every food delivery tech startup in The Valley.
ProTip™: If you perform an action more than 10 times while you’re in an application, it’s probably time to investigate a faster way to do it.
There are four main actions I perform with the Content Generator on a regular basis, and they’re all very related:
- Generate Female Photo
- Generate Male Photo
- Generate Female Name
- Generate Male Name
I rarely perform one without the other(s), so I created shortcuts to run these actions for me. Each action in the shortcut “group” begins with Control+Alt+Command combination, then I use modifier keys next to each other on the keyboard to fire the desired action:
By grouping these shortcuts in close proximity to each other, it’s less cognitive load for me to remember all of them individually. I effectively get four shortcuts for the price of one. It’s simple to remember F for “female”, and I know the female name shortcut is the key just below it.
By grouping shortcuts in close proximity to each other, it’s less cognitive load to remember all of them individually.
4. Set up shortcuts to open common applications.
Don’t stop at Sketch shortcuts! As any great designer knows, you’ll be switching between Sketch and at least four other applications hundreds of times per day while you work:
Check email for specs, Switch to Sketch, Open Dribbble for inspiration, Open Downloads to locate file, Open Spotify to start your favorite throwback tunes, Switch back to Sketch.
Command+Tab is useful for switching between adjacent apps (that is, the app you were in before the current one), but you have to hit tab a couple times to visit apps further back in your focus history, and we all know that you’ll pass over the right app at least once.
Spotlight is useful for opening apps, but you still have to type the name of the app, and depending on what Spotlight is indexing on your computer, you might end up opening something like “sketches_nov2015.png” on accident instead of Sketch the app.
Instead, I use shortcuts to open my favorite apps:
So why launch applications this way?
In the image above, notice that these are global shortcuts, so they will override any local application shortcut. That means I know with 100% certainty that Control+Option+S will open Sketch (or bring it into focus) every single time. Pretty convenient in the long run.
Don’t forget: Use an obvious modifier letter so you don’t forget the shortcut. That is, don’t launch Sketch with the letter Q, unless you’re going for “Quite Extraordinary Design Application”…
But that would just be silly.
5. Open files with Spotlight.
Brace yourselves for some shocking news:
Your computer is faster than you are at locating files. Much…much faster.
Have you ever used this online search engine called Google? It’s pretty popular. If not, you should check it out.
We’re in the Google Age where you can type exactly what you want and Google will magically find what you’re looking for. If you don’t think this is the most magical thing to happen to planet Earth in the last billion years, then I bet you weren’t all that impressed with Hamilton, either. For shame.
Here’s the thing. Spotlight on your shiny Mac works just about the same way. You can configure it to search whatever the H you want it to, and when you conjure up Spotlight with Command+Spacebar, it will search for only those types of things on your computer.
Once you’ve configured Spotlight to search only what you tell it, you can start using it to open files and applications, do math for you, or define fun words like “callipygian” (def. “having shapely buttocks”).
Stop thumbing your way through Finder to locate a design file like Don Draper flipping through his paper Rolodex. This is the 21st Century and you’re smarter than that! Just type in the name of the file, press Enter, and presto! The file is open.
ProTip™: If you search for something with Spotlight and press Command+Enter, it will open the folder containing that file. Really useful if you’re trying to figure out what directory a file is in.
Note: If you’re typing in an application name, it will show you the most recent files on the right side. It’s a convenient way to recall a recent file if you can’t remember the name of it.
There you have it! Five slick ways to work faster and more efficiently! Now you have extra time to work on that callipygian figure of yours 🍑. If you don’t get that reference, then you didn’t read the article :)
Shameless Self-Promotion:
Check out the design tools I’m working on over at UX Power Tools and follow us on Twitter @uxpowertools. Follow me too, if you were entertained! I post lots of pictures of food.
