ux/ui essentials

Sketch Features You Didn’t Know

10 min read
12 Jul 2019
Sketch Features You Didn’t Know Cieden
Y
ou know the feeling when you are routinely pushing pixels to implement that great design idea. That’s just the state of design tools for today — boring work is inevitable. But the good news is that your workflow can be optimized. I haven’t described all the techniques I’m using as I assume you already know more popular ones, like how to set opacity using number keys, individually change corner radius, and others… Therefore, let’s explore the techniques I considered worth writing about. 

1. Fast image export

Export from the clipboard

You can paste images from Sketch directly to Slack, Telegram, or any other messenger. Select assets (groups, artboards, symbols, or individual layers), copy and paste them to a messenger. However, multiple selections will be merged into one image after pasting, so I use this technique to export one asset at a time.

Fast image export example from Sketch

Drag and drop

This comes in handy when you need to quickly export several assets. Drag them from the layers list into any folder on your Mac. Moreover, several different items like artboards, symbols, groups, or individual layers can be dragged at once. Note that assets will be exported @1x by default. You can customize the export preset but don’t set several presets at once because Sketch does not export one image at multiple resolutions.

Drag and drop example from Sketch

2. Fast image import

Import from the clipboard

I find it very time-saving to fill shapes with images from the clipboard. There are several ways you can place an image into the clipboard, like copying an image from a local folder or right-click and copy in the Google image search, no need to continue explaining the obvious. When I want to quickly mock up an interface I use Cmd + Shift + Ctrl + 4, here I open the image fill dialog, and it automatically pastes the image from the clipboard, if the image fill hasn’t been previously selected. When going from any other fill to the image fill, it might not paste automatically, so you need to select the image fill and press Cmd + V.

Screenshot from Google Maps

Drag and drop

Drag and drop to replace a shape fill or override a symbol image.

Drag and drop example

3. Copy-paste and extract image overrides

I discovered it by accident, and it was a pleasant surprise, as I don’t need to use the plugin for that anymore.

Copy-paste and extract image overrides from Sketch

4. Create custom shortcuts

Some routine tasks take too much time, so I use plugins to get things done faster. Plugins are a huge advantage of Sketch, but still, they are not perfect, as the needed functionality is buried deep down in the menu. I got tired of navigating those submenus, so I created custom shortcuts.

Custom shortcuts creation in Sketch

Let’s consider the case where we created a side navigation symbol and want the Overrides panel to look neat. Without plugins, we would have to manually rename, reorder layers and change distances. With Automate, Distributor and Rename It we avoid this boring work.

Custom shortcuts creation in Sketch

I have shared my custom shortcuts list. Sketch has native shortcuts list on their website as well.

It’s hard to remember all shortcuts at first and you might avoid using them, but once you learn those hotkeys— you will be amazed how much faster your design process has become.

5. Copy and paste styles

This one is so frequently used by me it deserves a separate paragraph. Using this shortcut is much more convenient than manually copying pasting hex values of color or other style properties.

Copy and paste styles in Sketch

If you want to sample a color outside of Sketch — use the color picker.

Copy and paste styles in Sketch

6. Work with paths like a pro

In editing mode use Shift to find the center between two points. Also, hit Tab to cycle through points on a path.

Work with paths like a pro in Sketch

Align anchor points with the align tools.

Work with paths like a pro in Sketch

7.  Navigate layers easily

Collapse and expand all layers in one click

Option + Click on a folder to quickly collapse all of its contents. Also, create a shortcut to collapse all layers; I used Cmd + U for that.

Collapse and expand all layers in one click in Sketch

Navigate groups

Selecting layers buried deep down in the group is not fun. Holding Cmdhelps you select a deeply buried layer straight away. Besides, when you need to select the next layer hit Tab.

Navigate groups in Sketch

8. Resize with constraints

The top left corner is the default anchor point for resizing an element using Inspector, but it can be overridden by adding “r” while changing the width or “b” while changing the height. It’s useful when you need to fix the right side or/and the bottom of the object. If in the example below, I had resized the bar with a default anchor point, I would have to fix the alignment afterward.

Resize with constraints

9. Use maths in the field

Create donut charts and progress indicators

This is useful when you try to design a donut chart or a circular progress bar. Let's create a circle 300×300 px size, for example. Afterward, use the formula that does all the magic3.14 * percent to decimal * circle diameter. Type the formula in the Dash field and set the Gap to a really big number, so that you would have a single line, not a dashed one. To get the decimal divide the percentage by 100. If the chart does not start from the point you want it to just flip it.

Note: After resizing or scaling, the chart does not show the previous percentage, so you will have to recalculate taking into account the new diameter.

Donut charts and progress indicators in Sketch

Resize elements

It's faster to add, subtract, divide, multiply, and in some cases, to use percentage right in the numerical fields. Moreover, you can select and resize multiple objects.

Resize elements

Move layers using coordinates

Sometimes, using coordinates will move a layer to a necessary position faster, than nudging or dragging. In the example below, moving the progress bar 32px to the left would take several nudges, on top of that, dragging it would be even longer and less precise. That's why I subtracted 32 from the X coordinate.

Move layers using coordinates

10. Make Grid

Make Grid function is not displayed by default, so you need to customize the Sketch toolbar. In addition, you can find it in Arrange > Make Grid...

Make Grid function in Sketch

11. Duplicate moves

If you need to quickly duplicate several elements with fixed margins no need to make grids, especially when you want to visualize the margin you are setting. HoldOptionwhile dragging an element and useCmd+ Dafterward to duplicate it.

Duplicate moves in Sketch

P.S. I hope this will help you to work faster. By the way, what Sketch tricks do you use to optimize workflow? Please, share your favorite ones.


Did you like the article?

Help us share it:

Sketch Features You Didn’t Know Cieden
Sketch Features You Didn’t Know Cieden

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent