記事より動画で見たい方はこちらから！（チャプター付きリンク有）
【動画のChapter】
00:00 夏仕様！浴衣でごあいさつ！
01:18 今回のお題～タイトル紹介
01:28 実際にFigmaを操作しながら解説
01:50 「Figma Sites」でつくるハンバーガーメニューの例
02:43 ハンバーガーメニューの実装～各パーツのコンポーネント化、プロパティとバリアントの仕組みを理解する～
07:15 ハンバーガーメニューの動きづけ
09:18 デザイン上に配置する方法
09:55 つくったハンバーガーメニューを動かしてみる
11:12 今回のまとめと次回予告
こんにちは。上武 ハヤです！今回は、「デザインデータ」だけで
ハンバーガーメニューをつくっちゃおう、というお話です
みなさんこんにちは～！！
私は「上武 ハヤ（うぇぶ はや）」といいます🌟
最近、動画配信を始めたVの者(Vtuber)ですよーーー🌟
もう夏！夏が来た！！ということで、私も浴衣に衣装チェンジして、お届けしています🍉
さて、前回の内容につづいて。
今回も、「Figma Sites」についてのお話ですよ🌟
デザインデータだけで、ハンバーガーメニュー🍔実装しちゃう夏🍉
そう、Figma Sitesでね。
今回はですね…、「デザインデータだけで実装する、ハンバーガーメニューのつくり方」について、トライしてみました！
「Figma Sites」を使えば、
「Webサイトにハンバーガーメニューを実装すること」も！
「デザインデータを用意するだけ」で、ほんとうに
できちゃうんですよ！
こちら…今回も動画の中で、実際に手を動かしてご紹介してるわけですが…
- ・(1). コンポーネントを用意する
- ・(2). そのコンポーネント内で、デフォルトの状態/開いた状態を管理する「バリアント」を用意する
- ・(3). 今回はそこに、配置するパーツについてもコンポーネント化をしっかりしておく
- ・(4). あとはアコーディオンの時と同様、Figma Sitesの「インタラクション」をつかって、クリックした時に開閉状態を切り替える設定を行う
ひと手間だけ増えてますが、それでも、たったこれだけの、わずか数ステップで！
できちゃうんですよ。ハンバーガーメニューが！！
この前もその前もその前も…毎回言ってますが「Figma Sites」、
「ゲームチェンジャー」になりえます。
おそらく、
Webデザイン、Web制作のワークフロー、変わってくると思います。（これ言うの6回目📢～～）
デザインデータだけで、ハンバーガーメニューを実際につくってみて…
「Figma Sites」の圧倒的な実力、そして再現性。
おどろきですよもう。
…ということで、今回も、実際に私自身がFigma Sitesで
ハンバーガーメニューをつくってみた様子を動画として配信してますので、ぜひぜひ！ご覧くださいね～！！
【実践動画】【Figma Sites】ハンバーガーメニューも「デザインデータだけ」で実装できちゃうの!?
【動画のChapter】
00:00 夏仕様！浴衣でごあいさつ！
01:18 今回のお題～タイトル紹介
01:28 実際にFigmaを操作しながら解説
01:50 「Figma Sites」でつくるハンバーガーメニューの例
02:43 ハンバーガーメニューの実装～各パーツのコンポーネント化、プロパティとバリアントの仕組みを理解する～
07:15 ハンバーガーメニューの動きづけ
09:18 デザイン上に配置する方法
09:55 つくったハンバーガーメニューを動かしてみる
11:12 今回のまとめと次回予告
みなさんぜひぜひ、チャンネル登録お待ちしてますっ！！！
上武 ハヤでした～！またねーーー🌟🌟🌟！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。