記事より動画で見たい方はこちらから！（チャプター付きリンク有）
【動画のChapter】
00:48 今回のお題～タイトル紹介
01:30 実際にFigmaを操作しながら解説
02:00 「Figma Sites」でつくるアコーディオン型FAQの例
02:53 アコーディオン型FAQのつくり方～「バリアント」を理解する～
12:16 コンポーネントの見た目の準備完了
12:33 開閉する動きを付ける方法
15:05 デザイン上に配置する方法
16:45 つくったアコーディオンを動かしてみる
18:15 今回のまとめと次回予告
こんにちは。上武 ハヤです！今回は、「デザインデータ」だけで
アコーディオンをつくるお話ですっ！
みなさんこんにちは～！！
どーもっ！私は「上武 ハヤ（うぇぶ はや）」といいます🌟
最近、動画配信を始めたVの者(Vtuber)ですよーーー🌟
tedateさんのCSS解説動画（近日公開予定）を制作したご縁で、
こちらにも投稿させてもらうことになりました！（これ言うの5回目📢～）
今日もよろしくおねがいしますねっ！
さて、前回の内容につづいて。
今回も、刮目必須！の神ツール「Figma Sites」についてのお話ですよーー！
デザインデータだけで、アコーディオンも、実装しちゃうよって話。
そう、Figma Sitesならね。
今回はですね…、「デザインデータだけで実装する、アコーディオンのつくり方」について、トライしてみました！
「Figma Sites」を使えば、
「Webサイトにアコーディオンを実装すること」についても
なんと…
「デザインデータを用意するだけ」で、ほんとうに「アコーディオン」が、
できちゃうんですよ！
これね…今回も動画の中で、実際に手を動かしてご紹介してるわけですが…
- ・(1). コンポーネントを用意する
- ・(2). そのコンポーネント内で、デフォルトの状態/開いた状態を管理する「バリアント」を用意する
- ・(3). Figma Sitesの「インタラクション」をつかって、クリックした時に開閉状態を切り替える設定を行う
たったこれだけの、わずか数ステップで！
できちゃいましたよ。アコーディオン型のFAQがっ！！！
ベリッシモ。BELLISSIMO フィグマちゃん、ってわけですよもう。
この前もその前もその前も…毎回言ってますが「Figma Sites」、
「ゲームチェンジャー」になりえます。
おそらく、
Webデザイン、Web制作のワークフロー、変わってくると思います。（これ言うの5回目📢～～！）
デザインデータだけで、アコーディオン型のFAQを実際につくってみて…
「Figma Sites」の圧倒的な実力、そして再現性。
感動しました。
…ということで、今回も、実際に私自身がFigma Sitesで、
アコーディオン型のFAQをつくってみた様子を動画として配信してますので、ぜひぜひ！ご覧ください～！！
【実践動画】【Figma Sites】アコーディオン型コンテンツも「デザインデータだけ」で実装できるって本当!?
【動画のChapter】
00:48 今回のお題～タイトル紹介
01:30 実際にFigmaを操作しながら解説
02:00 「Figma Sites」でつくるアコーディオン型FAQの例
02:53 アコーディオン型FAQのつくり方～「バリアント」を理解する～
12:16 コンポーネントの見た目の準備完了
12:33 開閉する動きを付ける方法
15:05 デザイン上に配置する方法
16:45 つくったアコーディオンを動かしてみる
18:15 今回のまとめと次回予告
みなさんぜひぜひ、チャンネル登録お待ちしてますっ！！！
上武 ハヤでした～！またねーーー🌟🌟🌟！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。