Adobeが提供するデザイン・プロトタイピングツールの「Adobe XD」の2019年3月のアップデート内容をまとめました。

今月のアップデートに含まれる注目の変更内容は、下記の通りです。

  • Illustratorへのベクター素材ペースト
  • アセット書き出し機能の改善
  • フォントの自動読み込み
  • 異なるグループのオブジェクトが同時選択可能に
  • プロトタイプ上での「前へ」「次へ」ボタンの非表示
  • Jira Softwareとの連携

Illustratorへのベクター素材ペースト

今回のアップデートで、Adobe XD上でコピーしたベクターデータをIllustrator上でベクターデータとして貼り付けできるようになりました。

これによってAdobe XDとIllustratorの連携が強固になり、例えば手間のかかるベクターデータの編集はIllustrator上で行うようなことが簡単になりました。

アセット書き出し機能の改善

PhotoshopとIllustratorからインポートしたエレメントがデフォルトで書き出し対象となりました。

ロゴデータなど、PhotoshopやIllustratorから取り込んだデータはそのまま画像素材として使用する機会も多いので、ひと手間が無くなった形ですね。

フォントの自動読み込み

Creative Cloudアカウントにインストールされていないフォントが使われているドキュメントを開いたときに、バックグラウンドで移動的にAdobe Fontsがインストールされるようになりました。

フォントをインストールする機会が多い人にとっては便利な機能ですね。

異なるグループのオブジェクトが同時選択可能に

これまでは、異なるグループのオブジェクトを同時に選択することができませんでしたが、今回のアップデートでグループを横断した複数オブジェクトの選択が可能になりました。

例えば、グリッド上に並べているオブジェクトのシャドーを変更したいときなど、これまで一つずつ選択してスタイルを変更しないといけなかった作業も一括で行うことができるようになっています。

下記のように操作することで、異なるグループのオブジェクトを同時に選択することができます。

Windows
Shift + Ctrl を押しながら選択
Mac
Shift + Cmd を押しながら選択

プロトタイプ上での「前へ」「次へ」ボタンの非表示

Adobe XDを使って公開したプロトタイプは、画面下部に前後のアートボードへ移動するボタンやアートボードの番号が表示されていますが、設定によってそれを非表示にすることができるようになりました。

ユーザーテストなどを行う場合などに、テスターに「よりプロダクトの形に近い」状況でデザインに触れてもらうことができるようになり、意図しない動作が行われることを避けられます。

Jira Softwareとの連携

Jira Softwareと連携することによって、XDのプロトタイプとデザインスペックへの直リンクをJiraの課題に埋め込むことができるようになりました。

デザインフィードバックや変更点の共有などにJiraを使用している場合は、よりスムーズに作業を行うことができます。

注目のプラグイン

最後に注目の最新プラグインをいくつかご紹介しておきます。あまりプラグインを使わないという方も、プラグインを活用することで作業を効率化することができるので、ぜひ参考にしてください。

This Person Does Not Exist

「This Person Does Not Exist」とは、AIによって実在しない人物の画像を生成できるサービスです。

Adobe XDの「This Person Does Not Exist」プラグインを使用することによって、アイコンやアバターで使用する人物の画像を簡単に当て込むことができます。

Copy CSS to Clipboard

Adobe XD上で任意のオブジェクトのスタイルをクリップボードにCSSとして貼り付けすることができるプラグインです。

Zeplinなどを使えばCSSコードを表示することはできますが、Adobe XD上で気軽に利用できるという点でWebコーダーの人にはおすすめのプラグインです。

例えば、下記のようなCSSが出力されます。

width: 131.64px;
height: 131.64px;
/* background: url(...); */
border: 1px solid #707070;

実際にCSSファイルに記述する時は少し手を加える必要がありそうですが、それでもスタイルをワンクリックでコピーできるのは助かりますね。