例えば、「画像」と「テキスト」で構成された、次のようなオブジェクトを横並びにしたい場合、通常であれば1つずつコピー&ペーストをすることが多いと思います。
しかし、リピートグリッドを使用することで、ハンドルをスライドさせて「同じデザイン」を縦や横方向に自動で生成することができます。

一度リピートグリッドを作成しておけば、「画像」や「テキスト」を決められた場所に流し込んだり、一部だけ修正するなんてことも可能です。
ご覧の通り、うまく活用することで作業効率が格段にUPします。
リピートグリッドは、adobeXDでデザインカンプを作成する際には欠かすことのできないツールです。
是非この記事を読んで使いこなせるようになって下さいね。
この記事では
リピートグリッドの使い方や機能について、gif動画やイラストを交えながらやさしく解説します。

リピートグリッドの準備
リピートグリッドを使用する前に、まずは繰り返し配置するオブジェクトを用意します。
必要であれば繰り返す数だけ「画像」と「テキスト」を用意します。
今回は、簡単なオブジェクトと、6枚の「画像」と「テキストデータ」を用意しました。
テキストデータの中身は、オブジェクトを繰り返す数だけ改行して記述します。
拡張子は「.txt」、エンコード方式は「UTF-8」のものを用意して下さい。
オブジェクトや画像の用意ができたら、次の項から以下の手順でリピートグリッドの使い方の説明をします。

リピートグリッドの使い方
リピートグリッドの使い方についてステップごとに説明します。
順を追って進めたい方は、是非一緒にオブジェクトを用意して進めてみて下さい。
step
1リピートグリッドの作成
リピートグリッドを使用するためには、対象のオブジェクトを選択した状態で、以下のいずれかの方法でオブジェクトをリピートグリッドに変換する必要があります。
- 右サイドバーの「リピートグリッド」ボタンをクリック
の場合は、⌘ + R
の場合は、Ctrl + R
オブジェクトを囲んでいた枠の色が「青」から「緑」に変化し、下側と右側に「ハンドル」が表示されれば、リピートグリッドの作成はひとまず完了です。
注意ポイント
- 右クリック + 「グリッドをグループ解除」をクリック
の場合は、⌘ + shift + G
の場合は、Ctrl + shift + G
step
2ハンドルをグリッド
表示された「ハンドル」をドラッグして、オブジェクトを配置します。
今回は、オブジェクトを横に「3つ」縦に「2つ」配置します。
step
3間隔の調整
間隔を調整する場合は、カーソルをオブジェクトとオブジェクトの間に移動して行います。
隙間が「ピンク」に変化するので、その状態で任意の方向にドラッグして間隔の調整を行います。
step
4画像とテキストの配置
一括で画像を配置する場合は、配置したオブジェクトの数だけ画像を選択した状態で、任意の場所にドラッグします。
簡単に画像とテキストを配置することができました。

配置された画像やテキストは、ご覧のとおり左上から順に「画像」や「テキスト」が配置されていることが分かると思います。
注意ポイント

リピートグリッドの編集
リピートグリッドで画像やテキストを配置した後も、一部だけ修正したい場合や、全体的なデザインの変更を行いたい場合があると思います。
ここでは、配置が終わった後のリピートグリッドの操作について解説します。
テキストの一部編集
一部のテキストの編集は、リピートグリッドを選択した状態で以下の手順で行います。
の場合は ⌘command (
の場合は ctrl を )を押しながらテキストオブジェクトをクリック
- さらにダブルクリック
- テキストの編集
注意ポイント
オブジェクトの編集
オブジェクトの一括編集は、リピートグリッドを選択した状態で以下の手順で行います。
の場合は ⌘command (
の場合は ctrl を )を押しながら任意のオブジェクトをクリック
- オブジェクトの「形状」「大きさ」「位置」「色」などを変更
※今回は、画像の角丸とベースの色を変更しています。
注意ポイント
※コンポーネント化すると一括編集できなくなります。

-
-
【Adobe XD】要素を部品化!コンポーネントの使い方を初心者向けに徹底解説!
コンポーネントとは、デザインカンプの作成の過程で「繰り返し使用する部品」のことです。 ボタンやヘッダーなどの何度も登場する共通した「部品」などをコンポーネントとしてアセット ...
オブジェクトの並べ替え
リピートグリッド内のオブジェクトを並び替えは、リピートグリッドを選択した状態で以下の手順で行います。
- リピートグリッドを解除
- そのままグループ化
- 右サイドバーのスタックをチェック
- 任意のオブジェクトをダブルクリック
- オブジェクトを入れ替える
今回は真ん中のオブジェクトと左端のオブジェクトの位置を入れ替えてみました。

最後に
いかがでしたでしょうか、今回は「リピートグリッド」の基本的な使い方について解説しました。
リピートグリッド以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。
-
-
Adobe XD
続きを見る
