記事より動画で見たい方はこちらから！（チャプター付のリンクから見たいところを再生できます）
【動画のChapter】
01:48 今回やることと導入ショート動画について
02:20 今回のお題～タイトル紹介
04:06 実際にFigmaを操作しながら解説
04:36 「Figma Sites」から「Figma Make」を起動！
05:18 最初のプロンプトから初回の生成まで
06:00 様々なプロンプトを追加して修正してもらう
06:38 ある程度調整できた段階
07:10 カード内のテキストや背景色の更新
07:10 裏側ではどんなコードになっているの？
07:10 「Figma Make」が生成するコード（コードレイヤー）
08:38 今回のまとめ
こんにちは。上武 ハヤです！今回は「Figma Make」をFigma Sitesから起動して、生成AI + Figma Sitesの世界を体験しちゃおう！というお話です
みなさんこんにちは😊
私は「上武 ハヤ（うぇぶ はや）」といいます🌟
最近、動画配信を始めたVの者(Vtuber)ですよー！
気づけばもう11月！しかももう中旬…🧐
今年もあと45日くらいだけど、引き続き、はりきっていきましょ～😉！
さて今回も、前回の内容につづいて。
「Figma Sites」についてのお話をしていきますよ～！
今回は、新しい要素の登場です！！
Figmaから生成AI、使えるって知ってましたか？
今回は…「生成AI」の登場です！
「Figma Make」をFigma Sitesから起動して、生成AI + Figma Sitesの世界を体験する事について、チャレンジしてみました！
Figma Makeというのは、Figmaから使う事のできる生成AI機能の入り口のひとつで、プロンプトからいろいろなコンテンツをつくる事ができる機能なんですが。
このFigma Make、それ単体でも使うことができるわけですけど、
今回はFigma Sitesから起動して、組み合わせて使ってみよう！というわけですね😎
やる事としては主に次の3つ。
- ・(1). ベースにしたい要素をFigma Sitesに配置。それらを選択した状態で、Figma Makeを起動！
- ・(2). Figma Makeを起動したら「ベースの要素を使って何をしたいか」を伝えるプロンプトを入力します
- ・(3). あとは、希望の状態になるまで修正プロンプトを繰り返してあげれば完成！（実際に生成されるコードなど、けっこう重要な詳しい内容もありますのでぜひ！この動画を見てね！）
厳密には「コードレイヤー」というそうです
ちなみに、厳密には、「Figma Sites」上で「Figma Make」を起動して出力したものは「コードレイヤー」と呼ばれるそうです。
どうやら「Figma Make主導で、単体で使用する場合」とのすみ分け的な意味で、呼び方がちがうと言う事のようなのです🧐
👉 Figma公式サイトのこのページに書いてありました！
https://help.figma.com/hc/en-us/articles/31242824165143-Guide-to-code-layers-in-Figma-Sites
(What’s the difference between code layers and Figma Make?の部分です！)
今回の「Figma SitesからFigma Make」を起動して、組み合わせて使う方法。
実際にやってみると、今までにない新しい制作体験ができて驚くと思います🪄
…ということで、今回も、実際に私自身がFigma Sites上で
実践してみた様子を動画として配信してますので、ぜひとも！ご覧くださいね～☺️
【実践動画】【Figma Make + Figma Sites】UI制作マジックを体験！生成AI + Figmaでつくるカルーセル（スライダー）コンテンツ！
【動画のChapter】
01:48 今回やることと導入ショート動画について
02:20 今回のお題～タイトル紹介
04:06 実際にFigmaを操作しながら解説
04:36 「Figma Sites」から「Figma Make」を起動！
05:18 最初のプロンプトから初回の生成まで
06:00 様々なプロンプトを追加して修正してもらう
06:38 ある程度調整できた段階
07:10 カード内のテキストや背景色の更新
07:10 裏側ではどんなコードになっているの？
07:10 「Figma Make」が生成するコード
08:38 今回のまとめ
ぜひぜひ、みなさんのチャンネル登録をお待ちしてますっ！
上武 ハヤでした～！またねっ😊！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※この動画は個人によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites、Figma Make は、Figma, Inc. の商標です。
※動画は自身の責任において閲覧ください。本記事掲載の動画の内容を無断で講座や教材等に転用することを禁じます。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。