Sketch Reference
Kip Landergren
(Updated: )
My cheat sheet for Sketch covering terminology, keyboard shortcuts, and resources.
Contents
Terminology
- alpha channel
-
Range representing the opacity, typically from 0.0 (completely transparent) to 1.0 (completely opaque). comes from the use of mattes in photography and filmmaking applied to digital images.
- artboard
-
Layer that crops a canvas to a specific dimension; may not contain other artboards.
Broader: layer
Related: canvas
- bounding box
-
The perimeter of the layer with 8 selection handles.
Related: layer, resizing constraints
- canvas
-
Drawing area.
Related: artboard
- 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.
Related: style
- grid
-
The lines of an x, y coordinate system; may be specialized into a Square Grid or Layout Grid.
Related: guide
- guide
-
Canvas tool to display a fixed line, typically at a measured distance.
Related: ruler, grid, smart guide
- HSL (HSB)
-
Hue, Saturation, {Lightness, Brightness, Value}
Also: HSV
- hue
-
The variation of a color independent of its brightness.
- layer
-
The contents of a single x, y plane on the z axis; may be specialized into types: shape, symbol, image, artboard, and others.
Related: bounding box
- 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.
Related: bounding box
- ruler
-
Canvas tool to display distance.
Related: guide
- Sketch Document
-
The .sketch file containing your work.
Related: Sketch Library
- Sketch Library
-
A specialized Sketch Document able to be referenced by other Sketch Documents, providing access to its components and colors.
Related: Sketch Document
- shade
-
The result of mixing a color with black.
- shape
-
A vector layer.
Broader: layer
- smart distribute
-
Means of arranging multiple layers by their horizontal or vertical gaps.
Related: tidy
- 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.
Related: smart guide
- style
-
A set of properties that contribute to the look of a layer.
Related: fill
- symbol
-
A single, reusable, layer comprised of a flattened layer hierarchy; exists as a single master instance with multiple instance copies created wherever used.
Broader: component
- text style
-
A reusable set of text-specific properties.
- tidy
-
Means of arranging layers into a grid.
Related: smart distribute
- tint
-
The result of mixing a color with white.
- tint
-
The mixture of a color with white.
Compare: tint
- tint slider
-
Corrects colors along the green / magenta axis.
- tone
-
The result of mixing a color with gray.
- vector
-
A layer comprised of points connected by paths.
Broader: layer
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.