こんにちは、つい最近Adobe製品の大型アップデートが行われましたね。
Adobe XDもその際に、ホバーアクションの機能が追加されました。
これで新たな動きを加えることが出来ます。Adobe XDも使いやすくなり嬉しい限りです。
今回はこのようなシンプルなドロップダウンメニューを作って行きたいと思います。
さっそく作っていきましょう。
ドロップダウンメニューの作り方
まずはメニューが下に降りてきた状態を作成します。
つまりはメニューの完成形ですね。同じような形を作りたい方は、
長方形を２つ作り、角を５丸くして、シャドウをX０ Y１０ B２０
残りのタイプとペンツールで矢印を作るだけです。
ここからGIFを使って説明していきます。簡単なので心配いりません。
全体をコンポーネント化
コンポーネントタブで、ホバーステートの追加
ドロップダウンを小さくする
メニューの文字を小さくする理由は、動きを少し自然にすることが出来ます。
初期ステートはドロップダウンが見えない状態、ホバーステートは見える状態にしたいので、
初期ステートだけ編集していくイメージです。
コンポーネント化しているので、ホバーステートも同時に編集されてしましますが、
次のように、ホバーステートを選択して更に修正をしていけば、問題は有りません。
ホバーステートの編集
ドロップダウンを元の形に修正
各ステートの確認
最後に各ステートを確認して、右上のプレヴューボタンで試してみましょう。
これで完成です。
とても簡単でしたね。もう出来てしまいました。
ですが、
この状態でも十分いいと思いますが、ボタンの少し下もホバーの判定範囲になっているので、
もう少しだけ手間を掛けていきます。
ドロップダウンをボタンの後ろに隠す
これでボタンの上だけホバーが作動します。
少しだけアクションが変わってしますが、後はうまくご自身で調整してみてください。
あとホバーしてもうまく行かない場合は、一度プロトタイプでのホバーの設定を確認してみてください。
ホバー アクション 自動アニメーションになってればうまく動くと思います。
今回のドロップダウンメニューのイージングは イーズアウト ですが、
色々変えてみて動きを試してみてください。
これからもホバーの便利な使い方があれば、ご紹介したいと思います。
他にもAdobe XDのチュートリアルを載せているのでチェックしていってください。
ではまた！
Adobe XD おすすめの本
リンク
僕はスキルシェアでAdobe XDやIllustratorを学びました。
今だけ２ヶ月無料でのお試しもありますよ！
Udemyも動画をダウンロードしていつでも学ぶことが出来るのでおすすめですよ！
