Adobe XDをもっと使いこなすヒント! 第26回 リピートグリッドを使って簡単レイアウト

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、リピートグリッドを使ってレイアウトを作成する手順に関連する8つのツイートを取り上げます。

Tip 1. オブジェクト(のグループ)からリピートグリッドを作成する

リピートグリッドを作成するには、オブジェクト(またはオブジェクトのグループ)を選択し、プロパティインスペクタ内のリピートグリッドボタンをクリックします。するとオブジェクト周囲の線が緑色に変化して、右と下にハンドルが表示されます。

この状態では、ハンドルを縦方向や横方向にドラッグするとセルが展開され、オブジェクトのコピーをオリジナルの周囲に配置することができます。

Tip 2. オブジェクト間のパディングを調整する

リピートグリッドを展開した時、各セルの周囲にはデフォルトで空白の領域がつくられます。このすきまの幅を調整したいときは、カーソルを空白領域の上に移動して、下の領域がピンク色に変わったらドラッグします。縦方向のパディングと横方向のパディングは、それぞれ個別に調整します。

パディングの値はマイナスにすることもできます。

Tip 3. リピートグリッド内のオブジェクトの大きさを調整する

すきまを調整するのではなく、オブジェクトの大きさを変えて全体のバランスを調整することもできます。

まず、グリッド内の要素をどれかダブルクリックします(もしくは Cmd+クリック (Mac) / Ctrl+クリック (Win) のようにキー操作と組み合わせる)。すると、要素を編集可能な状態になり、ドラッグして大きさを変更することができます。

編集が終わったら、他の場所をクリックするかEscキーを押下します。

Tip 4. オブジェクト内に別のオブジェクトを配置する

リピートグリッドで配置したオブジェクトの中に、別のオブジェクトを追加したい場合は、追加したいオブジェクトをコピーしておいて、上のTipsの要領でリピートグリッドを編集モードにしてから、ペーストします。どれかひとつのセルのオブジェクトにペーストすると、すべてのセルのオブジェクトに反映されます。

Tip 5. レスポンシブリサイズと組み合わせて使う

異なる画面サイズに合わせてデザインを調整する必要がある場合は、リピートグリッドとレスポンシブリサイズの組み合わせが便利です。リピートグリッド内のセルをダブルクリックして編集モードに移行したら、Cmd+A (Mac) またはCtrl+A (Win) ですべてを選択してから、ドラッグしてリサイズします。プロパティインスペクタのレスポンシブリサイズがチェックされているか確認することを忘れずに。

横幅が狭いモバイル画面などで、縦方向の配置は要素ごと個別に調整したい場合には、リピートグリッドを選択してグループ解除すると、要素ごとに編集できるようになります。

Tip 6. シェイプを配置して模様を作る

リピートグリッドを使ってシェイプを配置すると、繰り返しパターンを簡単に作成できます。上のビデオのように、模様をつくりたいときにもリピートグリッドは便利です。

リピートグリッドをマスクすることができるため、矩形以外の形が欲しい時でも利用できます。上のビデオは、円形のマスクを使った例です。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2019.02.7

Products Featured

  • Adobe XD

Tags

タグはありません