今回は、Adobe XDを使ってスクロール可能な多項目あるドロップダウンリスト（プルダウンメニュー）を作成する方法を紹介します。
今回は、コンポーネントの機能を使い実際にドロップダウンリストが出現するユーザーアクションを表現します。この機能を使いこなせば、一枚の絵としてのワイヤーフレームだけではなく、実際にユーザーがアクションを起こした際の見え方も表現する事ができる様になります。一つレベルの上がった指示が出せる様になるので、WEB制作やアプリ製作者は覚えておきましょう。
XDでドロップダウンリストを表現・作成する方法
①まずはデザインを作成します。この際に要素がはみ出ていても構いません。
②右側のプロパティインスペクターにある下記写真の部分のボタンを押すとスクロールブロックを作成できます。
はみ出したテキストブロックを選択した状態でスクロールブロック化します。
③「都道府県」のテキストと、それが入っているボックスと先程のスクロールブロックを全て選択してグループ化します。
その後に「都道府県」のテキストと、それが入っているボックスに対してコンポーネント（マスター）で新規ステートを追加します。
④初期設定のステートの状態にして、スクロールブロックを非表示にします。
非表示の仕方は左側のツールバーの目のマークを押せば表示非表示を選択できます。
これで完成です。
実際の動きは、XDの画面右上にある▶︎マークを押すと確認できます。
今回作成したドロップダウンリストをプレビューすると以下の様になります。
以上が「【超簡単】XDでドロップダウンリスト作成する方法」
