After nearly a decade of utilizing Sketch and being a faithful fan of each the product and the group, I obtained the once-in-a-lifetime alternative to hitch their ranks and have a say in methods to form the product from the within.
I got here in with a bunch of concepts and options (as a variety of us followers absolutely have) and I used to be delightfully shocked (and a bit embarrassed) to be taught that a variety of these “tiny enhancements” already had in actual fact been constructed — a few of them years in the past!
So I’ve compiled a listing of 10 options that I requested the group to construct after I joined, however in actual fact already existed and perhaps, a few of them may also be new to you.
1. Copy as PNG
One thing that I typically do is share an Artboard with my group on Slack, or ship it to a Messages dialog. Earlier than, I used to be both exporting it to a 2x PNG, or dragging it from the Layer Checklist of the preview space from the Inspector as a result of I’m fancy like that and I do know all of the shortcuts…
That is positive, however I used to be lacking one thing like “Copy as PNG” that’s out there in different instruments. After I requested internally if we might construct this, I discovered that now we have a fair higher resolution: in case you copy an Artboard and paste it outdoors of Sketch, it can paste it as a PNG!
Copying an Artboards makes it simple to share a particular design outdoors of Sketch.
2. Set layer as anchor when aligning
I’m positive this situation is all too acquainted to a variety of you: choose two or extra layers, hit Align to Prime, for instance, and the layers all get appropriately aligned to the highest… OF THE WRONG LAYER 🙄.
I requested the group if we might provide you with a easy resolution and, as soon as once more, the group gently knowledgeable that we had already constructed it. When there are a number of layers chosen, clicking in one of many chosen layers once more will set it because the anchor. From right here, the rest you align will achieve this round it.
Click on on one of many chosen layers to set it as an anchor.
3. Routinely set prototype goal by proximity
At some point I used to be placing collectively a function presentation in Sketch, and I used to be creating some “slides” within the Typical Designer Style™* of arranging Artboards within the X and new chapters within the Y axis.
After it was all carried out, I needed to current it as a Prototype, however earlier than I might do this, I needed to join all of the Artboards with the Prototype Spaghetti**. And I’ve to confess, it’s not an pleasing course of, particularly in case you later need to introduce a brand new slide, and reconnect the dingus yet again.
Guess what, do you know that you could set Prototype targets by proximity? You possibly can choose all Artboards and hit Auto Hyperlink to Proper Artboard. Setting this function will ensure they’re all linked in the way in which you anticipate them to, and if it’s the rightmost Artboard within the Canvas, it’s good sufficient to hyperlink to the one within the row beneath it.
*Not truly a trademark.
**Not the official time period, Rafa’s phrases don’t symbolize the views of his employer.
***Once more, not a trademark.
Questioning methods to make an ideal presentation? We’ve obtained you coated.
4. Click on-drag so as to add Hotspot layers
Whereas we’re speaking about Prototyping, and whereas we’re being susceptible with one another… I… I used to attract rectangles on prime of my work, make them clear, after which use them as a set off for a Prototype motion 🥺.
I noticed the sunshine when the group informed me you possibly can clear Choice, hit I and click-drag to create a brand new Interplay layer. From there you’ll robotically be put within the state the place you simply have to pick out the goal.
We love rectangles, however they’re not at all times mandatory 😉.
5. Rename a number of Artboards
That is a kind of issues that I had accepted years in the past, and by no means bothered to test if it had modified (spoiler: it has). I used to make use of a plugin to rename a number of Artboards on the similar time.
Say I design a bunch of Artboards for a login move, after which wish to rename all of them to “Login Display #1”, and so forth.
Not solely are you able to do that natively in Sketch, however you are able to do it in type. With a number of Artboards chosen, hit ⌘R to indicate the Rename Chosen Layers sheet the place you possibly can optionally match present names, and even use common expressions.
Conserving your layers tidy was a tedious activity — not anymore.
6. Choose a bunch of Artboards and switch them into Symbols
This one is so apparent that I’m not even positive why it’s right here? Possibly this didn’t use to be the case, however do you know that you could choose a number of Artboards and hit ⌘Y to transform every to a brand new Image?
That is particularly helpful after I’m designing a bunch of icons in a grid, after which wish to flip all of them into Symbols and add them to my Library.
Focus in your design, then flip them to Symbols in seconds.
7. Artboard Template Previews
I completely adore Artboard Templates, and I feel it’s a really underrated function — it’s an effective way to get began with out the constraints of a Image (since I intend so as to add issues to it and alter issues round). I take advantage of them on a regular basis. For instance, I’ll create a easy Artboard of an iPhone body that features the proper machine nook radius, the Dynamic Island and Residence Indicator, or generally I’ll even design the fundamental construction of an app with a customized tab bar, for instance.
Lengthy story quick, I take advantage of Artboard Templates lots. Nonetheless, I missed with the ability to make my customized Artboard Templates look as good and tidy because the default ones and have their very own customized thumbnails. Guess what? Seems you possibly can.
You possibly can create a 92×92 Artboard with the title Previews / Title of Artboard Template and Sketch will use that because the thumbnail — it can even sync in case you add it as a Library!
Previews could be useful to maintain issues organise and rapidly discover what you want.
8. Copy colour in numerous code codecs
I had copied Shade Variables in numerous codecs within the net app however little did I do know you can too do that by way of the Mac app — such a time saver!
Shade Variables are nice for maintaining colours constant between design and code initiatives.
9. Open home windows when relaunching
I normally work on the identical 2-3 paperwork for a very long time: typically my primary doc, together with couple of Libraries that I prefer to hold open.
I’m additionally a weirdo* who likes to reboot my Mac typically, and give up apps frequently if I’m not working with them for some time. So after I would relaunch Sketch I must search for and open all of these paperwork once more — I even appeared for a setting someplace that will let me reopen home windows when relaunching the app.
Seems Sketch out-Mac-nerded me by respecting the system’s choice! To have your home windows restored when launching Sketch go to System Settings > Desktop & Dock and uncheck the Shut home windows when quitting an software choice.
*Not truly a weirdo, I don’t choose how individuals use their Macs (a lot). There’s no proper or improper method to make use of your instruments (for essentially the most half).
Setting issues up the way in which you want it’s a essential step when setting your workflow.
10. Resize with Keyboard (⌘↑↓→←)
And my final and most up-to-date discovering: you realize once you make small and exact layer place changes? Your mouse or trackpad are usually not the very best instruments for this job, so that you go old style and use the arrow keys in your keyboard, proper? One pixel up ↑,one pixel to the left ←.
However in the case of resizing, I’d head to the Inspector, choose the Width or Top textual content space, and enhance the values by one with the arrow keys. However then generally I must defocus that and alter its place as a result of I needed it to develop one pixel to the left, for instance.
Effectively, seems you should utilize ⌘←→ to extend or lower the width, and ⌘↑↓ for peak. Plus, it can additionally work with the ⇧ modifier and respect the nudge values set in your settings.
Resizing together with your keyboard can assist you keep exact and pace issues up.
And that’s 10! I’m wondering if any of those had been a shock to you identical to they had been to me, and higher but, I’d love to listen to about considered one of your latest discoveries in our group discussion board. I’ll be there!