AdobeXDからエクセルにカンタン書き出し！ Docs 2 Design！

こんにちは。MaromaroのChieです。

MaromaroではAdobeXDでワイヤーフレームを作成することが多いのですが、エクセルで資料が欲しい・・・なんてことも少なくはありません。
今回は、そんなときに便利なXDをもとにエクセル書き出しできる、AdobeXDのプラグイン「Docs 2 Design」をご紹介！
使ってみて本当に便利だったので是非ぜひお試ししていただきたいプラグインです！

Docs 2 Designとは

「Docs 2 Design」はAdobeXDで制作したワイヤーフレームやデザインを、エクセルに変換でき、かつエクセルに入れたテキスト情報をAdobeXDに流し込むことができるプラグインです。

参照：Docs 2 Design

有料版はGoogleのスプレッドシートに対応していたり、アートボード10点以上に対応するようです。

Docs 2 Designのインストール方法

AdobeXDを開いて、上部メニューから「プラグイン」→「プラグインの参照」もしくはキャンバス画面の左下にある「①プラグインボタン」をクリックし、「②プラグイン」の右側にある「＋」ボタンをクリックします。

Creative Cloudのウィンドウが開くので、
①虫眼鏡マークの「すべてのプラグインを検索」の検索フィールドに「Docs 2 Design」と入力
②右のエリアの検索結果が出るので、入手ボタンをクリックしインストール

AdobeXDに戻り、プラグインエリアに「Docs 2 Design」が追加されていればインストールは完了です！

Docs 2 Designの使用方法

AdobeXDに「Docs 2 Design」がインストール出来たら早速エクセルに書き出してみましょう。

AdobeXDからエクセルに書き出し

①書き出したいアートボードを選択
②「Extract…」ボタンをクリックし、保存先を選択し保存します

すぐにエクセルが生成されるので、書き出したエクセルを開いてみましょう！

テキストを自動判断し、左のデザインに沿ってテキストごとに番号が付与されています。
更にエクセルの右側にテキスト毎の番号に合わせてテキストまで入ってる状態のデータが出来上がります！
これだけでもかなり画期的ですね！

AdobeXDからエクセルに書き出すときの注意点

さて、「Docs 2 Design」には一つだけ罠がございます。
テキストを自動判断してくれるには条件があり、コンポーネントされたテキストやリピートグリット、またグループ化されたテキストなどは、判断されなくなってしまうのでテキストとして判断してもらいたい箇所は、「Extract」で書き出す前に全て解除する必要があります。
コンポーネント、リピートグリッドはAdobeXDの特徴でもあるので、ある程度ワイヤーフレームが固まった時点でエクセルに書き出すのが良さそうですね。

エクセルからAdobeXDへテキストの流し込み

「Docs 2 Design」のすごいところは、エクセルへの書き出しだけでなく、AdobeXDへテキストの流し込みができること！

書き出したエクセルの右側の欄に必要なテキスト（原稿）を入れて保存します。

AdobeXD画面に戻り、UPDATEをクリックし、先程保存したエクセルを選択します。

すると、エクセルに入力したテキストがXDの該当箇所に反映されます！

まとめ

せっかくXDで作ったのに、エクセルで作り直さなきゃならないってことも今まであったりしたのではないでしょうか？
制限はありますが、「Docs 2 Design」を使えば二度手間だった作業も減って作業効率アップにもつながると思います！
是非ぜひお試しください！

以上MaromaroのChieでした。