XD

【Adobe XD】リピートグリッドの使い方を初心者向けに徹底解説!

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

 

リピートグリッドとは?

デザインの過程で「繰り返す要素」自動的に生成する機能です。

 

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

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

リピートグリッド

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

 

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

ご覧の通り、リピートグリッドはうまく活用することで作業効率が格段にUPします。

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

 

Adobe XDの全体像を知りたい方は、こちらの記事一覧をご覧下さい!

目次

リピートグリッドの準備リピートグリッドの使い方配置画像の順番配置画像の差し替え
リピートグリッドの編集テキストを個別に編集オブジェクトの一括編集オブジェクトの並べ替え



 📖目次に戻る

リピートグリッドの準備

今回は、リピートグリッドを使用して、オブジェクトを横3列× 縦2列の計6つにコピーします。

それぞれのオブジェクトに料理の「画像」と料理名の「テキスト」を表示させるので、6枚の「画像」「テキストデータ」を用意します。

リピートグリッドで用意するもの

 

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

拡張子は「.txt」、エンコード方式は「UTF-8」のものを用意するよ

画像とテキストが用意できたら、次の項から以下の手順でリピートグリッドの使い方の説明をします。

リピートグリッドの作成手順

 

自分でデザインするときは、「画像」と「テキスト」は繰り返す数だけ用意してね

 📖目次に戻る

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

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

 

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

対象のオブジェクトを選択した状態で、右サイドバーの「リピートグリッド」ボタンをクリックします。

ショートカットキー

  • macのショートカットキー の場合は、⌘ + R
  • windowsのショートカットキー の場合は、Ctrl + R

オブジェクトを囲んでいた枠の色が「」から「」に変化し、下側右側「ハンドル」が表示されればOKです。

注意ポイント

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

  • 右クリック + 「グリッドをグループ解除」を選択

ショートカットキー

  • 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. オブジェクトの「形状」「大きさ」「位置」「色」などを変更

オブジェクトの編集

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

 

注意ポイント

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

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

 

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

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

 📖目次に戻る

オブジェクトの並べ替え

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

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

オブジェクトの入れ替え

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

 

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

 📖目次に戻る

最後に

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

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

Adobe XD

XDの基本的な使い方を、オリジナルのスマホサイトをもとに解説しているよ!!  

続きを見る

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



-XD