リピートグリッドとは？
例えば、「画像」と「テキスト」で構成された、次のようなオブジェクトを横並びにしたい場合、通常であれば１つずつコピー＆ペーストをすることが多いと思います。
しかし、リピートグリッドを使用することで、ハンドルをスライドさせて「同じデザイン」を縦や横方向に自動で生成することができます。
ご覧の通り、リピートグリッドはうまく活用することで作業効率が格段にUPします。
是非この記事を読んで使いこなせるようになって下さいね。
リピートグリッドの準備
今回は、リピートグリッドを使用して、オブジェクトを横３列× 縦２列の計６つにコピーします。
テキストデータの中身は、オブジェクトを繰り返す数だけ改行するので、６行に分けて記述します。
画像とテキストが用意できたら、次の項から以下の手順でリピートグリッドの使い方の説明をします。
リピートグリッドの使い方
ここからは、リピートグリッドの使い方についてステップごとに説明します。
step
1リピートグリッドの作成
対象のオブジェクトを選択した状態で、右サイドバーの「リピートグリッド」ボタンをクリックします。
ショートカットキー
の場合は、⌘ + R
の場合は、Ctrl + R
オブジェクトを囲んでいた枠の色が「青」から「緑」に変化し、下側と右側に「ハンドル」が表示されればOKです。
注意ポイント
- 右クリック + 「グリッドをグループ解除」を選択
ショートカットキー
- の場合は、⌘ + shift + G
- の場合は、Ctrl + shift + G
step
2ハンドルをグリッド
表示された「ハンドル」をドラッグしてオブジェクトを配置します。
今回は、オブジェクトを横に「３つ」縦に「２つ」配置します。
step
3間隔の調整
間隔を調整する場合は、カーソルをオブジェクトとオブジェクトの間に移動して行います。
余白部分が「ピンク」に変化した状態で任意の方向にドラッグすると間隔の大きさが数値で表示されます。
step
4画像とテキストの配置
一括で画像を配置する場合は、配置したオブジェクトの数だけ画像を選択した状態で、オブジェクトの任意の場所にドラッグします。
ドラッグするオブジェクトは何番目でも構いません。
簡単に画像とテキストをリピートグリッドに流し込むことができましたね。
配置画像の順番
前項の結果をご覧の通り、配置された「画像」の順番や「テキスト」の順番は、左から右方向に配置されます。
画像を配置する際は、画像とテキストの内容が異ならないよう、画像のファイル名に番号を振るなどして並べ順を調整しておくと良いでしょう。
番号を変更した後はもう一度、オブジェクトの数だけ画像やテキストを選択した状態で任意の場所にドラッグします。
配置画像の差し替え
リピートグリッドで画像を配置した後に一部だけ変更する場合は、画像を任意の場所にドラッグすることで差し替えが可能です。
リピートグリッドの編集
リピートグリッドで画像やテキストを配置した後も、一部または全体を修正したい場合があると思います。
テキストを個別に編集
テキストの個別編集は、リピートグリッドを選択した状態で以下の手順で行います。
- の場合は ⌘command （
の場合は ctrl ）を押しながらテキストオブジェクトをクリック - さらにダブルクリック
- テキストの編集
注意ポイント
オブジェクトの一括編集
オブジェクトの一括編集は、リピートグリッドを選択した状態で以下の手順で行います。
- の場合は ⌘command （ の場合は ctrl を ）を押しながら任意のオブジェクトをクリック
- オブジェクトの「形状」「大きさ」「位置」「色」などを変更
※今回は、画像の角丸とベースの色を変更しています。
注意ポイント
※コンポーネント化すると一括編集できなくなります。
-
【Adobe XD】コンポーネントの使い方を初心者向けに徹底解説！
ボタンやヘッダーなど何度も登場する共通の「部品」を、コンポーネントとして登録して使用することで、次のようなメリットがあります。 このようにコンポーネントを使用 ...
オブジェクトの並べ替え
リピートグリッド内のオブジェクトを並び替えは、リピートグリッドを選択した状態で以下の手順で行います。
- リピートグリッドを解除
- そのままグループ化
- 右サイドバーのスタックをチェック
- 任意のオブジェクトをダブルクリック
- オブジェクトを入れ替える
今回は真ん中のオブジェクトと左端のオブジェクトの位置を入れ替えてみました。
最後に
いかがでしたでしょうか、今回は「リピートグリッド」の基本的な使い方について解説しました。
リピートグリッド以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。
-
Adobe XD
続きを見る
