> For the complete documentation index, see [llms.txt](https://zurassic.gitbook.io/10x-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zurassic.gitbook.io/10x-developer/full-stack-development/sketch.md).

# Sketch

## Sketch App

### Resources:

* free video course: <https://www.switchtosketchapp.com/>

### Hotkeys and Tips

Nav:

* `CMD+1: for artboard overview`
* `CMD+2: zoom to selected artboard`

Move/Sizing/Gap (when object selected):

* `ARROW` to move. `SHIFT+ARROW` to move 10px
* `CMD+ARROW` to adjust size. `SHIFT+CMD+ARROW` to adjust in 10px step.
* Hold `ALT/OPTION` key to show distance to others. If mouse over another object you can see the gap to that mouse over object.

Creation:

* `R`: create rectangle. Use rectangle for `hr`.
* `S`: create a slice. Click on the object to create an **exact** slice.

Group:

* `CMD+G`: create group
* \`CMD+select\*: click through a group to select an object.

Misc:

* You can use math `10+2` in the inspector for width, heigth, etc
* `CTRL+C`: pick color
* Copy style: `CMD+OPTION+C`

#### How to create your own hotkey in Sketch?

* Go to "keyboard" in system preference
* Choose "App Shortcuts" in sidebar
* Click "+"
* Select Sketch in "application"
* Type the exact text as appeared in Sketch in "menu title"
  * Don't forget root menu
  * Use "->"
  * Don't use any space
* Assign hotkey

For example, I create a hotkey `^i (Ctrl+i) for inserting images, and here is the "menu title":`

`Insert->Image...`

Credits to this post [Shortcuts, Hotkeys, and Gestures: 5 Ways to Become a Design Ferrari in Sketch](https://medium.com/ux-power-tools/shortcuts-hotkeys-and-gestures-5-ways-to-become-a-design-ferrari-in-sketch-or-blazingly-fast-in-389929e89115#.u7ttq71tc).

### Shape

* Use union/substract to create shape.
* You can use shape to mask images
* You can fill with image
* Enter edit mode: hit `ENTER`

### Symbol

* Create symbol from a layout
* Replace with symbol: You can right click a layout to choose replace with symbol.
* Override symbol: on the inspect pane

### Style

.

### Craft Plugin

* duplicate
* pictures
* create style guide and automatically update your project if you update one in the style guide

## Other Helpful Tools

* Pixlr, Photoshop online: <https://pixlr.com/>
* Colors scheme generator: <https://coolors.co/> and <https://www.sessions.edu/color-calculator/>
* Random data generator: <https://www.mockaroo.com/>