Accelerating in Sketch

Time-is-money principle is a foundation stone for most of designers. Someone gets payment per hour, someone obtains money for a project. In short, profit depends on intensity. Pavel Novytskyi, an expert designer from Heyllow Lab, has some tips how to increase your personal productivity working in Sketch.

Idea generation, development and testing take much time. However, I’d like to share some techniques which help me to converse faster the results of these stages into pixels.

I use Sketch for web and app design. Despite efforts of guys from Adobe, Photoshop is still a raster graphics editor for me. The biggest and constant problem of the program is bugs which never stop to amaze me from version to version. However, in Sketch 39.1 (the last version at the moment of writing of this note) I have found almost none of them.

So let me tell you about shortcuts, plugins and symbols.

Shortcuts

I’m a great fan of keyboard shortcuts. I use shortcuts even to open some websites. I suppose, it’s an imperceptible and extremely efficient way to save time. Most people think that it’s boring, hard and worthless, but I’ll try to change your mind.

Just use shortcuts at least a week and you’ll stop overthinking what to press. Your fingers will do everything instead of you.

We do not realise how many repeated actions we do during a day. If you save a couple of seconds on each of them, in sum, you’ll get not bad results. I didn’t do any special researches on this (I don’t have a shortcut for it), but you can make simple calculations in your mind to check out or just believe me.

In Mac OS you can easily customize key combinations for any app including system apps in system settings.

If you have any questions how to do that watch the video.

Here is a list of shortcuts I constantly use:

• Align left/right/top/bottom;
• Distribute the selected elements with the same distanсe between them;
• Replace the selected layer with the content in the clipboard;
• Show/Hide grid/layout/selection handles;
• Collapse all groups and artboards.

Plugins

Sketch Runner

Runner helps to get around Sketch and quickly search anything you need (layers, artboards, menu items, plugins). Also, it’s useful for those who can’t stand keeping shortcuts in their mind.

Align To

The plugin that aligns to а key object like in Adobe Illustrator.

BaseAlign

In Sketch text layers are aligned by selection handle by default. However, designers basically align them by the baseline. Use BaseAlign to align text layers, which have different font sizes.

Sketch-Find-And-Replace

Find text in selected layer(s) and all layers contained within and replace it with different text. It doesn’t work with layer names.

Font Finder

Font Finder shows all fonts used in the layout and makes chosen fonts selected. Sometimes there is a layer with unwanted font left in the layout from previous versions of the design and you can spend eternity looking for it by hand.

Rename It

The plugin renames multiple selected layers. Also, you can change the name as well as add a prefix, suffix or number the layers in reverse order.

Sketch-select-similar-layers

Inspired by Illustrator’s Select Similar Objects feature, Select Similar Layers is a plugin that selects layers with the same attributes. It works with a fill color, border color, border thickness, font, opacity or blending mode.

Swap-Fill-Border

Also inspired by Illustrator. The plugin swaps the fill and border color and vice versa.

Sketch commands

A nice collection of tweaks and just helpful commands. Definitely, you won’t need all of them, but I’m sure you’ll find something really useful for your work. The list I use:

• Align/Space Horizontally (Vertically) I just enter the number of pixels to indent.
• Positions/Swap Positions swaps positions of two layers.
• In Select you can select current artboard, all the artboards, all the text layers or all the layers in the selected group.
• In Size/Equalize you can select several layers and equalize them by length and height.
• Text/Case changes text register.

Sketch Mate

It’s also a whole set of script commands. My faves:

• Misc/Replace layers is extremely helpful when you need to replace one layer or more with the selected layer. Copy/cut layer, select the layers you are going to replace. Bingo! Sketch Mate will do the rest for you.
• Sort sorts layers and artboards by different attitudes. It’s relevant for those who appreciate the order in files. The option also helps to reverse the sequence of layers.

Craft

The plugin from InVision has a series of great opportunities to generate content:

• Craft automatically fetches names, addresses, postcodes, cities, countries, from a database. It’s also possible to create your own options and categories or to get data from the plugged-in browser.
• The plugin inserts images from folders on your computer, Dropbox or websites similar to Unsplash.
• Craft duplicates layers, regulating the amount of copies and the spacing among them.
• Upload either selected or all the layers on InVision website.

Click here to learn more about the plugin.

Jw-sketch-plugins

• Split Text Lines takes the currently selected text layer and splits each text line to its own separate layer.
• Combine Text Layers takes the current selection of separate text layers and combines the text to a single layer.

Symbols

Sketch version 39 has some exciting updates. Now whilst resizing groups and symbols you can customise shifts of inserted groups and layers which were deforming in previous versions. Also, one symbol can be replaced with another via context menu. It makes work with states of elements, e.g. inputs, easier.

Examples and life hacks:

One symbol for a menu on all artboards

If you have a menu with several items, where an active item is selected with color or transparency, you just need to create a symbol and from that moment you can change the state of your menu in a couple of clicks.

Create a symbol from the menu, duplicate all items and set them a style, which they will get into an active state. From that moment to change an active item use a little trick. If you put a space instead of a text in inspector in the text area, the text will disappear. If you delete all symbols from the overrides, the text will be restored to its default state.

Several states of one input

Create symbols for each input and switch via context menu.

How to change states of menu which consists of icons

Create one symbol in default state and another one in active icon state. Put active icons over inactive ones, add an icon size square and make it a mask for active icons. Now hide the square. Move the square to choose an active icon.

In conclusion

Nowadays free time is some kind of luxury and good luck. Hope, my notes will help you get more free time for an excellent project, to discover something new and exciting or just have a nice promenade with relatives and friends.