Sketch Reference
Kip Landergren
(Updated: )
My cheat sheet for Sketch covering terminology, keyboard shortcuts, and resources.
Contents
Sketch Terminology
- Sketch Document
- the
.sketch
file containing your work - Sketch Library
- a specialized Sketch Document able to be referenced by other Sketch Documents, providing access to its components and colors
- artboard
- layer that crops a canvas to a specific dimension; may not contain other artboards
- bounding box
- the perimeter of the layer with 8 selection handles
- canvas
- drawing area
- component
- a reusable entity; may be specialized into a symbol, text style, or layer style
- fill
- shape style property that comprises the interior content; may be solid or gradient
- grid
- the lines of an x, y coordinate system; may be specialized into a Square Grid or Layout Grid
- guide
- canvas tool to display a fixed line, typically at a measured distance
- layer
- the contents of a single x, y plane on the z axis; may be specialized into types: shape, symbol, image, artboard, and others.
- layer style
- a reusable set of layer-specific properties
- page
- mechanism to group work within a Sketch document
- plugin
- 3rd party software to automate or enhance some aspect of Sketch
- resizing constraints
- rules that dictate how a layer behaves when its parent is resized
- ruler
- canvas tool to display distance
- shape
- a vector layer
- smart distribute
- means of arranging multiple layers by their horizontal or vertical gaps
- smart guide
- a Sketch-suggested location for a layer
- snapping
- the act of a layer moving to a predetermined point instead of what is indicated by the user’s mouse
- style
- a set of properties that contribute to the look of a layer
- symbol
- a single, reusable, layer comprised of a flattened layer hierarchy; exists as a single master instance with multiple instance copies created wherever used
- text style
- a reusable set of text-specific properties
- tidy
- means of arranging layers into a grid
- tint
- the mixture of a color with white
- vector
- a layer comprised of points connected by paths
macOS Keyboard Shortcuts
Note: all letter keys are displayed uppercase. Shortcuts requiring use of ⇧ Shift will be called out.
Fast Menu Item Access
Not every operation has a keyboard shortcut. In the event that you know the title of the menu item you wish to select you can use the following steps to quickly access it:
access Help menu, focusing search | ⌘ Command + ⇧ Shift + / |
access Menu Item | type Menu Item and select from search results |
insert artboard | A |
create line | L |
create oval | O |
use pencil tool | P |
create rectangle | R |
insert text | T |
create rounded rectangle | U |
create vector shape | V |
rotate layer | ⌘ Command + click and drag selection handle |
show preferences | ⌘ Command + , |
show / hide Sketch interface (aka presentation mode) | ⌘ Command + . |
zoom in | ⌘ Command + + |
zoom out | ⌘ Command + - |
increase width by 1 px | ⌘ Command + → |
decrease width by 1 px | ⌘ Command + ← |
increase height by 1 px | ⌘ Command + ↑ |
decrease height by 1 px | ⌘ Command + ↓ |
zoom to 100% | ⌘ Command + 0 |
zoom to view whole canvas | ⌘ Command + 1 |
zoom to selected layer(s) | ⌘ Command + 2 |
center selected layer(s) | ⌘ Command + 3 |
duplicate selection | ⌘ Command + D |
group | ⌘ Command + G |
rename layer | ⌘ Command + R |
create symbol | ⌘ Command + Y |
rotate layer in 15° increments | ⌘ Command + ⇧ Shift + click and drag selection handle |
switch to components panel, focusing the search bar | ⌘ Command + ⇧ Shift + F |
ungroup | ⌘ Command + ⇧ Shift + G |
show / hide selected layer | ⌘ Command + ⇧ Shift + H |
increase width by 10 px | ⌘ Command + ⇧ Shift + → |
decrease width by 10 px | ⌘ Command + ⇧ Shift + ← |
increase height by 10 px | ⌘ Command + ⇧ Shift + ↑ |
decrease height by 10 px | ⌘ Command + ⇧ Shift + ↓ |
show / hide toolbar | ⌘ Command + ⌥ Option + T |
distribute selection horizontally | ⌘ Command + ⌃ Control + H |
distribute selection vertically | ⌘ Command + ⌃ Control + V |
navigate one page up | fn + ↑ |
navigate one page down | fn + ↓ |
focus layers panel | ⌃ Control + 1 |
focus components panel | ⌃ Control + 2 |
toggle square grid | ⌃ Control + G |
toggle layout grid | ⌃ Control + L |
toggle rulers | ⌃ Control + R |
measure distance (based on bounding box) | layer selection + ⌥ Option + mouse hover |
duplicate selection via drag | hold ⌥ Option + click + drag selection |
resize proportionally | ⇧ Shift + click and drag on a selection handle |
resize from center | ⌥ Option + click and drag on a selection handle |
Common Operations
Hiding a Layer
Hiding a layer makes it invisible, but does not remove it.
Locking a Layer
Locking a layer prevents editing or movement.