Adobe XDをもっと使いこなすヒント！ 第27回 リピートグリッドに要素をまとめて配置

連載

Adobe XDをもっと使いこなすヒント！

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、リピートグリッド内に要素を配置する際のルールに関する6つのツイートを取り上げます。

Tip 1. 背景画像を配置する

#adobexd #protip Drag an image into any shape in a repeat grid to apply the image to all of the cells. @adobexd pic.twitter.com/iGWruchcrH

— Elaine Chao (@elainecchao) December 17, 2018

リピートグリッドには、まとめて背景画像を配置するための様々な使い方が用意されています。上のビデオで紹介しているのは、背景画像の設定されていないシェイプを一気に更新する方法です。

背景に配置したい画像を選んだら、ドラッグして、リピートグリッド内のシェイプの上でドロップします。すると、すべてのシェイプに背景画像を配置されます。

#adobexd #protip If you’ve already dragged in an image, you can begin to create a series by dragging a second image in. In this case, we have a 1-2-1-2 series. @adobexd pic.twitter.com/lX272b4Gyd

— Elaine Chao (@elainecchao) December 18, 2018

シェイプの背景画像がすでに配置されている状態では、画像をドロップした時の動作が変わります。例えば、上のビデオのように、もう一つの画像を2番目の要素の上でドロップすると、背景画像が交互に現れる状態になります。

上のビデオでは、画像が 1-2-1-2 と表示された状態になっていますが、さらに４番目の要素に別の画像をドラッグして 1-2-1-3 のようなより複雑なパターンを作ることもできます。

Tip 2. 複数の画像をまとめて背景に配置する

#adobexd #protip Drag in a set of images to have them populate in order (left to right, top to bottom). @adobexd pic.twitter.com/6pWvC4hGzF

— Elaine Chao (@elainecchao) December 19, 2018

一度にひとつではなく、複数の画像をまとめてドラッグ&ドロップして背景画像を設定することが可能です。その場合、ドラッグした画像は、画像の名前の順に、リピートグリッドの左上から右下に順番に配置されます。上のビデオでその様子を確認できます。

Tip 3. 背景画像の表示位置を調整する

#adobexd #protip If you have images of different sizes and orientations, you can create an override in the auto mask in repeat grid double clicking inside the mask and moving the object around. These overrides won’t affect the other elements. @adobexd pic.twitter.com/byCIoLPdF2

— Elaine Chao (@elainecchao) December 20, 2018

ドラッグした画像は、位置と大きさが自動的に調整された状態で表示されます。画像の見た目を自分で調整したい場合は、画像をダブルクリックして選択すると、位置や大きさを変更できるようになります。

上のビデオで分かるように、同じ画像が使われているセルにはすべて、変更が適用されます。別の画像が使われているセルには影響しません。

Tip 4. テキストをまとめて配置する

#adobexd #protip Drag a plain return-separated text file (note for Win users: save as UTF-8) into a repeat grid’s text field to populate it sequentially. @adobexd pic.twitter.com/GDcOvlabe0

— Elaine Chao (@elainecchao) January 7, 2019

画像と同じように、テキストフィールドに対して、テキストをまとめて配置することも可能です。文字列を改行で区切ったテキストファイルを作成し、それをリピートグリッド内のテキストフィールドにドロップすると、上の行から順に、各セルのテキストフィールドにテキストが設定されます。

Windows環境で行う場合は、テキストをUTF-8として保存する必要があります。

#adobexd #protip If you’re using area text for your labels in repeat grid, make sure your object is center aligned to keep your text centered in your card. @adobexd pic.twitter.com/ISQtEAwVZX

— Elaine Chao (@elainecchao) November 14, 2017

テキストがフィールド内に収まらない場合や配置が不適切な場合は、テキストフィールドをダブルクリックして、文字サイズやテキストの配置を選択して、まとめてみた目を調整します。

いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？

次回をお楽しみに！