【figma】ハンバーガーメニュー・アニメーションのつくりかた
Figmaとは？
Figma は、ブラウザ上で簡単にデザインができるツールです。さまざまなデバイス上でリアルタイムにプロトタイプを閲覧、インタラクションすることが可能です。フリープランがあり無料で利用できるので、誰にでも手軽に導入できます。Figmaは、日本語版もリリースされ、より使いやすくなりました。シンプルな操作性で動作も軽く、テレワークとの相性が非常に良いツールです。
ハンバーガーメニューのアニメーションの作り方
やり方は複数あると思いますが今回は私が使っている方法を紹介します。
1.まず、ハンバーガーメニューが閉じた状態と開いた状態の２つのデザインを作成します。
今回はオーバレイを用いて、ハンバーガーメニューを閉じたデザインの上に開いたデザインが上に重なるようにしたいので、ハンバーガーメニューを開いた状態のデザインの方は、フレーム色をなしにしましょう。
2.アニメーションの追加
①メニューを開くアニメーションを追加しましょう。
- ハンバーガーメニューアイコンを選択します。
- プロトタイプタブから、アニメーションのトリガー設定として「クリック」を選択します。
- インタラクションを「オーバーレイを開く」、ハンバーガーメニューを開いた状態を選択もしくは、矢印を伸ばして開いた状態に繋げます。
- アニメーションは、ディゾルブにします。
②次にメニューを閉じるアニメーションを追加しましょう。
- 開いた状態の方のハンバーガーメニューアイコンを選択します。
- プロトタイプタブから、アニメーションのトリガー設定として「クリック」を選択します。
- インタラクションを「オーバーレイを閉じる」を選択します。
3.完成！フルスクリーンで確認してみてください。
最後に
今回はfigmaでハンバーガーメニューのアニメーションについてまとめました。
私はfigmaの日本語版を利用しているのですが、figmaを解説している記事は英語版がほとんどなので、英語版の説明が日本語版だとどれに当たるのか分かりにくい時もあるので、日本語版の記事がもっと増えればいいなと書きながら感じました。
