Adobe XDでワイヤーフレームを作っているときの悩み
・テキストの流し込みのうまいやり方がわからない
・テキストの流し込みに時間がかかる
・テキストをいちいちコピペして入れるのがめんどくさい
・ダミーのテキストを正しい原稿にする作業が手間
そんなあなたのためにホームページ制作会社で働くナガセがAdobe XDのテキスト流し込みのキホンから、ダミーのテキストを原稿に直したりする作業を爆速にする方法をご紹介します。
なお、本記事では超キホンのテキスト流し込みの方法からご紹介をしているのでそんなまどろっこしいのはいいから早く神ツールを教えてくれ。
という方は記事後半の「【原稿を入れるスピードが爆速になる】Adobe XDのテキスト流し込みが爆速になるプラグイン」からご覧ください！
目次
Adobe XDでテキストを流し込むキホン【ドラックアンドドロップでカンタン】
数カ所に文字を流し込みたいとき
まずはAdobe XDでテキストを流し込むキホン方法を紹介します。
①流し込みたい文章をテキストファイルで作成
②ドラック＆ドロップする
上記の通り。もしくは原稿をコピー＆ペーストするだけでOKです。
数カ所に文字を打ち込むのであればこの方法で問題なしです。
写真を使って解説していきます。
①流し込みたい文章をテキストファイルで作成
文章を流し込む場合はmiやcotEditorなど、Windowsならメモ帳などをつかったファイルをドラックアンドドロップで流し込みます。
これでテキストを流し込むことができました。
これでテキストの流し込みは完了ですが、Adobe XDでよく使うリピートグリットなど流し込むコンテンツが多いときはいちいちファイルを分けていくのも大変です。
リピートグリットってなに？という方はこちらの記事でリピートグリットの使い方などを抑えておきましょう。
リピートグリットでのテキスト流し込みを速くしよう
同じ構成が続くときに使うリピートグリット。そのひとつひとつに原稿をドラックアンドドロップしていくのはかなり大変ですよね。
でもご安心下さい。
1つのファイルでテキストの流し込みを行う超カンタンで画期的な方法があります。
リピートグリットではファイルを複数に分けるのではなく改行をすることでカンタンにテキストを流し込むことができます。
これでリピートグリットで作られた似たような構成のものでも原稿をすばやく入れることができました。
でもちょっと待って下さい。
自分でワイヤーフレームなどを作成し自分でテキストを流し込みまで行う場合はこの方法でも問題ないかもしれません。
ですが実際複数人で作業する場合は、どのテキストファイルがどれなのか、どこがリピートグリットでできているのかを正確に伝えていくのはなかなかに難しいです。
じゃあどうしたらいいの？
というところですがテキスト流し込みに超便利な神プラグインをご紹介します。
【原稿を入れるスピードが爆速になる】Adobe XDのテキスト流し込みが爆速になるプラグイン
Adobe XDのテキスト流し込みを爆速にするプラグインDocs 2 Designをインストールしよう
まずはプラグインのインストールから始めましょう。
①Adobe XDを開いて新規作成をします。
②プラグインボタンを押し、プラグインを追加します。
③プラグインを探すボタンに「Docs 2 Design」と入力しインストール
さてこれで流し込みを開始！といきたいところですが、実はこのプラグインはただ流し込みをするわけではないところがポイント。
こんな感じでAdobe XD上で作ったテキストそれぞれに番号をふってくれるんです。だから、どの場所にどのテキストを入れたいかだれが見ても明確で、原稿を他社などに依頼している場合もスムーズに作業ができちゃいます。
このDocs 2 Designを使ってテキストを流し込むときは
①Adobe XDで作ったワイヤーフレームなどをエクセルに落とし込み、
②スプレッドシートで原稿を編集
③エクセルに再度ダウンロードして流し込むと3ステップで流し込みを行うことができます。
有料版だとわざわざエクセルにダウンロードしなくてもスプレッドシートから直接編集できるようですが、ここでは無料でできる方法でご紹介します。
Adobe XDのテキスト流し込みを爆速にするプラグインDocs 2 Designでテキスト流し込みをしてみよう
ステップ1：エクセルにダウンロード
ダウンロードといっても超カンタンなのでご安心を。アートボードを選択して、プラグインDocs 2 DesignのExtractボタンを押すだけ。
Extractボタンを押すとエクセルファイルをダウンロードできます。すると、テキストに番号を振ってくれます。なのでテキストを入れたいところには「テキストダミー」などと入力しておきましょう。
ステップ2：スプレッドシートで原稿を編集
ダミー部分を原稿にするためにスプレッドシートでテキストを編集していきます。スプレッドシートを開いてファイル＞インポートから先程のエクセルデータをダウンロードしましょう。
これでスプレッドシートへの移行が完了しました。ここでテキストを編集していきます。
赤文字部分の原稿を編集しました。（実際には赤文字だときちんと反映されないようなので注意！）編集が完了したらファイル＞ダウンロード＞Microsoft Excelの形式でダウンロードをします。
ステップ3：エクセルに再度ダウンロードして流し込む
アップデートボタンを押して編集したエクセルファイルをダウンロード
これでさっき編集した部分の流し込みが完了しました！早い！
※ちょっと注意
リピートグリット、コンポーネントで作られている部分はテキスト化してくれません。エクセルにダウンロードする前にリピートグリット、コンポーネントの解除を忘れずに。
本記事は以上です。
