XD

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

 

リピートグリッドとは、デザインの過程で「繰り返す要素」を自動的に生成する機能です。

 

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

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

リピートグリッド

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

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

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

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

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

 

この記事では

リピートグリッドの使い方機能について、gif動画やイラストを交えながらやさしく解説します。

 

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

目次

リピートグリッドの準備リピートグリッドの使い方リピートグリッドの編集テキストの一部編集オブジェクトの編集オブジェクトの並べ替え

 📖目次に戻る

リピートグリッドの準備

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

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

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

 

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

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

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

 

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

 📖目次に戻る

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

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

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

 

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

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

  • 右サイドバーの「リピートグリッド」ボタンをクリック
  • macのショートカットキー の場合は、⌘ + R
  • windowsのショートカットキー の場合は、Ctrl + R

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

注意ポイント

リピートグリッドを解除したい場合は、以下のいずれかの方法で行います。

  • 右クリック + 「グリッドをグループ解除」をクリック
  • macのショートカットキー の場合は、⌘ + shift + G
  • windowsのショートカットキー の場合は、Ctrl + shift + G

 

step
2
ハンドルをグリッド

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

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

ハンドルをドラッグ

step
3
間隔の調整

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

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

オブジェクトの間隔を調整

 

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

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

画像とテキストを配置

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

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

 

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

注意ポイント

画像を配置する際は、画像とテキストの内容が違ってしまわないように、事前に番号を振るなどして並べ順を調整しておくと良いでしょう。

 

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

 📖目次に戻る

リピートグリッドの編集

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

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

 📖目次に戻る

テキストの一部編集

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

  1. mac の場合は ⌘command windows の場合は ctrl を )を押しながらテキストオブジェクトをクリック
  2.  さらにダブルクリック
  3.  テキストの編集

リピートグリッド内のテキストの編集

注意ポイント

テキストの「書体」や「カラー」などのスタイルを変えた場合は、リピートグリッド全体に反映されます。 

 📖目次に戻る

オブジェクトの編集

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

  1. mac の場合は ⌘command windows の場合は ctrl を )を押しながら任意のオブジェクトをクリック
  2.  オブジェクトの「形状」「大きさ」「位置」「色」などを変更

オブジェクトの編集

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

 

注意ポイント

特定のオブジェクトを編集したい場合は、オブジェクトをコンポーネント化する必要があります。

※コンポーネント化すると一括編集できなくなります。

 

コンポーネントについては下の記事で詳しく解説してるよ。
コンポーネント
【Adobe XD】要素を部品化!コンポーネントの使い方を初心者向けに徹底解説!

  コンポーネントとは、デザインカンプの作成の過程で「繰り返し使用する部品」のことです。   ボタンやヘッダーなどの何度も登場する共通した「部品」などをコンポーネントとしてアセット ...

 📖目次に戻る

オブジェクトの並べ替え

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

  1.  リピートグリッドを解除
  2.  そのままグループ化
  3.  右サイドバーのスタックをチェック
  4. 任意のオブジェクトをダブルクリック
  5. オブジェクトを入れ替える

オブジェクトの入れ替え

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

 

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

 📖目次に戻る

最後に

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

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

Adobe XD

 

続きを見る

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

-XD