Adobe XDでデザイン!プラグインを活用しよう

こんにちは、ハヤマです。

最近、弊社もワイヤーフレーム以外にデザイン制作においてもAdobe XDを用いるようになりました。
Adobe XDのメリットはなんといってもデータの軽さではないでしょうか。
配置画像をどんなに拡大・縮小しても画像自体に劣化が発生しないことも素晴らしいです。(Photoshopではリンク配置やスマートオブジェクト化しないと劣化します)
アップデートリリースをかなりの頻度で更新し(詳しい情報はこちら)、操作性の向上や新たな機能を提示してくれていることから Adobeとしても今後はWebデザイン制作の主力ツールとして位置付けていくのだろうと思います。

その他にも、作業の効率化を図るプラグインも充実していることも魅力のひとつだと思います。
プラグインをインストールしていくことで、ユーザーの目的に応じたスムーズな操作が可能となります。ぜひ取り入れていきましょう。 今回はプラグインの設定方法から、デザイン制作においておすすめのプラグインまで簡単にですがご紹介したいと思います。

プラグインの設定方法

プラグインの設定方法について説明します。
※以下はAdobe XDの公式プラグインリストからインストールする方法になります。

  1. Adobe XDを起動し、メニュー:プラグイン > プラグインを見つける を選択
    f:id:arms_hayama:20200928121621p:plain

  2. プラグイン検索画面が表示されるので、使用したいプラグイン名の右側にある「インストール」ボタンをクリック
    f:id:arms_hayama:20200928121624p:plain

これでインストールは完了です。

インストールしたプラグインの使用方法

メニューから「プラグイン」を選択すると、登録したプラグインが表示されるのでクリックして選択すると使用できます。

デザイン制作時に活用できるプラグイン3選

以下に、実際にインストールをしてみて便利だと感じたプラグインをご紹介します。

テキストボックスの原稿を1行ずつ自動分割!「Split Rows」

f:id:arms_hayama:20200928112518j:plain

例えばWordやPoworPointなどからテキストをコピペしてAdobe XDに挿入する時。文章単位であれば問題ないですが、表の原稿をコピーする時など何度もコピペするのも面倒ですし、まとめてひとつのテキストボックスにペーストしてもそこから手動で内容ごとに分割するのも手間ですよね。そんな時におすすめのプラグインになります。

f:id:arms_hayama:20200928115503j:plain

Split Simple:テキストボックス内のテキストを、1行ずつ独立したテキストボックスに分割
Split Preserve Appearance:上記と同じ動作だが、分割後もテキストの位置(行高)を保持

複数のアートボードの整理に便利!「Artboard Plus」

f:id:arms_hayama:20200928112529j:plain

以下のようなアートボードの整理を行うことができます。Illustratorの「全てのアートボードを再配置」に近い機能ですね。
1ファイルの中に複数のアートボードを配置することが多いので、一括で整理できるのは便利です。

Rearrange Artboards into Grid:アートボードをグリッド状に再配置(余白の数値設定可能)
Create Artboard Around Selection:選択したオブジェクトサイズに合わせたアートボードを作成する
Sort Artborads by Name:アートボード名を昇順/降順に並び替え

大文字・小文字を一括置換!「Change Case」

f:id:arms_hayama:20200928112523j:plain

選択したテキストの大文字・小文字を変更することができます。
これはPhotoshop・Illustratorのデフォルトで書式メニューにありますね。テキスト原稿を流し込む際の大文字・小文字の表記揺れの調整など地味に助かります。

lowcase:全て小文字
UPPERCASE:全て大文字
Title Case:単語の先頭だけ大文字
Sentense case:文章の先頭だけ大文字

さいごに

ベースの機能はシンプルかつ明瞭に作られているAdobe XDですが、プラグインの種類が豊富なため、カスタマイズするほどにユーザーごと個別に使いやすくできる印象を持ちました。
このほかにも数々のプラグインが存在しています。私もまだまだ調べているところなので、 今後も使い勝手の良さそうなプラグインがありましたら紹介していきたいと思います。