Adobe XD バージョン 14 が公開されました。以下は、今回の更新に伴うプラグイン API の主な変更点です。
- selection と root ノードへの容易なアクセス
- テキストのスタイル設定
- Viewport APIの追加
- 共有したURLの取得
- プラグインのメタデータを保管
詳細は Change Log をご覧ください。
selection と root への容易なアクセス
選択中のオブジェクトとルートノードへのアクセスが scenegraph を使ってできるようになりました。つまり、引数としてこの 2 つを渡す必要がなくなったということです。
XD 14 からは、以下のように記述することが可能です。
function someAction() {
const { selection, root } = require("scenegraph");
/* ... */
}
Text スタイルにアクセスできる属性
Text ノードに対して、直接スタイルの取得と設定ができるようになりました。fill や fontFamily といったおなじみの属性を使ってスタイルを指定できます。
// テキストノードが選択されていると仮定
const text = const text = selection.items[0]; text.fill = new Color("Purple");
text.fontFamily = "Helvetica";
text.paragraphSpacing = 10;
テキストエリアを新規に作成して、大きさを指定することも可能です。
const text = new Text();
text.areaBox = {width: 100, height: 100};
Viewport APIの追加
ドキュメントのズームやパンが可能な Viewport が追加されました。引数にノードを指定してビューの中央に表示したり、座標と領域の大きさを指定して XD ドキュメントの表示領域を変更することができます。
下の例は、選択されているオブジェクトにビューポートが移動します。
const viewport = require("viewport");
viewport.scrollIntoView(selection.items[0]);
現在のビューポートの境界や、拡大倍率を取得することもできます。
const bounds = viewport.bounds;
const zoom = viewport.zoomFactor;
共有したURLの取得
cloud の getSharedArtifacts() メソッドにより、最近共有されたリンクを取得できるようになりました。プロトタイプとデザインスペックの選択は、cloud に定義されている ArtifactType (PROTOTYPE, SPECS) を使います。
下は、最近共有されたデザインスペックのリンクを取得するサンプルです。リンクの状況は取得できないため、サーバー側で削除されたリンクが含まれている可能性がある点には注意です。
// Get design specs data var sharedArtifacts = cloud.getSharedArtifacts(); var specs = sharedArtifacts.filter(artifact => (artifact.type === cloud.ArtifactType.SPECS) ); specs.forEach(artifact => {console.log("Design Spec URL: ", artifact.url); });
プラグインのメタデータを保管
ノードにプラグインのメタデータを保管するための属性 pluginData が追加されました。root ノードに保管すれば、ドキュメントのどこからでも参照可能です。ただし、プラグイン間でのデータ共有には使えません。
扱えるメタデータは文字列だけです。そのため JSON データは JSON.stringify などを使って変換することになります。
コメントする