XDでホバー・クリック時のデザインを作成してみよう！（後編） - 名古屋でホームページ制作、ECサイト制作なら花のや名古屋のホームページ制作、web制作会社 花のや

前編ではボタンのホバーデザインビューの3つの作り方をご紹介しました。

今回はホバー+クリック時のデザインビューを作成してみます。

こちらの04と05番です。

少し複雑そうですが、どのように作成するのでしょうか？

01 ON OFF切り替えボタン

1. 01のデザインができたら、すべてを選択してコンポーネントにします。
2. 新しくホバーステート1つと更に新規ステートを2つの合計3つステートを追加します。
   
3. ホバーステートは上図のように「02 ホバーステート」に
   新規ステート1つ目は「03」に
   新規ステート2つ目は「04 03のホバーステート」に名前を変更しておきます。
4. 今までデザイン画面になっていましたが、プロトタイプの画面に切り替えて、
   
   「02 ホバーステート」が選択されている状態でインタラクションの+ボタンを押します。
   
   上図のように設定します。
5. 次に「03」が選択されている状態でインタラクションの+ボタンを押します。
   
   上図のように設定します。
6. 最後に「04 03のホバーステート」が選択されている状態でインタラクションの+ボタンを押します。
   
   上図のように設定します。
7. 初期設定のステートに戻して終了！

05 スライダー

1. 【準備】スライダー画像と同じサイズのマスク用のオブジェクトを作成し、
   マスク用のオブジェクトが1番上になるように01と02を重ねます。
   ※この時スライダーごとにグループ化しておくと後から編集しやすいです。
   　後からクリックしたときの設定を行うために矢印のボタンデザインもグループ化しておきましょう。
2. 【準備】全てのオブジェクトを選択した状態で、
   右クリック「シェイプでマスク」を選択しマスクをかけます。
3. すべてを選択してコンポーネントにします。
4. 新規ステートを2つ追加します。
   「ステート2」「ステート3」とします。
5. 「ステート2」「ステート3」のデザインを下の図のようにそれぞれ変更します。（移動させます）
   
6. プロトタイプ設定に画面を切り替えて、
   
   「初期設定のステート」が選択されている状態で
   ボタンデザイン部分を選択してインタラクションの+ボタンを押します。
   
   上図のように設定します。
7. 「ステート2」「ステート3」も同様にインタラクションを設定します。
   

   

8. 初期設定のステートに戻して終了！

前編後編に分けて5つのホバー・クリック時のデザインビューの
作成方法をご紹介しました。

コーディング着手前にXDで動きを再現できるのはうれしいですね！
今後もどんどんXDを活用していきたいと思います！