この記事では、Adobe XDの「リピートグリッド」について紹介していきます。
このリピートグリッドという機能も、Webデザインを効率的に作成する上で欠かせない機能になります。
この記事でリピートグリッドの使い方についてマスターしていきましょう。
目次
リピートグリッド機能を使おう
それでは早速、リピートグリッドについて学んでいきましょう。
リピートグリッドとは
リピートグリッドとは、要素をグリッド状（格子状）に複製できるAdobe XDの機能です。
同じ見た目の要素が連続して並んでいるデザインはリピートグリッドを使用して作成すると、
コピペで複製するよりも速く効率的に作成することができます。
リピートグリッドの使い方
次に、リピートグリッドの使い方について学んでいきましょう。
リピートグリッドを適用する
使い方は簡単です。
リピートグリッドを適用したい要素を選択し、プロパティの上部にある「リピートグリッドのボタン」をクリックしてあげましょう。
以下のショートカットキーでも適用が可能です。
ショートカットキーWindows：Ctrl R
Mac：Command R
解除したい場合は、同じボタンをもう一度クリックします。
要素を複製する
リピートグリッドが適用された要素は、緑色の線で囲まれます。
そして、下部と右部に要素を複製されるハンドルが表示されるようになります。
複製したい方向にハンドルをドラッグすることで、リピートグリッドを使用した要素の複製ができます。
名前の通り、グリッド状（格子状）に要素が複製できていることが確認できるかと思います。
リピートグリッドの特徴
次は、リピートグリッドの特徴をおさえていきましょう。
余白を一括調整できる
リピートグリッドの便利な特徴として、リピートグリッドで作成した要素間の余白を一括で調節することができます。
これだけ多くの要素の余白を１つ１つ調節するとなると骨が折れる作業なので、ぜひ活用していきたい機能です。
画像を一括挿入できる
リピートグリッドで作成した要素に対して、画像をまとめて挿入することができます。
画像を多く表示するメディアサイトなどのデザインを作成するときには欠かせない機能です。
テキストは個別で編集する
リピートグリッド内のテキストは個別に編集することができます。
全てのテキストが書き変わらないので、メディアサイトなどの記事などのタイトルを個別に記述することが可能です。
要素の見た目は一括で編集できる
リピートグリッドで作成された要素は、スタイルを一括で編集することが可能です。
なので、大掛かりに１つ１つ変更する必要なので、ちょっとした修正も気にせず作業を続けることができます。
リピートグリッドを使って効率化しよう
ここまででAdobe XDのリピートグリッドについて紹介してきました。
Webデザインを作成する際には、見た目を統一して作成する箇所が多々あります。
そんな箇所はこのリピートグリッドを使って、簡単に作ってしまいましょう。
