【解決】XDでもキーオブジェクトに整列・分布したい！

普段無意識でやっているようなものは，できないことに気づくと驚きますよね。私にとってはAdobe XDの「キーオブジェクトに整列」がそうでした。XDにもあったら嬉しいですね。

そこで今回は，最後に選択したものをキーオブジェクトとして扱い，整列や分布を実行するXD用プラグイン Singari（しんがり）を紹介します。

Singariって何？

選択したアイテムをキーオブジェクトに合わせて整列・分布するAdobe XD用プラグインです。基本的には最後に選択したアイテムをキーオブジェクトとして扱いますが，どのアイテムをキーオブジェクトとして扱うかは設定で変更できます。操作はメニューまたはパネルから実行可能です。

ちなみに殿（しんがり）とは，軍事用語で後退する部隊の中で最後尾の箇所を担当する部隊をさし，転じて隊列や順番の最後尾を意味します。

インストール方法

今回のXDのプラグインはAdobeの審査をすでに通過しているので，次のリンクから直接インストールできます。
https://adobe.com/go/xd_plugins_discover_plugin?pluginId=6a37e6e3

使いかた

XDのアートボード上で複数のアイテムを選択し，Align Left など目的の項目を実行するだけです。

キーオブジェクトを指定・変更するには，下記のようにすると楽です。

一旦整列・分布対象のアイテムをすべて選択する
キーオブジェクトにしたいアイテムの選択を外し，もう1度選択する

分布では，ダイアログかパネルで間隔を指定できます。未指定のときは間隔0と解釈します。

爽快な動作です！

応用

キーボードショートカットはXDに備わっている機能に頼らず，Keyboard MaestroやMacのシステム環境設定で割り当てるのが便利です。まだ公式の機能では指定できないキー（矢印キーなど）が使えます。

Keyboard Maestroなどでメニューからプラグインの機能を呼び出すことができるよう，たくさんのメニューを用意しました。ぜひ複数のメニューを組み合わせ，オリジナルのマクロを作成してみてください。

リファレンス

メニュー

下記の機能があります。

パネル
Show Panel	整列パネルを開く

基本の整列
Align Left	水平方向左へ整列
Align Horizontal Centers	水平方向中央へ整列
Align Right	水平方向右へ整列
Align Top	垂直方向上へ整列
Align Vertical Centers	垂直方向中央へ整列
Align Bottom	垂直方向下へ整列

2段階整列。1回の実行で縦横両方指定できる
Align Top Left	垂直方向上，水平方向左へ整列
Align Top Middle	垂直方向上，水平方向中央へ整列
Align Top Right	垂直方向上，水平方向右へ整列
Align Middle Left	垂直方向中央，水平方向左へ整列
Align Center	垂直方向中央，水平方向中央へ整列
Align Middle Right	垂直方向中央，水平方向右へ整列
Align Bottom Left	垂直方向下，水平方向左へ整列
Align Bottom Middle	垂直方向下，水平方向中央へ整列
Align Bottom Right	垂直方向下，水平方向右へ整列

等間隔に分布
Distribute Horizontal Space	水平方向等間隔に分布
Distribute Vertical Space	垂直方向等間隔に分布

オブジェクトの分布
Distribute Left	水平方向左に分布
Distribute Horizontal Centers	水平方向中央に分布
Distribute Right	水平方向右に分布
Distribute Top	垂直方向上に分布
Distribute Vertical Centers	垂直方向中央に分布
Distribute Bottom	垂直方向下に分布

環境設定。XDを終了しても保持される
Relative to Parent	整列基準をParentに変更する
Relative to Selection	整列基準をSelectionに変更する
Relative to Text	整列基準をTextに変更する
Relative to Frontmost Item	整列基準をFrontmost Itemに変更する
Relative to Backmost Item	整列基準をBackmost Itemに変更する
Relative to Last Selected Item	整列基準をLast Selected Itemに変更する
Toggle Sync	Sync multiple itemsのON/OFFを交互に切り替える
Set Distribute Offset…	ダイアログで分布の間隔を指定する

パネル

メニューでできることは，すべてパネルでもできます。

Relative to…

どれをキーオブジェクトとして扱うか決定するルールを指定します。

Parent	選択アイテムの親をキーオブジェクトとします。アートボードやグループ，コンポーネントなどの領域に合わせて整列・分布するのに便利です。
Selection	キーオブジェクトを指定せず，選択アイテム全体の領域に合わせて整列・分布します。
Text	選択アイテムの中で最も前面にあるテキストをキーオブジェクトとみなします。例えばボタンのテキストに合わせて背景の長方形をセンターに揃えるなどの用途に役立ちます。
Frontmost item	選択アイテムの中で最も前面にあるものをキーオブジェクトとみなします。
Backmost item	選択アイテムの中で最も背面にあるものをキーオブジェクトとみなします。例えばボタンの背景の長方形に合わせてテキストをセンターに揃えるなどの用途に役立ちます。
Last selected item	最後に選択したアイテムをキーオブジェクトとみなします。最も汎用性が高いため，普段はこれを選んでおくのがおすすめです。

Sync multiple items

ONにすると，アイテム同士の間隔を保ったまま整列します。この設定は整列だけに影響します。

Offset

分布間隔を指定します。この設定は分布のみに影響します。

CURRENT KEY OBJECT

現在どのアイテムがキーオブジェクトとみなされているかをプレビューで表示します。このプラグインは，選択アイテムの数，[Relative to]の設定，[Sync multiple items]の設定に応じてキーオブジェクトを自動変更し，動作も変わります。

謝辞

プラグインのアイコン・スクリーンショット・パネルのデザインは @onthehead | Seiji Miyazawa さんにお手伝いいただきました。ありがとうございます。

プラグインとその用法アレンジを紹介していただきました。ありがとうございます。デザイナーTantanのポートフォリオサイト｜ウェブデザイン印刷物イラスト【広島】

これでまた少し仕事が速くなりました。今日もさっさと仕事を切り上げて好きなことをしましょう！

コードは長いので，ダウンロードして見てください。

このサイトで配布しているスクリプトやその他のファイルを，無断で転載・配布・販売することを禁じます。
それらの使用により生じたあらゆる損害について，私どもは責任を負いません。
スクリプトやファイルのダウンロードを行った時点で，上記の規定に同意したとみなします。