Adobe XDへのテキスト流し込み最強ツール『Docs 2 Design』を紹介

Web制作初心者

XDで作成したデザインデータへのテキスト流し込みに時間がかかって作業が進まない…

こんな疑問にお答えします。

この記事を読んでいる方の中にはWebサイト制作において、クライアントとのテキスト確認作業に時間がかかって悩んでいる方もいると思います。

そんなときに便利なのが『Docs 2 Design』というXDのプラグインです。

無料かつ高機能なので、上手く使えば作業を大きく時短することができます。

ぼくもよく実案件で使用しているくらい便利なプラグインなのでぜひ参考にしてみてください!

目次

Docs 2 Designとは?

『Docs 2 Design』とは、Adobe XDで作成したデザインのテキストをエクセルファイルで編集できる作業効率化に適したXDのプラグインです。

無料版と有料版の違い

『Docs 2 Design』には無料版と有料版があります。

スクロールできます
無料版有料版
値段0円w
アートボード数10点まで無料無制限
対応ファイル形式エクセルのみエクセル
スプレッドシート
など
さぼり

無料版でも十分すぎる機能です。

『Docs 2 Design』をインストールする

それでは早速インストールして使っていきましょう。

まずはXDを開き、左下の双眼鏡のアイコンをクリックし、『プラグインを見つける』ボタンを押します。

    検索窓に『Docs 2 Design』と入力します。

    プラグインが表示されるので『インストール』をクリックします。

    画面左上に『Docs 2 Design』が表示されていればインストール完了です。

    テキストをエクセルファイルで流し込む方法

    それでは実際に、テキストをエクセルファイルで編集してみます。

    まずはアートボードを選択した上で、『Extract』を押し、エクセルファイルをエクスポートします。

    エクスポートしたエクセルファイルを開きます。

    さぼり

    MacユーザーでExcelを持っていない人は、Microsoftの個人用クラウド『OneDrive』が無料でエクセルが使えておすすめ!

    ファイルを開くと、下記のように左にアートボード、右にテキストが自動抽出されています。

    編集したいテキストを選択しましょう。

    今回はファーストビューのキャッチコピーを変更したいと思います。

    テキストを編集したらエクセルファイルを保存します。

    このままではまだXDに変更が反映されていません。

    XDに戻り『Update』ボタンを押し先ほどのエクセルファイルを選択すれば、自動的にXDに変更した内容が反映されます。

    テキストを一括で流し込みたい時やクライアントの作業環境がエクセルに適している時などは、とても便利なプラグインです。

    『Docs 2 Design』の注意点

    便利すぎるDocs 2 Designですが、1点注意点が。

    以下の条件に当てはまるテキストは、エクセル変換時にうまく反映されません。

    • コンポーネントされたテキスト
    • リピートグリット
    • グループ内のテキスト

    上記にあてはまるテキストは、エクセルに変換する前に全て解除しておく必要があります。

    目次