XDの便利機能①-リピートグリッド
リピートグリッドを使ってみよう
XDを使う最大のメリットではないか?と思えるほど、とても便利な機能です。
例えば、次のようなデザインを描きたいとします。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid01_1.jpg)
このデザインは、丸い写真とタイトル、抜粋が1つのセットで、3つ繰り返すデザインです。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid01.jpg)
Web のデザインをする時は「同じデザインを繰り返す」ということをよく行います。
例えば、次のようなナビゲーションもその一つ。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid02.jpg)
このような繰り返しのデザインをする場合、XDのリピートグリッドという機能を使うと、とっても簡単に作成することができます!!
繰り返しを行いたい1パーツを作成する
まずは、次のような繰り返しを行いたい1つのパーツを作成します。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid03.jpg)
これは、通常のXDの長方形ツールやテキストツールなどを使って作成します。
完成したら、すべて選択してグループ化しておきましょう。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid04.jpg)
リピートグリッドを使ってコピーをする
では、ここからがXDのリピートグリッドの機能のお話です。
グループ化したパーツを選択して、右側のパネルからリピートグリッドを選択します。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid05.jpg)
リピートグリッドが適用されると、緑色のバンディングボックスが表示されます。
そして、この緑色のバウンディングボックスを下に伸ばしてみましょう。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid06.jpg)
下に、下に・・・。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid07.jpg)
おぉ!!
内容が繰り返されて出てくる!!
全部で3つになるまで、伸ばしましょう。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid08.jpg)
とても簡単にコピーすることができました。
余白を調整する
リピートグリッドの機能を使うと、パーツ同士の余白もとても簡単に調整できます。
まず、パーツの間にカーソルを合わせましょう。
ピンク色の領域が表示されます。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid09.jpg)
そしてこのピンク色の領域を、狭くしたり広げたりしてみてください。
他のパーツ間も同じ間隔に調整されます。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid10.jpg)
しかも左側に余白のピクセル数が表示されている!!
要素を10ピクセル空けて配置する、なんてことも簡単にできてしまいます。
もちろん、今回は縦に繰り返しましたが、横にも同様に繰り返し可能です。
デザインを変更する
リピートグリッドは、一つのパーツのデザインを変更すると、すべてが同様に変更されます。
例えば、タイトルの文字の色を変更してみましょう。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid11.jpg)
塗りを変更すると、他のパーツの見出しも同様に変わります。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid12.jpg)
色だけではなく、フォントの種類やサイズ、行間なども変更することが可能です。
なお、デザインは一括で変更することができますが、文字を入力しなおしても他には影響しません。
![](https://sasano-ha.com/wp-content/uploads/2020/04/repeat_grid13.jpg)
このように、XDはかゆいところに手が届くような機能になっています。
初めて知った時は、とても画期的な機能だなぁと感動しました。
ぜひ皆さんも使ってみてください。