I’ve used Sketch for a few years, having followed the lead of my designer colleagues who switched from Photoshop. As a web developer primarily inspecting and grabbing things from other folks’ designs, my level has been pretty basic. However I’ve decided to level up and get more creative. As I learn the ropes, here’s a list of useful (Mac-based) Sketch tips for my reference and yours.
Create an Artboard #
The initial canvas is infinite so we need a fixed frame (representing a device screen) on which to work.
- Add an artboard: at top-left, choose Insert > Artboard.
- Set its size: at top-right choose preset dimensions or create custom.
- Rename your layer (at top-left) to something appropriate for the overall task (e.g. News Article, or whatever).
Zooming and centring #
For manual zoom, pinch trackpad.
Centre screen on element we’re working on: Command+2.
Zoom in on current object to 100% screen size: Command+0.
Zoom out, centred on artboard: Escape then Command+2 then Command+0.
Adding Text #
Insert text element: T.
Then control it on the right:
- Change typeface
- Adjust text size using the size field.
- Adjust text size by decimal increments: press and hold Option while adjusting the size.
Adding Shapes #
Insert shape: at top-left, choose Insert > Shape > ….
Insert a rectangle (shortcut): R.
Round a rectangle’s corners: select it, then on the right change its border radius, e.g. to 3.
For a perfect circle: insert an oval with O then press and hold ⇧ while clicking and dragging.
Change shape dimensions: Press and hold Command and the up or down arrow key. Press and hold Option to do so in decimal increments.
Change background: edit fill on the right, selecting a solid colour or a gradient fill.
Create a custom shape like a tick:
- at top-left, Insert > Vector
- draw lines using a series of points
- Use the tools on the right to tweak thickness, roundedness etc.
Lock a layer to make it unselectable and unmovable: Command+⇧+L.
See space between sibling layers: press and hold Option and select layer.
Move layer up or down by 10px: press and hold Shift and up/down arrow key while layer is selected.
Make layer see-through: change its opacity by typing (e.g.) 5 for 50% or by controls on right-hand-side.
Use a blend mode to mix a layer’s background colour with it’s parent’s background colour:
- select your layer
- select the Colour Fill box on the right
- Select a blend mode such as overlay or soft light.
Duplicate a layer #
Press and hold Option then select and drag element.
Additionally press and hold ⇧ to ensure alignment.
Keyboard shortcut: Command+D
Combine layers #
We group layers together in order to be able to select and move them as one.
Select layers, then Option+Command+U (for Union).
Right-click and group selection.
Use Rulers #
Toggle ruler visibility: Control+R
Create gutters/margins (e.g. 32px) by dragging markers.
Select a layer or layers and use the Alignment tools at the top-right.
Share your work #
- Select artboard
- On right panel, Make Exportable.
- Use 1x and .png.
- Click Export Selected.
Add dummy data: select one or more layers then from top-right select Data and insert names, cities or images.