[Sketch 3] ナッジの設定を変えるなら 「Nudg.it」 がオススメ！

みなさんこんにちは！デザイナーのよこやまです。
今回は UIデザインの作業効率に大きく影響するナッジの設定が簡単にできる「Nudg.it」をご紹介します。

ナッジ (Nudge) とは

キーボードの [arrow key] を使ってオブジェクト等を移動させる機能のことです。
Sketch のデフォルト設定は [arrow Key] で 1px、[shift + arrow key] で 10px となっています。

Sketch 3.3 で追加されたナッジ調整機能

You can now customize the arrow nudge distance (used for moving and keyboard-resizing) by using two hidden default keys, nudgeDistanceSmall and nudgeDistanceBig

(Sketch 3.3 What's new in version 3.3 | Sketch)

Sketch 3.3 からナッジの値を変更できるようになっていましたが、アプリケーション上で設定を変更することはできず、Sketch の設定ファイル（com.bohemiancoding.sketch3.plist）にあるnudgeDistanceSmall、nudgeDistanceBig の値を直接書き換えなければなりません。

実際にナッジの設定を変更するには、設定ファイル（com.bohemiancoding.sketch3.plist）を Xcode 等で開いてキーを探して値を書き換えたり、次のように defaults コマンドを実行して設定を変更したりという方法になります。

例：[arrow key] で2px、[shift + arrow key] で8pxに設定

$ defaults write com.bohemiancoding.sketch3 nudgeDistanceSmall -float 2.0
$ defaults write com.bohemiancoding.sketch3 nudgeDistanceBig -float 8.0

これらの方法を使えばナッジの設定を変更することができますが、plist の扱いやターミル等での作業に慣れている方でなければ少々わかりづらい方法だと思います。

そもそも Sketch アプリ上で設定できるようにしてくれればいいのですが、2016年5月20日現在 Sketch 3.8.1 ではその機能はまだありません。そこで Nudg.it！このアプリケーションを使えば前述した方法を使わずに簡単にナッジの設定ができます。

Nudg.itを使ったナッジの設定方法

↓ アプリケーションは次のリンク先からダウンロードできます
Nudg.it

設定方法はとてもシンプルで、Nudg.it を起動すると次の画像のようなウィンドウが表示されるので「Small Nudge」、「Big Nudge」それぞれの値をセットして「Apply」ボタンを押すだけです。

It's really that simple. （Nudg.it 公式サイトより）
おっしゃる通りとてもシンプルですね。

アプリのデザインでは、8の倍数を使うことが多いので「Big Nudge」を８pxにしておくと便利かもしれません。

ちょっとわかりづらいですが、次の画像のように Sketch を開いたまま設定を変更することもできました。

まとめ

普段何気なく使っているナッジですが、作業内容に合わせて簡単に調整ができるというのが「Nudg.it」のとてもよいところだと感じました。
UIデザインの作業効率を上げるためにもぜひ活用してみてください。

それではみなさん快適なデザインライフを！