[Solution] I want to align and distribute to a key object in Adobe XD!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
XDキーオブジェクトに整列・分布 アイキャッチ図版

You’d be surprised to find that you can’t do things that you would normally do unconsciously. For me, it was the “Align to key object” in Adobe XD, and we’d be happy if XD had that too.

In this article, I’ll introduce Singari, a plugin for Adobe XD that treats the last selection as a key object and performs alignment and distribution.

What is Singari?

This is an Adobe XD plugin that aligns and distributes selected items to a key object. Basically, it treats the last selected item as a key object, but you can choose which one to treat as a key object. The operation is performed from the menu or panel.

Singari イメージ画像

By the way, the Japanese word “Singari” means the end of the permutation. Especially important units of samurai who take command in the last row of the withdrawal are called “Singari”.

How to install

Since this plugin has already passed Adobe’s public review, you can install it directly from the following link.

How to use

Simply select multiple items on XD’s artboard and do what you want, such as Align Left.

To change a key object, you can easily do something like this.

  1. Select all target items once
  2. Deselect the item you want to be a key object and select it again

You can specify the distribute offset by dialog or panel. If it is undefined, it is regarded as 0.

It’s an exhilarating move!


It is convenient to assign keyboard shortcuts using Keyboard Maestro or the macOS system preferences instead of relying on XD’s features. You can use keys that are not yet available in official features, such as arrow keys.

We have prepared a lot of menus so that you can call the plugin function from the menu with Keyboard Maestro. Please try to create your own macro by combining multiple menus.



It has the following features.

Show PanelShow align panel
Basic Align
Align LeftHorizontal Align Left
Align Horizontal CentersHorizontal Align Center
Align RightHorizontal Align Right
Align TopVertical Align Top
Align Vertical CentersVertical Align Center
Align BottomVertical Align Bottom
Two-step Align, both vertical and horizontal, in one run
Align Top LeftVertical Align Top, Horizontal Align Left
Align Top MiddleVertical Align Top, Horizontal Align Center
Align Top RightVertical Align Top, Horizontal Align Right
Align Middle LeftVertical Align Center, Horizontal Align Left
Align CenterVertical Align Center, Horizontal Align Center
Align Middle RightVertical Align Center,Horizontal Align Right
Align Bottom LeftVertical Align Bottom, Horizontal Align Left
Align Bottom MiddleVertical Align Bottom, Horizontal Align Center
Align Bottom RightVertical Align Bottom, Horizontal Align Right
Distribute Spacing
Distribute Horizontal SpaceHorizontal Distribute Space
Distribute Vertical SpaceVertical Distribute Space
Distribute Objects
Distribute LeftHorizontal Distribute Left
Distribute Horizontal CentersHorizontal Distribute Center
Distribute RightHorizontal Distribute Right
Distribute TopVertical Distribute Top
Distribute Vertical CentersVertical Distribute Center
Distribute BottomVertical Distribute Bottom
Settings. It is retained when you quit Adobe XD
Relative to ParentChange align basis to Parent
Relative to SelectionChange align basis to Selection
Relative to TextChange align basis to Text
Relative to Frontmost ItemChange align basis to Frontmost Item
Relative to Backmost ItemChange align basis to Backmost Item
Relative to Last Selected ItemChange align basis to Last Selected Item
Toggle SyncSync multiple items ON / OFF alternately
Set Distribute Offset…Specify the distribute offset in the dialog


Everything you can do in the menu can be done in the panel.

Singari整列パネル見た目 画像

Relative to…

Specifies the rule for determining which item is to be treated as a key object.

Relative to 説明1 図版
Relative to 説明2 図版
ParentConsiders the parent of the selected items as a key object. This is convenient for aligning or distributing according to areas such as artboards, groups, and components.
SelectionAlign or distribute according to the whole area of the selected item without specifying a key object.
TextThe text in the foreground of the selected items is considered the key object. This is useful, for example, to center the background rectangle to match the button text.
Frontmost itemThe frontmost selected item is considered a key object.
Backmost itemThe backmost selected item is considered a key object. This is useful, for example, to center the text to fit the rectangle in the background of the button.
Last selected itemConsiders the last selected item as a key object. It is the most versatile, so it is usually recommended to select this.

Sync multiple items

When it is turned on, the items will be aligned while keeping the spacing between them. This setting affects only alignment.

Sync multiple items 説明図版


Specify the Distribute Offset. This setting affects only destribution.


Shows a preview of which items are currently being used as key objects. This plugin changes the key object depending on the number of selected items, “Relative to” setting and “Sync multiple items” setting.


Now you are working a little faster than before. Get away from work today and do whatever you want!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る