After almost a decade of using Sketch and being a devoted fan of both the product and the team, I got the once-in-a-lifetime opportunity to join their ranks and have a say in how to shape the product from the inside.
I came in with a bunch of ideas and suggestions (as a lot of us fans surely have) and I was delightfully surprised (and a bit embarrassed) to learn that a lot of these “tiny improvements” already had in fact been built — some of them years ago!
So I’ve compiled a list of 10 features that I asked the team to build when I joined, but in fact already existed and maybe, some of them might also be new to you.
1. Copy as PNG
Something that I often do is share an Artboard with my team on Slack, or send it to a Messages conversation. Before, I was either exporting it to a 2x PNG, or dragging it from the Layer List of the preview area from the Inspector because I’m fancy like that and I know all the shortcuts…
This is fine, but I was missing something like “Copy as PNG” that is available in other tools. When I asked internally if we could build this, I found out that we have an even better solution: if you copy an Artboard and paste it outside of Sketch, it will paste it as a PNG!
2. Set layer as anchor when aligning
I’m sure this scenario is all too familiar to a lot of you: select two or more layers, hit Align to Top, for example, and the layers all get correctly aligned to the top… OF THE WRONG LAYER 🙄.
I asked the team if we could come up with a simple solution and, once again, the team gently informed that we had already built it. When there are multiple layers selected, clicking in one of the selected layers again will set it as the anchor. From here, anything else you align will do so around it.
3. Automatically set prototype target by proximity
One day I was putting together a feature presentation in Sketch, and I was creating some “slides” in the Typical Designer Fashion™* of arranging Artboards in the X and new chapters in the Y axis.
After it was all done, I wanted to present it as a Prototype, but before I could do that, I had to connect all the Artboards with the Prototype Spaghetti**. And I have to admit, it’s not an enjoyable process, especially if you later have to introduce a new slide, and reconnect the dingus all over again.
Guess what, did you know that you can set Prototype targets by proximity? You can select all Artboards and hit Auto Link to Right Artboard. Setting this feature will make sure they’re all connected in the way you expect them to, and if it’s the rightmost Artboard in the Canvas, it’s smart enough to link to the one in the row below it.
*Not actually a trademark.
**Not the official term, Rafa’s words do not represent the views of his employer.
***Again, not a trademark.
4. Click-drag to add Hotspot layers
While we’re talking about Prototyping, and while we’re being vulnerable with each other… I… I used to draw rectangles on top of my work, make them transparent, and then use them as a trigger for a Prototype action 🥺.
I saw the light when the team told me you can clear Selection, hit I and click-drag to create a new Interaction layer. From there you’ll automatically be put in the state where you just have to select the target.
5. Rename multiple Artboards
This is one of those things that I had accepted years ago, and never bothered to check if it had changed (spoiler: it has). I used to use a plugin to rename multiple Artboards at the same time.
Say I design a bunch of Artboards for a login flow, and then want to rename them all to “Login Screen #1”, etc. Not only can you do this natively in Sketch, but you can do it in style. With multiple Artboards selected, hit ⌘R to show the Rename Selected Layers sheet where you can optionally match existing names, and even use regular expressions.
6. Select a bunch of Artboards and turn them into Symbols
This one is so obvious that I am not even sure why it’s here? Maybe this didn’t use to be the case, but did you know that you can select multiple Artboards and hit ⌘Y to convert each to a new Symbol?
This is especially useful when I’m designing a bunch of icons in a grid, and then want to turn them all into Symbols and add them to my Library.
7. Artboard Template Previews
I absolutely adore Artboard Templates, and I think it’s a very underrated feature — it’s a great way to get started without the constraints of a Symbol (since I intend to add things to it and change things around). I use them all the time. For example, I’ll create a simple Artboard of an iPhone frame that includes the correct device corner radius, the Dynamic Island and Home Indicator, or sometimes I’ll even design the basic structure of an app with a custom tab bar, for example.
Long story short, I use Artboard Templates a lot. However, I missed being able to make my custom Artboard Templates look as nice and tidy as the default ones and have their own custom thumbnails. Guess what? Turns out you can.
You can create a 92x92 Artboard with the name Previews / Name of Artboard Template and Sketch will use that as the thumbnail — it will even sync if you add it as a Library!
8. Copy color in different code formats
9. Open windows when relaunching
I usually work on the same 2-3 documents for a long time: often my main document, along with couple of Libraries that I like to keep open.
I’m also a weirdo* who likes to reboot my Mac often, and quit apps regularly if I’m not working with them for a while. So when I would relaunch Sketch I would have to look for and open all of those documents again — I even looked for a setting somewhere that would let me reopen windows when relaunching the app.
Turns out Sketch out-Mac-nerded me by respecting the system’s preference! To have your windows restored when launching Sketch go to System Settings > Desktop & Dock and uncheck the Close windows when quitting an application preference.
*Not actually a weirdo, I don’t judge how people use their Macs (much). There’s no right or wrong way to use your tools (for the most part).
10. Resize with Keyboard (⌘↑↓→←)
And my last and most recent finding: you know when you make small and precise layer position adjustments? Your mouse or trackpad are not the best tools for this job, so you go old school and use the arrow keys on your keyboard, right? One pixel up ↑,one pixel to the left ←.
But when it comes to resizing, I would head to the Inspector, select the Width or Height text area, and increase the values by one with the arrow keys. But then sometimes I would have to defocus that and adjust its position because I wanted it to grow one pixel to the left, for example.
Well, turns out you can use ⌘←→ to increase or decrease the width, and ⌘↑↓ for height. Plus, it will also work with the ⇧ modifier and respect the nudge values set in your settings.
And that’s 10! I wonder if any of these were a surprise to you just like they were to me, and better yet, I’d love to hear about one of your recent discoveries in our community forum. I’ll be there!