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なのですが、同じような箇所でイライラしている…！という人がもしいれば幸いです。