一ヶ月間のSketch生活で使ってたプラグインなどのまとめ

# 一ヶ月間のSketch生活で使ってたプラグインなどのまとめ

Sketchを約一ヶ月間使用していた感想や所感などをまとめたものです。
せっかく勉強したので備忘録として保存します！

# 私とは

自己紹介という程のものでもありませんが一応。

- デザインは素人、WEB系は毛が生えた程度
- 専攻は組み込みで来季から制御系のエンジニア
- 前職はアパレル系
- AdobeのAI,PSは使ったことあります
- 2ヶ月前にMacBookProを買ってから、頭が良くなり強くなった気がしている

## 最終的に落ち着いた周辺アプリ

- ABSTRUCT(ファイル管理)
- SketchToolBox(プラグイン管理)


## プラグイン（抜粋）

主に使っていたものを記述します。
入れたけどあんまり使わなかったものや記憶に残らなかったものは、
思い出せなかったので書いていません。

---

#### Sketch Toolbox

http://sketchtoolbox.com/

プラグイン管理用のプラグイン。
ちょっと動作が不安定ですが、入れたプラグインは問題なく使えます。
これ以降のプラグインは全てこれ経由で入れました。（たぶん）

###### 余談
現在は[Sketchpacks](https://sketchpacks.com/)が主流になりつつあるようです。

---

#### Renameit

https://github.com/rodi01/RenameIt

一括リネームする時に使います。
```[Ctr] + [Cmd] + [R]　
```
高さと横幅を変数のように指定できるのが地味に便利でした。
GitHubのReadMeにgifで**めっちゃ分かりやすい詳細**がのってます。

---

#### Sketch Divine Proportions

https://github.com/ichord/sketch-divine-proportions

みんな大好きな黄金比を書き出してくれるプラグインです。

<img width="540" alt="スクリーンショット 2017-09-26 14.33.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/179198/b32dd741-fd40-03b0-4c64-44778fc83930.png">

---

#### ClipboardFill

https://github.com/ScottSavarie/Clipboard-Fill

これ地味に便利です。
画像検索とかでみつけた画像を、クリップボードにコピーすれば、予め用意してあるパスなどに挿入する事ができます。
クリッピングマスクみたいな事が簡単にできちゃいます。

ちなみに```[ Ctr ] + [ Shift ] + [ Cmd ] + [ 4 ]（[ 3 ]）```でクリップボードにスクショを保存できます。
このショートカット、私は知りませんでした。

選択して
![スクリーンショット 2017-09-26 17.21.16.png](https://qiita-image-store.s3.amazonaws.com/0/179198/323cc664-20ba-a493-e2d5-1f20541568b1.png)

Opt + Ctr + V
![スクリーンショット 2017-09-26 17.21.46.png](https://qiita-image-store.s3.amazonaws.com/0/179198/77b15662-c57f-89ab-42f5-a703f762736b.png)



なんでも良いから画像入れたいけど、ほんとに何でも良いわけではないって時にピッタリです。

```[ Opt ] + [ Ctr ] + [ V ]
```

---

#### Symbol Organizer

https://github.com/sonburn/symbol-organizer

![スクリーンショット 2017-09-26 15.45.41.png](https://qiita-image-store.s3.amazonaws.com/0/179198/a769dd95-89d3-8ccb-4869-e074414534aa.png)

```[Command] + [Option] + [Shift] ＋ [O]
```

個人的に一番うれしかったのがこれです。
無秩序に溜まっていくSymbolをキレイに整頓してくれます。

[ Lv1/icon/search ]みたいにちゃんと階層を指定しておけばそれに応じて分けてくれたりもします。

また、[ Remove unused symbols ]で使っていないSymbolを削除出来るのには助けられました。

- Group Definition
  - 階層で分けた場合どのレベルでソートするかを決めます。それ以降はアルファベット順になります。


- Layout Derection
  - 縦に並べるか横に並べるかを決めます。個人的には横が同一グループが見やすかったので縦(Vertical)にしています。


- Horizontal(Vertical) Space
  - 横（縦）のマージンの大きさの指定です。（たぶんpx指定）


- Max Per Row/Column
  - １行（列）に最大いくつのSymbolを置くかを指定します。２５個ぐらいが見やすい？


- Reverse layer list sort order
  - これにチェックを入れると上から順にabcd...zの順番になります。


## ショートカット

Symbolの作成やテキストのカーニングなどのショートカットが用意されていません。
そこそこ必要になる回数が多いのに毎回カーソルでやってたら面倒なことこの上ないのでショートカットを作成しました。

MACのシステム環境設定から設定します。

1.システム環境設定からキーボードを選択

![スクリーンショット 2017-09-26 14.17.35.png](https://qiita-image-store.s3.amazonaws.com/0/179198/8c14a148-b662-a1a9-f1d3-1dbc6e48881b.png)

2.ショートカットタブからsketch.appを選択
<img width="673" alt="スクリーンショット 2017-09-26 14.38.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/179198/4d391b60-d6b7-bbb5-a9e6-dc7cbf8845f2.png">


3.[ + ]をクリックして追加する
この流れです。
例えばCreateSymbolやカーニングのショートカットを作成したい時はこんな風に指定します。

CreateSymbol
![CreateSymbol](https://qiita-image-store.s3.amazonaws.com/0/179198/898641ae-a51f-1e5e-689e-ff3036947bfc.png)

Karning
![Karning](https://qiita-image-store.s3.amazonaws.com/0/179198/2647d409-c030-e4f7-9b23-920af6fc3b47.png)

* メニュータイトルはSketchのメニューに対応した名前を正しく指定する必要があります。
* ネストしている場合、[->]で間をつなぎます。

## チートシート

ちょっと古い情報ですがチートシートがあったので最初はこれを見て大体の感じを掴みました。
[ ココ ](https://dribbble.com/shots/1522880-Sketch-3-Cheat-Sheet)にあります。
![スクリーンショット 2017-09-26 15.57.55.png](https://qiita-image-store.s3.amazonaws.com/0/179198/30582559-c485-c089-bad1-6c7c229e1b41.png)

## 参考にした記事

[Symbolの色を自由自在に変える](https://blog.mismithportfolio.com/web/sketch-icon-color)
[アトミックデザインについて１](http://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/)
[アトミックデザインについて２](http://blog.kubosho.com/entry/using-atomic-design)

## まとめ

書いてみると大した量ではありませんでした。
多分何かしら書き忘れているので思い出し次第追記します。
いやー異ジャンルの作業は本当に楽しかった！