[Solution] I want to align and distribute to a key object in Adobe 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.

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.
https://adobe.com/go/xd_plugins_discover_plugin?pluginId=6a37e6e3

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.

Select all target items once
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!

Hint

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.

References

Panel
Show Panel	Show align panel

Basic Align
Align Left	Horizontal Align Left
Align Horizontal Centers	Horizontal Align Center
Align Right	Horizontal Align Right
Align Top	Vertical Align Top
Align Vertical Centers	Vertical Align Center
Align Bottom	Vertical Align Bottom

Two-step Align, both vertical and horizontal, in one run
Align Top Left	Vertical Align Top, Horizontal Align Left
Align Top Middle	Vertical Align Top, Horizontal Align Center
Align Top Right	Vertical Align Top, Horizontal Align Right
Align Middle Left	Vertical Align Center, Horizontal Align Left
Align Center	Vertical Align Center, Horizontal Align Center
Align Middle Right	Vertical Align Center，Horizontal Align Right
Align Bottom Left	Vertical Align Bottom, Horizontal Align Left
Align Bottom Middle	Vertical Align Bottom, Horizontal Align Center
Align Bottom Right	Vertical Align Bottom, Horizontal Align Right

Distribute Spacing
Distribute Horizontal Space	Horizontal Distribute Space
Distribute Vertical Space	Vertical Distribute Space

Distribute Objects
Distribute Left	Horizontal Distribute Left
Distribute Horizontal Centers	Horizontal Distribute Center
Distribute Right	Horizontal Distribute Right
Distribute Top	Vertical Distribute Top
Distribute Vertical Centers	Vertical Distribute Center
Distribute Bottom	Vertical Distribute Bottom

Settings. It is retained when you quit Adobe XD
Relative to Parent	Change align basis to Parent
Relative to Selection	Change align basis to Selection
Relative to Text	Change align basis to Text
Relative to Frontmost Item	Change align basis to Frontmost Item
Relative to Backmost Item	Change align basis to Backmost Item
Relative to Last Selected Item	Change align basis to Last Selected Item
Toggle Sync	Sync multiple items ON / OFF alternately
Set Distribute Offset…	Specify the distribute offset in the dialog

Panel

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

Relative to…

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

Parent	Considers 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.
Selection	Align or distribute according to the whole area of the selected item without specifying a key object.
Text	The 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 item	The frontmost selected item is considered a key object.
Backmost item	The 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 item	Considers 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.

Offset

Specify the Distribute Offset. This setting affects only destribution.

CURRENT KEY OBJECT

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.

Thanks

@onthehead | Seiji Miyazawa helped design the icon, screenshot, panel for the plugin. Thank you very much.
This article introduced us to the plugin and its usage arrangement. Thank you. デザイナーTantanのポートフォリオサイト｜ウェブデザイン印刷物イラスト【広島】

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