2017年4月更新で一部挙動が変わっています
Adobe XDのキャッチーな機能その何番目か、外部ファイルによるデータのデザイン取り込み、使っていますか？
Adobe XD Advent Calendar 8日目の記事です
※本稿は、Adobe XDのテキストデータとリピートグリッドのなかで説明しきれなかった挙動をとりあえげて新たに説明するものです。
データとリピートグリッド
まずは公式のオンラインヘルプを見てみましょう。
一番下の「リピートグリッドへのテキストファイルのドラッグ」部分
グリッドにテキストファイルをドラッグするだけで、リピートグリッドのプレースホルダーテキストを置換できます。
- テキストファイルのテキストを書式設定し、テキストを次のグリッドに流し込む場所に改行を追加します。
- リピートグリッドにテキストファイルをドラッグします。
リピートグリッドは、テキストファイルと同じテキストのシーケンスでデータが設定されます。ファイル内のテキストの行数よりグリッド数が多い場合は、シーケンスが繰り返されます。
動作を見れば明らかなの十分なのですが…使う上で覚えておきたい、太字の部分を掘り下げていきます。
テキストファイル
Finderやデスクトップからドラッグ＆ドロップでセットしますが、ファイルの注意事項は次の通り。
- 改行ごとに1件のデータになるので、改行付きの流し込みはできない
- 文字が1つもない行の改行は無視される
- 空にしたい場合は、半角か全角の空白をいれる
- 拡張子はOSがテキストファイルと認識するもの(.txt)を必ずつける
Adobe XD上でのイメージはこんな感じになります。
誤解しやすいですが、リピートグリッドはデータを管理しているのでなく、インデックスを管理しています。
テキスト以外のデータ：ラスター画像ファイルのドロップ
Adobe XDがシークエンスデータとして扱うのは、テキストファイルだけじゃありません。
クリップマスクと思われている機能ですが、JPEG/PNG/GIFなどのラスター画像ファイルをFinderなどからドラッグする機能は、テキストファイルの中身と同じくシーケンスのあるデータ扱いの機能になります。
Finder上で掴んだラスター画像ファイルがリストのメンバーとなります。4つ選んだら、4つの画像が繰り返し表示される仕組みで、挙動だけ考えるとテキストと一緒です。
データを変更する
- ファイルをもう一度ドラッグ＆ドロップする
- (テキストのみ)その場で編集する
テキストファイルからのシーケンスデータは、Adobe XD上で変更してもシークエンスの中のデータが変わるだけです。元のファイルは変更されません。
2の方法は変更はできてもデータ追加はできないので、リストの項目を増やしたい場合は、一度テキストファイルを修正してドラッグ＆ドロップし直しましょう。
ラスター画像は、いつの頃からかかなり柔軟に写真の差し替えや、シークエンスへの写真追加ができるようになりました。
しかし、テキストと違ってAdobe XD上での編集はできません。ラスター画像は塗りに反映されますがどうなるかはこれから紹介します。
2017年4月更新はデータから切り離す手段がほぼなくなっています。
データから切り離す
あまり考えたことないかもしれませんが、ドラッグ＆ドロップで渡したシーケンスデータからテキストオブジェクトや画像を切り離してデータリンクをなかったことにする事ができます。「これを知っているとお得」、ではなく、「これはやらないように気をつけて」という話で、意識して使うことはまずありません。
リピートグリッドを解除
リピートグリッドを解除すると、表示を保ったままシーケンス情報だけを消すことができます。リピートグリッドとしてのメリットも失われるので、縮小後の画像をまとめて書き出したいとかかなり特殊なときにしか使えません。
グループ化してグループを解除する
データから切り離された上に、選択した内容ですべてのアイテムが書き換わります。
余談ですが、リピートグリット中のオブジェクトに対してデータセットを行ってない場合はグループ化した瞬間にすべて同じテキストに変更されます。例えば、リピートグリッド中の前項目で固定になる見出しが途中で変わったときによく使っています。
(ラスター画像のみ) 塗りを変更する
テキストのように一つのアイテムだけ塗りつぶしに変えよう…なんて考えると、リピートグリッド内のそのシェイプすべてがラスター画像でなく塗りつぶしになります。
最後に
簡単なテキストファイルからのデータ挿入ですが、暗黙の表示ルールが幾つかあります。知っているとちょっとだけ制作の疑問が減る情報を集めましたがいかがでしたでしょうか？
ファイルからのダイレクトデータ挿入について理解が深まれば幸いです！
おまけ
AEMXDと呼ばれる、Adobe Enterprise Manager(以下AEM)とのデータ連携が2016年3月に紹介されました。日本ではマーケティングクラウドのイベントで紹介されたものです。
AEMで管理しているコンテンツデータをそのままAdobe XDのUIをしたアプリに流し込むことができ、そこからモバイルアプリを書き出せるというようなものです。AEMは残念ながらその名の通り企業向けのサービス。比較的個人向けなAdobe Creative Cloudで使えるAdobe XDにも入ってくるといいなぁと思います。