【Adobe XD】繰り返し要素の作成！リピートグリッドの使い方を初心者向けに徹底解説！

例えば、「画像」と「テキスト」で構成された、次のようなオブジェクトを横並びにしたい場合、通常であれば１つずつコピー＆ペーストをすることが多いと思います。

しかし、リピートグリッドを使用することで、ハンドルをスライドさせて「同じデザイン」を縦や横方向に自動で生成することができます。

後で間隔の調整もできるよ。

一度リピートグリッドを作成しておけば、「画像」や「テキスト」を決められた場所に流し込んだり、一部だけ修正するなんてことも可能です。

ご覧の通り、うまく活用することで作業効率が格段にUPします。

リピートグリッドは、adobeXDでデザインカンプを作成する際には欠かすことのできないツールです。

是非この記事を読んで使いこなせるようになって下さいね。

adobe xdの全体像を知りたい方は、コチラの記事をご覧下さい！

 📖目次に戻る

リピートグリッドの準備

リピートグリッドを使用する前に、まずは繰り返し配置するオブジェクトを用意します。

必要であれば繰り返す数だけ「画像」と「テキスト」を用意します。

今回は、簡単なオブジェクトと、６枚の「画像」と「テキストデータ」を用意しました。

テキストデータの中身は、オブジェクトを繰り返す数だけ改行して記述します。

拡張子は「.txt」、エンコード方式は「UTF-8」のものを用意して下さい。

オブジェクトや画像の用意ができたら、次の項から以下の手順でリピートグリッドの使い方の説明をします。

配置する場所が増えると用意する「画像」や「テキスト」の数も増えていくよ。

 📖目次に戻る

リピートグリッドの使い方

リピートグリッドの使い方についてステップごとに説明します。

順を追って進めたい方は、是非一緒にオブジェクトを用意して進めてみて下さい。

step
1リピートグリッドの作成

リピートグリッドを使用するためには、対象のオブジェクトを選択した状態で、以下のいずれかの方法でオブジェクトをリピートグリッドに変換する必要があります。

オブジェクトを囲んでいた枠の色が「青」から「緑」に変化し、下側と右側に「ハンドル」が表示されれば、リピートグリッドの作成はひとまず完了です。

step
2ハンドルをグリッド

表示された「ハンドル」をドラッグして、オブジェクトを配置します。

今回は、オブジェクトを横に「３つ」縦に「２つ」配置します。

step
3間隔の調整

間隔を調整する場合は、カーソルをオブジェクトとオブジェクトの間に移動して行います。

隙間が「ピンク」に変化するので、その状態で任意の方向にドラッグして間隔の調整を行います。

step
4画像とテキストの配置

一括で画像を配置する場合は、配置したオブジェクトの数だけ画像を選択した状態で、任意の場所にドラッグします。

簡単に画像とテキストを配置することができました。

ちなみに画像１枚だけドラッグすると、６ヶ所全て同じ画像が配置されるよ

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

実は適当に並べても後で編集できるんだ。詳しくは次の項で説明するね。

 📖目次に戻る

リピートグリッドの編集

リピートグリッドで画像やテキストを配置した後も、一部だけ修正したい場合や、全体的なデザインの変更を行いたい場合があると思います。

ここでは、配置が終わった後のリピートグリッドの操作について解説します。

 📖目次に戻る

テキストの一部編集

一部のテキストの編集は、リピートグリッドを選択した状態で以下の手順で行います。

 📖目次に戻る

オブジェクトの編集

オブジェクトの一括編集は、リピートグリッドを選択した状態で以下の手順で行います。

※今回は、画像の角丸とベースの色を変更しています。

コンポーネントについては下の記事で詳しく解説してるよ。

 📖目次に戻る

オブジェクトの並べ替え

リピートグリッド内のオブジェクトを並び替えは、リピートグリッドを選択した状態で以下の手順で行います。

今回は真ん中のオブジェクトと左端のオブジェクトの位置を入れ替えてみました。

一度リピートグリッドを解除すると一括編集できなくなるから注意してね。

 📖目次に戻る

最後に

いかがでしたでしょうか、今回は「リピートグリッド」の基本的な使い方について解説しました。

リピートグリッド以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。

最後までお読みいただき、ありがとうございました！