Figma Make について自分用まとめ
Figma Make とは
対話形式でWebサイトやWebアプリケーションを生成できるAIツール
例えば「音楽発表会のLPを作って」と指示するだけで以下の様なページを自動生成してくれる
この Figma Make について個人的に覚えておきたいものを雑多に記録していく
要は Figma Make て何が出来るんだっけ？と思いだしたい時に使えるようにする！
Figma Make の特徴
使用されている LLM が Claude Sonnet 4
LLM (=Large Language Model（大規模言語モデル）)とは簡単に言うと、「人間が使う言葉を理解して処理を行うことが出来るAI」のこと。（他にも有名なものが GPT とかね！）
この LLM が Figma Make では「Claude Sonnet 4」と言うものが使用されており、調べてみるとAnthropic（アンソロピック）というAI研究会社が開発している言語モデルで Claude を提供している会社らしい。
つまり、Figma Make = Claude で作るのとほぼ一緒、、という認識で良いのだろうか？
細かくは色々と違いはあるのだろけど、少なくともプロンプトに対する反応・対応は Claude に近いと思っていて間違いなさそう
Claude については以下のリンクを参照
技術スタック
Figma Make が作り出すWebサイトにはどのような技術が用いられているのか？
冒頭の「Figma Makeとは」で紹介した音楽発表会LPのコードを実際にダウンロードしてみた結果
以下の技術が使われている事が分かった
・React Type Script = ライブラリ
・Radix UI = UIコンポーネント
・Vite = ビルドツール
・Tailwind CSS = スタイリング
上記の他にも色々とあったが、制作時の技術選定として特に重要となるものを抜粋している
デザインシステムの活用
Figma Make ではライブラリを作ることが出来、例えば自社にデザインシステムなどがあれば、それをライブラリ化させることで、そのデザインシステムを活用したWebサイトを作らせることが出来るらしい
Figma のフレームを読み込む
これはまぁ当然っちゃ当然かもしれないが、自分が Figma で制作したデザインや Figma コミュニティからダウンロードしたデザインを基にWebサイトを作らせることが出来る。
コミュニティにはよくUIコンポーネントをまとめたデザインなどがあるので、これらを活用することでよりクオリティの高いサイトを生成する事が出来るかもしれない
部分的に修正
Figma Make では生成したサイトをコンポーネント単位で更にプロンプトを支持する事が出来る。
例えば「このボタンだけ要らないから消してほしい」「ここのテキストをもっと大きく」と言ったような指示を出すこともできる。
またウィジウィグを使ってWordのように直接要素を修正する事も可能。
Figma Site
こちらは Figma Make の機能ではないが親和性が高いので記録する。
Figma上で作成したデザインやコードをWeb上で公開出来るホスティングサービスで、ボタンポチで公開出来、その際のURLなどは自動生成される。
ただこのサービスは現状あくまでプロトタイプの共有手段、、という印象
そのため、ホスティングサービスを利用する際に設定したい下記の様な詳細な設定は出来ない模様
・独自ドメイン
・アクセス権限
・ページの階層化
・OGPの設定
・編集権限管理
・解析ツールなどの連携
プロトタイプの共有手段以外の使い方としては、例えば社内専用イベントなどの告知ページとか短期運用予定のキャンペーンページなどであれば便利かもしれない
結論
Figma Make を実際に調べて使ってみた結果、以下の様な結論に至った
どういう時に使うのが良いか？
デザイン制作時のアイディア出し、0 → 1 に使ったり、ブレストを行う際にメンバーの意見を見える化させるに使えそう！
Figma Make 公式TOPにも以下の様な文言が書いてあり、憶測となるが Figma 側もそう言ったアイディアを具体化させるツールとしての利用を推奨している気がする
大胆なアイデアから風変わりで奇抜なもの、そしてごく小さなひらめきまで、あらゆる可能性を探って、本当に価値あるアイデアを見つけましょう。忠実度の高いプロトタイプを作成すれば、見ている人全員にあなたのビジョンが伝わります。
Figma Make だけでプロダクトは作れるのか？
これに関しては「個人製作の使用であれば問題無し」「会社で使用するには幾つかのハードルを乗り越える必要がある」と結論に至った。
では実際に乗り越える必要あるハードルとはどんなものがあるかと言うと、やはり最初のハードルは技術スタックだと思う。
「Tailwind CSS」「Radix UI」などが用いられている分、ある程度のコードクオリティが担保されている一方で、コーポレートやLPを作るにはやや大げさな技術スタックだと感じる。
特にCSSに関してはSCSSを採用している場合が多い（少なくとも自分の周りではそう）ので、中長期の運用を想定しているページであれば普段使用しない「Tailwind CSS」を用いることに抵抗がある、、という場面もありそう。
また React に関してはこれらの課題に加えて、React の知見がチーム内に無い場合もありそう。。
もう一つの懸念として、自社のデザインシステムを基にプロンプトを行う場合、自社の財産を外部のサーバーにアップする事になるので、それが会社のコンプライアンス的に可能かどうか？という点だろう。
Discussion