記事より動画で見たい方はこちらから！（チャプター付きリンク有）
【動画のChapter】
01:05 今回のお題～タイトル紹介
01:21 実際にFigmaを操作しながら解説
02:13 「Figma Sites」でつくるスライドインやフェードインの例
03:31 スライドインのつくり方～インタラクションの設定～
05:01 「イージング」についてのお話
07:10 時間差でアニメーションをつける～ミリ秒(ms)と時間差の設定～
10:45 今回のまとめ
上武 ハヤです！今回は、「デザインデータだけ」で
スライドインやフェードインもつくれちゃいますよ！というお話なの
みなさんこんにちは！
私は「上武 ハヤ（うぇぶ はや）」といいます！
最近、動画配信を始めたVの者(Vtuber)ですよーーー🌟
tedateさんのCSS解説動画を制作したご縁で、
こちらにも投稿させてもらってます！（これ言うの8回目📢～）
毎度のことですが、今日もよろしくおねがいしますっ！
さて、前回の内容につづいて。
今回もまたまた「Figma Sites」についての動画をつくりましたので、そのお話をしますっ！読んでみてください！
もしかして：FigmaSites スライドイン
今回の動画は…
「デザインデータだけで実装する、スライドインやフェードインのつくり方」について、トライしてみました！
そうなんです。
「Figma Sites」を使えば、
「スライドインやフェードインの実装」についても
JavaScriptを書くのではなく。（もちろん書いてもいいんですがっ！）
「デザインデータを用意するだけ」で、ほんとうにできちゃうんです！
今回も動画の中で、実際に手を動かしてご紹介しているのですが、
・通常であれば、InterSection Observerや、scrollイベントで実装するような「スクロールに応じたスライドインやフェードイン」
についても、「デザインデータ上で設定を入れるだけ」で。
ほんとうに実現できてしまうんです！
- ・(1). 動かしたい要素を、オートレイアウト化するかフレーム化する
- ・(2). その要素に対して、「インタラクション」の設定をおこなう（「表示する」という項目を使います）
- ・(3). 設定さえできていれば、「スライドインやフェードイン」がかなり柔軟に動く！
たった、わずか数ステップで！
スライドインやフェードインが、実装できてしまうんですねー。
イージングの設定や、
時間差の動きなども思いのまま！
具体的なつくり方は動画内でご紹介していますので、
ぜひともっ！動画本編を、ご覧くださいね～！！
【実践動画】【Figma Sites】スライドインやフェードインも！デザインデータだけで実装できちゃうっ！！
【動画のChapter】
01:05 今回のお題～タイトル紹介
01:21 実際にFigmaを操作しながら解説
02:13 「Figma Sites」でつくるスライドインやフェードインの例
03:31 スライドインのつくり方～インタラクションの設定～
05:01 「イージング」についてのお話
07:10 時間差でアニメーションをつける～ミリ秒(ms)と時間差の設定～
10:45 今回のまとめ
みなさんぜひぜひ、チャンネル登録お待ちしてますねっ！！
上武 ハヤでした～！またね🌟！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。