【adobe XD】XDのリピートグリッドの使い方
iCARE開発部のアオキタカユキです
どうも皆様御機嫌いかがでしょうか？今回はXDの代名詞とも言える機能「リピートグリッド」をご紹介いたします。連続するデザインを繰り返し作成出来る機能です。初歩的な機能ですが（前にマスクをする方法など書いてますのでそちらもよろしかったら）とっても大事な機能です！
たとえば従業員リストやスライドショーをデザインする際に繰り返し同じものを表示する必要があります。いままではコピペをして作成していましたがXDではそんなことをする必要はありません。一括で作成してくれます。
今回は弊社のサービス「Carely」の従業員一覧画面を例にとってご説明いたします。
下の画像のように従業員のリストが連続して表示されています。このようなデザインを連続（人数が増えたときの表現）して作成したい場合を想定してご紹介いたします。
まずはこんなUIデザインを用意。偶数行の背景に灰色が入るパターンと奇数行の背景が白のパターンで合計2行のデザインを用意します。
1.オブジェクトを選択してリピートグリッドを設定
2行全体を選択して画面右上にある「リピートグリッド」をクリックすると、行が緑の線で囲われます。これで準備完了です。
2.オブジェクトを引っ張る
次の緑の枠上にある四角のボタンをドラッグ。連続に表示したい方向へ引っ張ります。すると最初に選択した行と同じデザインがリピートして表示されます！
3.余白の調整
リピートしているオブジェクト同士に余白がありますのでピンクの線を選択して調整してください。今回は余白無しのデザインなので「0」で設定。
4.完成
これで想定したデザインを作成することができました！
おわりです。これにて設定は完了。これで連続したデザインを一括で作成することができます。必要に応じテキストや写真を入れ替えるとなお良しですね！
XDはUIに特化したツールなのでこういう機能も用意してくれてます！なおかつ一ヶ月に一回のペースでバージョンアップをしてくれています。効率的にUIを作成してリッチにアウトプットしていきましょう！
