XDのリピートグリッドを利用した、簡単で早い背景パターンの作り方

Adobe XDで、素早く背景パターンを作る方法です。大急ぎの時に、ぜひ試してみてください！

ストライプの作り方

1. 長方形を一つ作って、それにリピートグリッドを適用します。
2. マージンを適宜調整します。

ここでのサンプルは縦ストライプですが、横でも同じ要領です。

斜めストライプの作り方

1. 長方形を一つ作ってを斜めにし、リピートグリッドを適用します。
2. マージンをマイナスに調整し、斜線の縦横をピッタリ合わせます。

※斜めストライプの場合は、コーディングの際のbackground-repeatするため画像を、ピッタリ合うように注意して書き出してくださいね。

ドット（水玉）パターンの作り方

水平垂直のドットパターン

1. 正円を一つ作り、リピートグリッドを適用します。
2. マージンを適宜調整します。

斜めのドットパターン

1. 正円を一つ作り、その直径と縦横同じ距離だけ離れた正円をもう一つ作ります。
2. それらをグループ化し、リピートグリッドを適用します。
3. 縦横のマージンも正円の直径と同じ距離にします。

ギンガムチェックパターンの作り方

1. 横：縦が1:2となる長方形を作ります。
2. それをコピーして90度回転させます。
3. 2つの長方形同士、左上をピッタリ合わせます。
4. 2つの長方形の不透明度を調整し（ここでは50%）リピートグリッドを適用します。マージンは右も下も0にしてピッタリ合わせます。

ひとこと

リピートグリッドって本当に便利ですね！