XDの便利機能①-リピートグリッド

リピートグリッドを使ってみよう

　XDを使う最大のメリットではないか？と思えるほど、とても便利な機能です。

　例えば、次のようなデザインを描きたいとします。

このデザインは、丸い写真とタイトル、抜粋が１つのセットで、３つ繰り返すデザインです。

Web のデザインをする時は「同じデザインを繰り返す」ということをよく行います。
例えば、次のようなナビゲーションもその一つ。

このような繰り返しのデザインをする場合、XDのリピートグリッドという機能を使うと、とっても簡単に作成することができます！！

繰り返しを行いたい１パーツを作成する

まずは、次のような繰り返しを行いたい１つのパーツを作成します。

これは、通常のXDの長方形ツールやテキストツールなどを使って作成します。
完成したら、すべて選択してグループ化しておきましょう。

リピートグリッドを使ってコピーをする

では、ここからがXDのリピートグリッドの機能のお話です。
グループ化したパーツを選択して、右側のパネルからリピートグリッドを選択します。

リピートグリッドが適用されると、緑色のバンディングボックスが表示されます。
そして、この緑色のバウンディングボックスを下に伸ばしてみましょう。

下に、下に・・・。

おぉ！！
内容が繰り返されて出てくる！！

全部で３つになるまで、伸ばしましょう。

とても簡単にコピーすることができました。

余白を調整する

リピートグリッドの機能を使うと、パーツ同士の余白もとても簡単に調整できます。
まず、パーツの間にカーソルを合わせましょう。
ピンク色の領域が表示されます。

そしてこのピンク色の領域を、狭くしたり広げたりしてみてください。
他のパーツ間も同じ間隔に調整されます。

しかも左側に余白のピクセル数が表示されている！！
要素を10ピクセル空けて配置する、なんてことも簡単にできてしまいます。

もちろん、今回は縦に繰り返しましたが、横にも同様に繰り返し可能です。

デザインを変更する

リピートグリッドは、一つのパーツのデザインを変更すると、すべてが同様に変更されます。
例えば、タイトルの文字の色を変更してみましょう。

塗りを変更すると、他のパーツの見出しも同様に変わります。

色だけではなく、フォントの種類やサイズ、行間なども変更することが可能です。

なお、デザインは一括で変更することができますが、文字を入力しなおしても他には影響しません。

このように、XDはかゆいところに手が届くような機能になっています。

初めて知った時は、とても画期的な機能だなぁと感動しました。
ぜひ皆さんも使ってみてください。