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.
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.
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.
Drag and drop
Drag and drop to replace a shape fill or override a symbol image.
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.
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.
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.
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.
If you want to sample a color outside of Sketch — use the color picker.
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.
Align anchor points with the align tools.
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.
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.
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.
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.
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.
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.
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...
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.
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.
