Adobe XDのプラグインショートカットをカスタマイズする方法

Adobe XDは、作業効率を上げてくれる優秀な「プラグイン」が数多くあります。全て無料でインストール・アンインストールが自由にできるので、プラグインを使って自分に合ったAdobe XDにカスタマイズできるのが魅力です。

その中でも、僕が愛用させてもらっているプラグインがあります。
それが「Resize Artboard to Fit Content」。

xd-plugin-lib

Webデザインをしていると、コンテンツの増減で高さがコロコロ変わります。そんな時にはひとまず縦に長〜く余白を作っておいて、デザインが完成したらこのプラグインを使ってスパッとカット！

しかも、複数のアートボードを同時選択して、まとめてカットできます。
※逆にはみ出ているコンテンツに合わせて伸ばすこともできます

ショートカットキーは「Control+F」
1日何回このショートカットを使っているか…重宝しているプラグインです。

ある日、ショートカットが取られちゃった

いつものようにデザイン作業をして、いつものようにショートカットを発動。すると、違うプラグインが立ち上がりました。

彼の名は「Auto Flow」。前日にインストールしたプラグインでした。

Auto Flow - Creating Wireframes, userFlow & Flowchart In XD

よく見ると、彼にResize Artboard to Fit Contentのショートカット「Control+F」が取られちゃっている…

後からインストールされた方が勝つのだろうかと思い、Resize Artboard to Fit Contentをアンインストール → 再度インストールしてもダメ。

Auto Flowは今後使いたいので消したくないが、「Control+F」のショートカットを奪われるのは困る…

そもそも、プラグインのショートカットを自由にカスタマイズできるのだろうか？？
そんな疑問をXDUG 東京代表の湯口りささんに教えてもらいました。
普段コードを触らない自分でも簡単にできたので、その方法を紹介したいと思います。

プラグインのショートカットをカスタマイズする方法例

僕は簡単なコーディングしかできない程度で、難しいコードは一切触れません。（プラグインの中身を見るのは初めてです）

①Adobe XD > プラグイン > 開発フォルダーを表示

Finderが開きます。

②同階層から「plugins」フォルダーを見つける

Library/Application Support/Adobe/Adobe XD/plugins
（※Macの場合）

この謎の変数たちが「自分がインストールしているプラグイン」の全てです。Resize Artboard to Fit Contentはどれだ！？

③Sublime Textなどのエディターソフトで、該当ショートカットを検索する

"ctrl+F”で検索すると2件でてきました。バッティングしている2つのプラグインですね。「manifest.json」にショートカットが記述されているようです。あとは該当のjsonファイルの記述を書き換えます。

④書き換えて、Adobe XDを再起動

今回はAuto Flowを「Control+F → Control+A」に変更しました。
無事にResize Artboard to Fit Contentの「Control + F」が復活！
ショートカットのカスタマイズで、どちらかをアンインストールすることなく解決できました。

必要以上のカスタマイズは注意

僕は簡単なコードしか書けない程度のレベルですが、ショートカットの編集もしくはショートカットを追加することができました。

じゃあ好きなように書き換えて、もっと使いやすくしよう！
というには注意が必要です。

その理由は、プラグインのアップデートの度にリセットされるから。

制作者の方が改良されたタイミングなので、頻度もバラバラですし、そのタイミングはこちらでは分かりません。アップデートをすると自分が書き換えたコードはリセットされ、その都度ショートカットの再書き換えをしなければいけません。

どうしても必要なものだけ、最小限にされることをお勧めします。

まとめ

・プラグインのショートカットがバッティングした時、どちらが優先されるのかルールが分からない
・プラグインが格納されているディレクトリ：Library/Application Support/Adobe/Adobe XD/plugins
・ショートカットは「manifest.json」に書かれている
・アップデートの度にリセットされるので書き換えすぎると大変

以上、プラグインのショートカット編集法でした。

改めてりささん、ありがとうございした。
何かAdobe XDの操作で詰まったときは、このモーメントをまず見られるのをお勧めします。

⚡️ "Adobe XDのTipsと質問への回答集"

初モーメント作成！
古いツイートも時々いいねがつくのでざっくりまとめてみました。 #AdobeXDhttps://t.co/1WWHmpRb6U

— Risa Yuguchi (@risay) October 4, 2019

そして、ぜひ「Resize Artboard to Fit Content」、使ってみてくださいね。神プラグインです。「Control + F」！