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

Adobe XDをもっと使いこなすヒント！

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

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

#AdobeXD #ProTip Quickly create a scroll group by selecting a set of objects and clicking the scroll group icon in the property inspector in Design mode. Horizontal scroll will lock you into side-by-side scroll. @AdobeXD pic.twitter.com/yKbDsZuaWr

— Elaine Chao (@elainecchao) September 23, 2020

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

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

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

#AdobeXD #ProTip Set a selection or a group to vertical scroll to activate handles on top and bottom of a group. Adjust the viewport to set the size of the object on the artboard, and your scroll group will be locked in the direction you choose. @AdobeXD pic.twitter.com/Pc6gOKHfVK

— Elaine Chao (@elainecchao) September 23, 2020

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

#AdobeXD #ProTip Setting a scroll group to both horizontal and vertical will ensure that you have a “free” scroll, which is particularly useful for interactions with maps. @AdobeXD pic.twitter.com/vanDPqKedV

— Elaine Chao (@elainecchao) September 24, 2020

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

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

#AdobeXD #ProTip The location of your inner objects in your scroll group at design time will be the default when your artboard is previewed. @AdobeXD pic.twitter.com/Y7GLoWTNJm

— Elaine Chao (@elainecchao) September 25, 2020

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

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

#AdobeXD #ProTip Scroll groups, like any other group, is non-destructive. Double click into edit context to move things around for your default position for your content. @AdobeXD pic.twitter.com/yEu9FecO9b

— Elaine Chao (@elainecchao) September 28, 2020

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

#AdobeXD #ProTip As with any other group, double click to enter the edit context of your scroll group to either draw or paste something into the group. Objects in that context will then scroll with the rest of your content. @AdobeXD pic.twitter.com/iqFG6Br9FY

— Elaine Chao (@elainecchao) September 29, 2020

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

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