XDでハンバーガーメニューを実装する方法

本記事ではAdobe XDを使って、ハンバーガーメニューを実装する方法を解説していきます。

XDで実際のWebサイトに近い見た目を作ることができれば制作もスムーズに進むのでぜひ実践していきましょう。

XDでハンバーガーメニューを実装する手順

  1. ハンバーガーアイコンを作る
  2. オープン時のメニューを作る
  3. ステートを設定する
  4. アニメーションを設定する

上記の手順で進めていきます。ではやっていこー!

手順1:ハンバーガーアイコンを作る

まずはハンバーガーアイコンを作っていきます。

完成イメージはこんな感じ。

アイコンサイトから取ってきた素材があるなら、この手順は無視してください。

ハンバーガーアイコンの作り方
  1. 線ツールで、横幅30px・線の太さ3を作る
  2. 作った線を2本複製
  3. 10pxほど間隔をあけて、配置。全て選択しグループ化しておく

アイコンを作ったらグループ化し、コンポーネントにしておきます。(次の手順で必要なので忘れずに!)

手順2:メニューを作る

完成イメージはこんな感じ。

メニューは適宜作成してください。

最後にメニューもグループ化しておきましょう。

手順3:ステートの設定

ここからが本記事の本題。ハンバーガーアイコンをクリックしたらメニューが開くようにする設定です。

ステートとは?

1つのコンポーネントに対して、複数の状態をもたせることができる機能です。

では早速やっていきましょう。

ステートの新規作成

まずは新規でステートを作成します。ハンバーガーアイコンを選択すると右サイドバーにコンポーネントというメニューがあるので右の+ボタンを押してステートを作成できます。

ステートを編集状態にし、メニューを追加

openステートを選択しておいて、編集状態にします(ハンバーガーボタンをダブルクリック)

この状態でさきほどつくったメニューをコピペして貼り付けましょう。これでメニューも含めたコンポーネントになりました。

あとはハンバーガーアイコンをXボタンになるように調整します。手順は下記の通り

Xアイコンの作り方
  1. 真ん中の線を削除
  2. 上の線を−45℃、下の線を45℃変形させ、中央寄せにする

ためしに初期状態のステートとopenステートを切り替えてみたら下記のようになります。

こうなっていればOK!

手順4:プロトタイプの設定

ここまでできたらあとはプロトタイプの設定です。まずは左上のプロトタイプをクリックして移動します。

ハンバーガーアイコンをクリックすると青い矢印が出てくるのでクリック。そうするとクリック時の飛び先を選択できます。

飛び先は、さっき作ったopenステートを選択。これで押したときにメニューが開くようになります。

次にメニューを閉じる処理です。

openステートを選択状態にし、Xアイコンをクリックして飛び先を設定します。飛び先は「初期設定のステート」。

これで完成です。

実際に動かしてみるとこんな感じです。

というわけでこんな感じのハンバーガーメニューになります。

【まとめ】ハンバーガーメニューをXDで実装してよりリアルなデザインを

というわけで記事は以上です。

アニメーション処理を変更したり、メニューの位置を変更すればスライド式のメニューオープンも実装できます。それについてはまた別の記事で解説します。

参考になったら嬉しいです〜

【2分で実践】XDで画面下固定フッターを作成する方法 XDで固定ヘッダーを作成する方法【応用方法もセットで解説】

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA