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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2019.02.21

Products Featured

  • Adobe XD

Tags

タグはありません