同じレイアウトで繰り返しエレメントを作るときに便利なリピートグリッドですが、画像パーツを作る時にも役立ちます。
今回はリピートグリッドの基本と、画像マスクの特徴をご紹介します。

リピートグリットの基本

通常はベースとなるフォーマットを作成し、コピー・ペーストで増やしていくかと思います。
Adobe XDのリピートグリットは、このコピー・ペーストをする手間が省けるうえに、調整したいときも親要素を調整すると全てのエレメントに反映できる便利な機能です。

リピートグリッドの基本を動画にしてみました。

使い方は、ベースのフォーマットを作成し、画面右の「リピートグリッド」ボタンをクリック。
フォーマットに緑色のラインが表示されるので、ドラッグで増やしていきます。

リピートグリッドで作成したエレメントに、Finder（Windowsの場合はExplorer）のウィンドウからテキストファイル（.txt）や複数の写真をドラッグ&ドロップすると、文字を打ち直したり、コピー＆ペーストする時間が短縮できます。

マスクで差し替える画像を同じ位置に配置する

Adobe XDの画像マスクは、画像をシェイプにドラッグ＆ドロップする方法と、画像の上にシェイプでマスクをかける方法の2種類があります。

2種類のマスクの違いを動画にしてみました。

ドラッグ＆ドロップでかけるマスクは、シェイプに対して画像の縦幅（もしくは横幅いっぱい）に画像が配置されます。
画像を差し替えなおすと画像の幅いっぱいの状態に戻ってしまいます。
この状態から再度調整するのは時間がかかってしまいますね…

逆にシェイプでマスクをかけると、画像を差し替えても同じ位置・大きさでマスクがかかります。
メンバー紹介など、被写体の大きさを揃える必要がある場合はシェイプでかけるマスクが便利です。

いかがでしょうか？
Adobe XDは、作成するパーツに合わせてマスクを使い分けることで短時間で画像パーツを作ることができます。
パーツ作成でピンチな時に役立ててください。