Now Loading...

後から知ったSketch3の設定や機能

alt 今年からSketch3を使いはじめまして去年まではずっとPhotoshopを使っていました。Sketch3は動作が軽いのと思った以上に簡単に扱えたのでPhotoshopからの乗換えであれば割とすんなり使えると思います。
ただ業界的にはPSD納品でよろしくって場合もあり、会社全体でAdobe製品を使っている場合は個人では乗換えに踏み切れず普及しにくいのが現状なのだろうなと思います。
それにどんなに評判の良いツールでも乗換えは腰が重たいもので、ショートカットやガイドの引き方、マスクの扱いなど何をするにもいちいち調べなければならないのでストレスが溜まります。
しかし、先に知っておけばこのストレスも2割くらいは軽減されたんじゃなかろうか、と個人的に思った項目をまとめました。

複製レイヤー名に[xxx copy]をつけない

Sketch > Preferences > Layers タブの Duplicating > Rename duplicated layers のチェックを外す。 お好みですが私は付けません。環境設定は最初によく見ておけばよかったなと反省。
日本語訳もでているので一読おすすめします。
creative tweet - Sketch 3のメニューと環境設定を日本語へ意訳をしましたよ。

複製レイヤーの複製位置をずらす

Sketch > Preferences > Layers タブの Duplicating > Offset dupulicated layers のチェックを入れる。ずれ幅は10pxです。
cmd+Dで複製する場合はずらして複製、コピペの場合は同じ位置にペーストされるので場合によって使い分けます。
cmd+Dのほうが頻度が多いのですが同位置にペーストされると複製したかしてないかわからなくなって再度複製、みたいなことをやっているとゴミレイヤーだらけになるので確実にペーストされた見た目であると個人的には助かります。

クリックスルーの設定

グループ階層が深くなると単一レイヤーを選択するのが大変だなーと思いつつカチカチクリックしまくっておりましたがcmd+クリックで直接レイヤーを選択できることを知りました。(これは結構ストレスだったので後で知って衝撃でした)
また環境設定のSketch > Preferences > LayersタブのEnable click-through for new groupのチェックを有効にすると単一レイヤー選択がデフォになります。が、クリックスルーしません。いつも通りグループ選択されます。うまく機能していないのかと思ったらグループごとにクリックスルー設定が別々に保持されているようです。

  • チェック無しの状態で作ったグループ = 1クリックだとグループ選択
  • チェック有りの状態で作ったグループ = 1クリックでレイヤー選択

チェックを入れても過去に作ったグループはクリックスルーは無効ということのようです。 チェックした後に何も変化ないじゃん...と思ったらNew Groupて書いてありましたね!

アートボード名に/を含めて階層構造にして書き出せる

例えばアートボードをArtboard/ScreenAという名前にするとArtboardディレクトリの中にScreenA.pngが書き出されます。 しかしこのアートボードに含まれるスライスがArtboard/に書き出されるわけではありません。レイヤー全てにArtboard/sliceAなどの階層名を書かないとならないのでイマイチ使い勝手が悪いですね。

アートボードの中にアートボードを含めて一枚の遷移図として書き出せる

めっちゃ便利やーん!と思ったのですがアートボードをPDF書出しする際、Fillsで透過グラデーションを指定しているレイヤーはPDF上でうまく描画されません。
たまたま作った制作物がこれに該当していて困りましたがどうやらFillsのBlendingモードによっては問題ないようです。
これはSkechではなくPDF側の問題のような気がします。Illustratorで透過グラデーションがPDFでおかしくなるのと似ています。

tab選択が便利

レイヤー選択だけでなくパスのアンカーポイントまでtabで順番に選択できるのが新鮮。アンカーを1pxずらしたい場面でマウス操作すると変にスナップしたりしますが、tab選択後にカーソルで修正できるので煩わしくないです。

シンボルを編集するときは注意!

どういうわけかわかりませんが乱暴に扱うと位置がいろいろズレます。言葉で説明できないのですがズレた後にcmd+Zで戻れないのでシンボル編集するときは少しづつ丁寧に!
またSketch3は結構バグが多いです。

Sketchはgulpタスクにも対応してる

gulpでSketchタスクを書く前にSketchToolをインストールしておかないとエラーになります。最初勘違いしてましたが、プラグインを使うためのSketchToolBoxの方ではなくコマンドラインからSketchを操作できるCLIです。このSketchToolはSketchアプリ本体の中に同梱されているのでこれを実行すればインストール完了です。
本家からDLして実行しても大丈夫です。

$ cd Applications/Sketch.app/Contents/Resources/sketchtool/
$ ./install.sh
Installed sketchmigrate Version 1.0 (134) in /usr/local/bin  
Installed sketchtool Version 3.5.2 (25235) in /usr/local/bin  
$ sketchtool -v
sketchtool Version 3.5.2 (25235)  

バージョンが出ればインストール完了です。
gulpタスク設定などはクラスメソッドさんの記事が大変参考になりました。
これからはじめるGulp #26:Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す
こちらを元にスライス書出し・軽量化・Googleドライブにコピーまでをタスク化しておけばコマンドで発イチです! しかし毎回全てのスライスを処理するのは重たいので差分だけ処理する設定にできないものかと少し考えています。
上記に加えProttやZeplinなどの外部サービスにアートボードを同期できたらすごく楽だよなーとか思ってます。

株式会社パエリア
〒150-0043
東京都渋谷区道玄坂1-15-3
プリメーラ道玄坂 328号室
our service