リピートグリッドを使って、Adobe XD で繰り返しエレメントを作成する方法を説明します。

多くの場合、Web アプリまたはモバイルアプリのデザイン中に繰り返しエレメントまたはコンテンツリストを定義する必要があります。ただし、これらのエレメントの作成や、デザイン変更時の更新には、時間がかかることがあります。

リピートグリッド機能では、エレメントのグループが繰り返しエレメントに変更されます。エレメントをいずれかの方向に引っ張ると、グリッドが繰り返されます。エレメントのスタイルを変更すると、その変更はグリッドのすべてのエレメントに複製されます。例えば、いずれかのエレメントの画像サイズを変更すると、グリッド内のすべての画像が自動的にサイズ変更されます。

グリッドにテキストエレメントがある場合は、そのスタイルのみが複製され、コンテンツは複製されません。そのため、グリッドエレメントのコンテンツは異なったまま、テキストエレメントを素早くスタイル設定できます。

グリッドにテキストファイルをドラッグすれば、リピートグリッドのプレースホルダーテキストを置換できます。

リピートグリッドの作成

基本的に、リピートグリッドは特殊なグループです。オブジェクトまたはオブジェクトのグループを選択してリピートグリッドに変換することにより、リピートグリッドを作成できます。

  1. 繰り返す基本エレメントをデザインします。例えば、画像のサムネイルとテキストの組み合わせをデザインします。

  2. 繰り返すエレメントを選択します。

  3. プロパティインスペクターでボタンをクリックするか、ショートカットキーの Command+R キー(Mac)または Ctrl+R キー(Windows)を使用して、選択範囲をリピートグリッドに変換します。

    エレメントの境界線に大きなハンドルが表示されます。

    エレメントまたはエレメントのグループを繰り返すためのハンドル
    エレメントまたはエレメントのグループを繰り返すためのハンドル
  4. 垂直方向のグリッドでエレメントを繰り返すには、エレメントの下部にあるハンドルをドラッグします。水平方向のグリッドでエレメントを繰り返すには、エレメントの右側にあるハンドルをドラッグします。

    繰り返しエレメントを含む水平方向のグリッド
    繰り返しエレメントを含む水平方向のグリッド
    繰り返しエレメントを含む垂直方向のグリッド
    繰り返しエレメントを含む垂直方向のグリッド
  5. 編集するグリッドのエレメントを選択するには、グリッドをダブルクリックします。

グリッドエレメントをグループ解除して個々に操作するには、グリッドを選択し、プロパティインスペクターで「グリッドをグループ解除」をクリックします。

グループ内をダブルクリックすると、リピートグリッドの構成要素にアクセスできます。

変更が完了したら、Esc キーを押して編集コンテキストの変更を終了します。

注意:

レイヤーパネルでエレメントにドリルダウンするか、エレメントを直接選択することでも構成要素にアクセスできます。

リピートグリッドの 2 つのエレメントの間隔を調整する

グリッドの 2 つのエレメントの間隔を調整するには、エレメント間の隙間にポインターを置きます。カーソルが二重矢印に変わったら、ドラッグして間隔を増減します。

繰り返しエレメントを含む垂直方向のグリッド
繰り返しエレメントを含む垂直方向のグリッド

リピートグリッド内のテキストを操作する

リピートグリッド内のテキストを複数の方法で使用できます。リピートグリッド内のテキストオブジェクトの個別のインスタンスを更新することも、リピートグリッドにあらかじめ入力されている .txt ドキュメントをドラッグし、テキストファイルの内容をリピートグリッド内のテキストオブジェクトに自動的に入力することもできます。 

リピートグリッド内の個々のテキストエレメントを更新する

  1. Command キー(Mac)または Ctrl キー(Windows)を押しながら、リピートグリッド内のテキストオブジェクトをクリックして選択します。 

  2. テキストエレメントを編集するには、テキストエレメントをダブルクリックしてテキストを変更します。

注意:

変更内容はリピートグリッド内の他のテキストオブジェクトには適用されませんが、テキストオブジェクトに適用されているスタイルはすべてのテキストオブジェクトに適用されます。

リピートグリッド内のテキストオブジェクトに改行区切りのテキストファイルをドラッグする

グリッドにテキストファイルをドラッグすれば、リピートグリッドのプレースホルダーテキストを置換できます。

  1. 拡張子が .txt のテキストファイルを作成します。テキストファイルの作成には、Mac の TextEdit や Windows のメモ帳(.txt 形式で保存)、または他の任意のテキストエディターを使用します。データの行を改行で区切ります。

  2. リピートグリッドにテキストファイルをドラッグします。

    リピートグリッド内のオブジェクトにテキストファイルをドラッグする
    リピートグリッド内のオブジェクトにテキストファイルをドラッグする

    リピートグリッドは、テキストファイルと同じテキストのシーケンスでデータが設定されます。ファイル内のテキストの行数よりグリッド数が多い場合は、シーケンスが繰り返されます。

リピートグリッド内の画像を操作する

画像を使って、定義したパターンでオブジェクトの画像の塗りを繰り返し、オブジェクトの繰り返しのパターンを作成できます。

画像の塗りのパターンを作成するには、画像を 1 つずつオブジェクトにドラッグすることも、複数の画像を選択してリピートグリッド上のオブジェクトにドラッグすることもできます。

リピートグリッド内のオブジェクトに画像ファイルをドラッグする
リピートグリッド内のオブジェクトに画像ファイルをドラッグする

リピートグリッド内の画像を置き換える

グリッドの画像を置き換えるには、Finder またはエクスプローラーを開き、プロジェクトの画像を保存した場所に移動します。グリッドに表示する画像をすべて選択して、リピートグリッド内のターゲットオブジェクトにドラッグ&ドロップします。

古い画像が新しい画像に置き換えられます。サイズは自動調整されます。

リピートグリッドを使ったインタラクションの作成

リピートグリッド全体を 1 つのインタラクションに接続する

  1. デザインモードで、アートボードツール(A)を使用してファイル内に 2 つ目のアートボードを作成します。

  2. 「プロトタイプ」タブをクリックするか、Ctrl + Tab ショートカットキーを使用して、プロトタイプモードに切り替えます。

  3. 最初のアートボードのリピートグリッドを選択します。オブジェクトの右側中央に矢印の付いたコネクタが表示されます。

  4. コネクタを次のアートボードにドラッグし、表示されるポップアップからトランジションのオプションを選択して、Esc キーを押すか、ポップアップの外側をクリックしてポップアップを閉じます。

  5. アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー(Mac)または Ctrl+Enter キー(Windows)ショートカットキーを押してプレビューを実行します。リピートグリッドの任意の箇所をクリックしてインタラクションを再生します。

リピートグリッドの 1 つのエレメントをインタラクション用に接続する

  1. リピートグリッド内のオブジェクトを選択します。

  2. 四角形の右側のコネクタをドラッグし、リンクするアートボードにドラッグします。表示されるポップアップからトランジションのオプションを選択して、Esc キーを押すか、ポップアップの外側をクリックしてポップアップを閉じます。

  3. アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー(Mac)または Ctrl+Enter キー(Windows)ショートカットキーを押してプレビューを実行します。インタラクションを検証するオブジェクトをクリックします。

リピートグリッド内にエレメントのグループを作成し、そのグループからインタラクションを作成する

リピートグリッド内にエレメントのグループを作成し、そのグループからインタラクションを作成することもできます。

  1. リピートグリッド内のオブジェクトを選択し、Shift キーを押しながら他のオブジェクトをクリックして選択範囲に追加します。

  2. オブジェクトを選択したら、右クリックしてコンテキストメニューから「グループ化」を選択します。ショートカットキーの Command+G(Mac)または Ctrl+G(Windows)を使用して、オブジェクトをグループ化することもできます。

  3. プロトタイプモードに切り替えます。グループから、リンクするアートボードにコネクタをドラッグします。

  4. アプリケーションフレームの右上隅にある再生ボタン、あるいはショートカットキーの Command+Enter キー(Mac)または Ctrl+Enter キー(Windows)ショートカットキーを押してプレビューを実行します。インタラクションを検証するグループをクリックします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー