XDでスワイプでスクロールするブロックを作成する方法

Creative

今回はXDを使ってスワイプする事でスクロールするブロック(スワイプジェスチャー)を作成する方法を紹介します。
最近、流行の横スクロールのタブメニューやカルーセルスライダーの動きなどのUI/UXの作成に使えます。

今回は説明様に簡単なパーツの紹介に留めますが、応用をすれば様々なデザインを作成できる様になるかと思いますので、是非参考にしてみて下さい。

XDでスワイプでスクロールするブロックを作成する方法

①まずはスクロールブロックとなる要素を整列させて並べます。

②並べた要素を全てグループ化します。ショートカットコマンド「Command+G」

③グループ化した要素を選択して右側のプロパティインスペクターにある下記のアイコンをクリックします。水平方向か垂直方向かどちらものパターンがあります。
(スワイプジェスチャー)

④デフォルト時に表示したい範囲をスワイプインタラクションのレイヤーの中に入れます。そこにある要素は非表示となりスワイプする事で表示されます。
右上のデスクトップレビューを押すと下記の様にスクロールを確認出来ます。


以上が「XDでスワイプでスクロールするブロックを作成する方法」でした。

2020年7月2日CreativeReference,Software,XD

Posted by KT