記事より動画で見たい方はこちらから！（チャプター付きリンク有）
【動画のChapter】
01:25 今回のお題～タイトル紹介
01:41 実際にFigmaを操作しながら解説
02:13 「Figma Sites」でつくる「hoverで罫線が伸びるエフェクト」
03:00 hoverで罫線が伸びるエフェクトのつくり方 ～バリアントの理解～
06:15 インタラクションの設定
07:55 hover時のカーソルをpointerにする方法
08:18 hoverで罫線が伸びるエフェクトの完成 ～スムーススクロールとの連携～
09:28 もうひとつの方法 ～インタラクションから直接設定するやり方～
09:55 文字通り組込みの「ホバーエフェクト」をつかう際の設定例
11:10 簡易版ホバーエフェクトの例
11:45 今回のまとめ
上武 ハヤです！今回は「デザインデータだけ」で
hover(ホバー)エフェクトもつくれます！というお話です。しかも2通り！
みなさんこんにちは！
私は「上武 ハヤ（うぇぶ はや）」といいます！
最近、動画配信を始めたVの者(Vtuber)ですよーーー🌟
tedateさんのCSS解説動画を制作したご縁で、
こちらにも投稿させてもらってます！（これ言うの9回目📢）
毎度のことですが、今回もよろしくおねがいしますっ！
さて、前回の内容につづきまして。
今回もまた「Figma Sites」についての動画をつくりましたので、そのお話をします！ぜひ読んでみてくださいね！
もしかして：Hover エフェクト
今回の動画は
「デザインデータだけで実装する、hover(ホバー)エフェクトのつくり方」について、トライしてみました！
「Figma Sites」を使えば、
「hover(ホバー)エフェクト」についても、
CSSを組まなくても。（もちろん組んでも、いいんですがっ！）
「デザインデータを用意するだけ」で、ほんとうにつくれちゃうんです！
今回も動画の中で、実際に手を動かしてご紹介していまして…
以下、かんたんにやり方をご紹介します。
- ・(1). 動かしたい要素を、コンポーネント化しておく
- ・(2). その要素に対して「バリアント」を2個もたせます（「Default状態」と「Hover時の状態」の2つの「バリアント」）
- ・(3). その要素に対して、「インタラクション」の設定をおこなう（「次に変更」という項目を使います）
- ・(4). 「トリガー：マウスオーバー」に設定して、「Hover時の状態」に変更するように選択しておけば、実装完了！
…と、このように。今回も、わずか数ステップで！
hover(ホバー)エフェクトが、実装できてしまうんですねー。
しかも、やり方はこの方法のほかにも。「バリアントを使わない方法」がもう1つあるので、
簡易的な動きであれば、もう1つの方法でも充分つかえます！（リッチな表現はバリアント使うのががおすすめ）
上に書いた2通りのつくり方について、具体的に動画内でご紹介していますので、
ぜひとも今回もっ！動画本編をご覧くださいね～！！チャンネル登録もお待ちしてますよ🌟
【実践動画】【Figma Sites】2種類！hover(ホバー)エフェクトをデザインデータだけで実装する方法！
【動画のChapter】
01:25 今回のお題～タイトル紹介
01:41 実際にFigmaを操作しながら解説
02:13 「Figma Sites」でつくる「hoverで罫線が伸びるエフェクト」
03:00 hoverで罫線が伸びるエフェクトのつくり方 ～バリアントの理解～
06:15 インタラクションの設定
07:55 hover時のカーソルをpointerにする方法
08:18 hoverで罫線が伸びるエフェクトの完成 ～スムーススクロールとの連携～
09:28 もうひとつの方法 ～インタラクションから直接設定するやり方～
09:55 文字通り組込みの「ホバーエフェクト」をつかう際の設定例
11:10 簡易版ホバーエフェクトの例
11:45 今回のまとめ
みなさんぜひ、チャンネル登録お待ちしてますねっ！！
上武 ハヤ（うぇぶ はや）でした～！またね🌟
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。