【AdobeXD】要素の繰り返しの配置が簡単にできるリピートグリッドの使い方

WEBサイトのデザインをしていると、要素を繰り返して配置する事はよくありますが、AdobeXDなら、リピートグリッドを使う事で、簡単に配置が可能です。

今回は、AdobeXDで要素の繰り返しの配置が簡単にできるリピートグリッドの使い方をご紹介いたします！

関連記事：XDでボタンをマウスオーバーした時にアニメーションをつける方法

まずはAdobeXDを立ち上げて要素を作成

まずはAdobeXDを立ち上げて、要素の作成を行います。

今回はカードタイプの要素を作成していきます。
以下のような要素を作成します。

作成した要素を選択して、以下のボタンをクリックします。

リピートグリッドボタンをクリックすると、選択した要素が緑の点線で囲われます。

そして、右側と下側の端をドラッグすると、要素が繰り返しで配置されます。
まずは以下の画像の右側にある赤枠の部分を右にドラッグをして要素を3つ並びにしていきます。

左右と上下の余白の調整も可能

上記で要素の配置は完了ですが、リピートグリッドでは要素間の左右上下の余白の調整も可能です。

要素の左右上下の間にカーソルを合わせて余白を調整

上記の画像のように余白の調整は要素と要素の間にカーソルを合わせると、ピンク色の余白部分が表示されますので、ドラッグで余白を調整します。

デフォルトでは20pxで余白が設けられていますが、右にドラッグすると余白の幅が広くなり、左にドラッグすると、余白の幅が狭くなります。

以上で要素を繰り返して配置するリピートグリッドでカードタイプのリストの完成です。

まとめ

要素を繰り返して配置するリピートグリッドの使い方をご紹介いたしましたが、いかがだったでしょうか？

場合によっては要素をコピペして使うよりも効率的に配置する事が可能ですので、ご興味のある方は是非使ってみてください。