Sketch、便利ですよね。
まぁ僕はPhotoshopの方が好きで、普段はできるだけフォトショを使うんですけど。
でもSketchを使わなければならない局面(案件)、ありますよね。めっちゃ量産が必要とか、なんかよく分からんけど「これからはSketchでしょ！」と言われて、とか…。

本記事はSketchを使うとイライラしてしょうがない、みたいな人向けの、設定方法や使い方のメモです。
ちなみに、本記事執筆時点のSketchのバージョンは3.8.2です。

まず設定

まずはSketch Toolboxをインストールする

Sketch Toolbox - A super simple plugin manager for Sketch

Sketch Toolboxは、Sketchのプラグインを一括管理できるMacアプリです。プラグインのインストールやアンインストールが簡単にできるようになるので、オススメです。
サイトから、もしくはHomebrew Caskからインストールできます。

$ brew cask install sketch-toolbox

オススメのSketchプラグイン

Sketchのプラグインは沢山あります。「これは絶対インストールした方がいい」というやつだけ紹介します。

Sketch Commands

bomberstudios/sketch-commands: A collection of script commands for Bohemian Coding's Sketch.app

便利コマンド詰め合わせみたいなやつ。これクッソ便利だから絶対インストールしよう！！！！11

カスタムキーボードショートカットを設定する

sketchで便利なカスタムショートカットの作成方法 - Qiita

上記リンクを参考に、カスタムショートカットを設定しましょう。
よくする操作をキーボードショートカットに登録すれば、生産性が何倍にもなります。

…といいつつ、僕はこれだけ…。
これは何故設定しているかというと、Cmd+0とCmd+1の挙動をPhotoshopに合わせてあります。Sketchはなぜかデフォルトで逆になっているので。おかげで何百回操作を間違えたか分かりません。

ではTips

ではTipsです。便利な使い方というか、実際に操作をしていてイライラしたポイントと、その解消方法です。

ページごとにアートボードを書き出せない→ちょっと手順を踏むけど、できる

何十枚もアートボードを作り、それをページで分けて、みたいな作り方をしている人も多いと思います。
「プロトタイプを作りたいから全部のアートボードをページごとに書き出したい」という時に、現在のSketchはそれができません。イライラする…。

が、ちょっと手順は必要ですが、できます。方法は以下。

• 任意の場所にページ名と同名のフォルダを作る
• そのページを選択し、「Plugins」→「Sketch Commands」→「Select」→「All Artboards in Page」
• 現在のページ内の全てのアートボードが選択されるので、あとは好きにExport

レイヤーパネルやカンバス上でアートボードのタイトルを⌘押しながらポチポチクリック…しないでいいんです。めっちゃ捗ります。

Symbolsページ内がぐっちゃぐちゃだからシンボルを綺麗に整列させたい→できる

Sketch 3.7から、シンボルは「Symbols」というページ内で一括管理するようになりました。
が、使いづらすぎる。シンボルを新しく作った場合に、どういう法則でSymbolsページ内にシンボルが追加されるのか、まったく分かっていません。
特にSymbolsページを意識せずにシンボルを作ったりしていて、「ちょっとシンボル管理するか」とSymbolsを見ると、ヤバい。というのが最近の悩み。

これも解決できます。「Make Grid」という機能を使いましょう。

• Symbolsページを選択
• さっきと同じく、「Plugins」→「Sketch Commands」→「Select」→「All Artboards in Page」
• 全てのシンボルが選択された状態になる
• 「Arrange」→「Make Grid」
• いい感じに整列されて最高！！！！！

という感じです。Sketch Commandさまさまです。

Make Gridの設定ダイアログ。RowsとColumnsとMarginはお好みで。
「Duplicate layers to fill missing cells」のチェックは外しておきましょう。

こういうの自動でやってくれ！と思いますが、まぁその内アップデートが来て改善されるかも知れません。

その他のイライラしたポイント

ここからはハイライトでお送りします。

• ページをまるごと1枚の画像で書き出したい
  • →Sketch Commandsでもできるし、SketchToolでもできる
• レイヤーやグループのコピペを繰り返すとめっちゃ深い階層のレイヤーグループの中にレイヤーが1つだけ、みたいな状態になりがち
  • →Cmd+Shift+G(Ungroup Layers)を連打
• 文中のリンクなどをデザインする場合に、一部の文字色だけ変えたいが、全ての文字の色が変わってしまう
  • →Text Styleを設定していないか確認。
  • 一部の文字色を変えたい場合は、「No Text Style」にする
• 日本語の扱いが最悪→
  • そもそもSketchでの文字周りは諦めているので、イライラするとかそういうレベルは過ぎ去りました
  • 文字も含めてちゃんとやりたい場合はPhotoshopでやる

まとめ

僕はやってないですけど、Sketch Commandsでよく使うコマンドはカスタムキーボードショートカットに登録しておけば、さらに快適になるんじゃないでしょうか。

かなり個人的なTipsなのですが、同じような箇所でイライラしている…！という人がもしいれば幸いです。