Adobe XDをもっと使いこなすヒント! 第58回 スクロールグループを使って表現力アップ

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、スクロールグループの使い方に関連する6つのツイートを紹介します。

Tip 1. スクロールグループを作成する

スクロールグループは、画面内の一部の領域だけスクロールできるプロトタイプを作成できる機能です。リストボックスやマップなどの動きを表現するのに便利です。

スクロールグループを作成するには、デザインモードで複数のオブジェクトを選択して、プロパティインスペクタの3種類のスクロールグループのアイコンからひとつをクリックします。水平方向のスクロールを選択すると、プレビューウインドウでグループを横にスクロールできます。

Tip 2. スクロールする方向と表示領域を指定する

垂直方向のスクロールを選択すると、グループの上下にハンドルが表示されます。ハンドルを上下に移動すると、グループを表示するビューポートの大きさを調整できます。表示されるハンドルの位置は、選択したスクロールの方向に応じて変わります。

水平方向と垂直方向のスクロールを選択すると、自由にグループをドラッグできるようになります。ハンドルは上下左右に表示されます。マップなどの表示に最適なスクロールグループです。

Tip 3. デフォルトの表示位置を指定する

デザインモードで指定したビューポート内のグループの位置が、プレビューウインドウを起動した時に表示されるデフォルトの位置指定になります。

Tip 4. スクロールグループを編集する

通常のグループと同様にスクロールグループも編集が可能です。ダブルクリックして編集モードに入ると、グループ内の要素を自由に移動することができます。

もちろん、グループに新しいオブジェクトを追加することもできます。追加されたオブジェクトは他のオブジェクトと一緒に、スクロール操作に合わせて移動します。


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

次回をお楽しみに!

POSTED ON 2020.11.12