記事より動画で見たい方はこちらから！（チャプター付きリンク有）
【動画のChapter】
01:26 今回のお題～タイトル紹介
01:43 まずは完成形を見てみる
02:19 実際にFigmaを操作しながら解説
03:55 コンポーネント化した要素に「プロパティ」をつくり「バリアント」を持たせるということ
05:50 「インタラクション」を設定して動き付けをする
08:02 今回のまとめ
こんにちは。上武 ハヤです！今回は「タブ型コンテンツ」を「デザインデータだけ」で実装しちゃうよ！というお話です
みなさんこんにちは😊
私は「上武 ハヤ（うぇぶ はや）」といいます🌟
最近、動画配信を始めたVの者(Vtuber)ですよー！
まだ暑い！暑すぎですねぇ～😳
今日、上野～御徒町の辺りに出かけてたんですけど…後半からもう滝汗🥹
9月に入ったという事ですが。まだまだ油断できませんねっ！
私は夏シーズンの浴衣から再び衣装をもどして（髪型だけサイドアップなの！）お届けしていますよ！
さて、前回の内容につづいて。
今回も、「Figma Sites」についてのお話をしていきます！
デザインデータだけで、タブ型コンテンツも実装できます！
そう、Figma Sitesでね！
今回は…「タブ型コンテンツをFigma Sitesで実装」する事について、チャレンジしてみました！
これまでも「Figma Sites」で、いろんなパーツを実装するチャレンジを、動画でしてきたわけですが…！
今回は「タブ型コンテンツ」の実装を、実際に手を動かしながら、ご紹介しています！
やる事としては主に次の3つ。
- ・(1). タブ用のデザインを用意する（3つのタブなら3つ。タブがアクティブな状態を3パターン。）
- ・(2). デフォルト状態のデザインをコンポーネント化。そこに「バリアント」を持たせます
- ・(3). バリアントはタブの数だけ用意して、そのバリアント内にデザインを配置！そして、各タブに「インタラクション」を設定。行き来ができるようにします
たったこれだけの、わずか数ステップで！
「タブ型コンテンツ」の実装ができちゃうんですねー。
これまでも、アコーディオン型のFAQなど、実用的なWebデザインのパーツを、Figma Sitesでつくってきたわけですが。
今回の「タブ型コンテンツ」も、実際のWeb制作でよく出てくるUIパーツになりますので、
今回の動画のやり方を覚えておくと。きっと何かの役に立つことと思います！
…ということで、今回も、実際に私自身がFigma Sitesで
実践してみた様子を動画として配信してますので、ぜひとも！ご覧くださいね～😉
【実践動画】【Figma Sites】タブ型コンテンツも「デザインデータだけ」で実装できるという事実！
【動画のChapter】
01:26 今回のお題～タイトル紹介
01:43 まずは完成形を見てみる
02:19 実際にFigmaを操作しながら解説
03:55 コンポーネント化した要素に「プロパティ」をつくり「バリアント」を持たせるということ
05:50 「インタラクション」を設定して動き付けをする
08:02 今回のまとめ
ぜひぜひ、みなさんのチャンネル登録をお待ちしてますっ！
上武 ハヤでした～！またねーーっ😉！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※この動画は個人によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※動画は自身の責任において閲覧ください。本記事掲載の動画の内容を無断で講座や教材等に転用することを禁じます。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。