Figma Make 完全解説
テキストを打ち込むだけで「動くアプリ」が生まれる——Claude 3.7 Sonnet搭載・React+TypeScript+Tailwind CSS出力・Supabase連携。料金・使い方・コンテンツトレーニング設定・プロンプト集・ツール比較まで、検索上位を全部読んで書いた。
1. Figma Makeとは
Figma Make（フィグマ メイク）は、2025年5月7日に発表、2025年7月24日に正式リリース（GA）されたFigmaの新しいAI機能だ。テキストで指示を書くだけで、実際に動作するプロトタイプやWebアプリが生成される。コードはReact + TypeScript（Tailwind CSS併用）で出力される。
- 従来のFigmaプロトタイプとの根本的な違い——「見せるもの」と「動くもの」
- Supabase連携で何が変わるか——「いいね」がリロードで消えない理由
- シート種別（Full/Dev/Collab）を誰に割り当てるかの最適設計
- AIクレジットは1ヶ月で実際何件のプロンプトが使えるか
- Figma Designのフレームを渡す時の「レイヤー名の重要性」
- コンテンツトレーニング設定——企業導入前に必ず確認すべき5ステップ
- 即使える業務プロンプト8パターン（短文/標準/詳細の3段展開付き）
- Framer・v0・Builder.ioとの職種・目的別の選び方判断フロー
2. 従来プロトタイプとの決定的な違い
Figma Design プロトタイプ
- 「見た目」と「画面遷移」の確認専用
- コードが生成されない
- バックエンド連携は不可
- フォーム送信・データ保存は動かない
- リロードすると状態がリセット
- デザイナー向けの機能
Figma Make
- React+TypeScript+Tailwind CSSで動くコードを生成
- コードをダウンロード・GitHubにプッシュ可能
- Supabaseと接続してデータを永続化
- ユーザー認証・フォーム送信処理も実装可
- 専用URLで誰でも(アカウント不要で)アクセス可能
- デザイナー・エンジニア・ノンエンジニア対応
3. 主な機能
AIプロンプトによるUI生成
日本語・英語どちらでも指示可能。生成時間は1画面で30秒〜1分、複数画面・複雑なレイアウトで2〜4分、大規模な変更は5〜10分程度。追加プロンプトで逐次修正も可能。
巻き戻し機能（バージョン管理）
生成したデザインはバージョン管理されており、ワンクリックで前の状態に戻せる。修正不可能なエラーが発生した際も安心。複雑な修正で壊れても怖くない。
コードエクスポート・GitHub連携
React+TypeScript+Tailwind CSSのコードをZIPダウンロード、またはGitHubの新規リポジトリにプッシュ。既存リポジトリへの直接送信・双方向同期は非対応（Figma Make→GitHubの一方向のみ）。
MCP連携（Cursor等のAIエディタ）
MCP（Model Context Protocol）サーバーとの連携でCursor等のAIコーディングエージェントと接続可能。Figma Makeで叩き台を生成→AIエディタで本番実装に向けて磨くフローが実務的。
専用URLでの公開・共有
「Publish」でFigmaアカウント不要の専用URLが発行される。クライアントへの即時共有が可能。ただし無料プランはFigma Community経由での同時公開が必須。独立URLでの公開はProfessional以上が必要。
Claude 3.7 Sonnet搭載
Anthropic社のClaude 3.7 Sonnetが生成エンジンに採用されている。コンポーネント・状態管理・UIの論理構造においてコード品質が高いと評価されている。将来的には他モデルの導入も予定。
4. Supabase連携の具体的な活用場面
Figma Makeだけでも動くプロトタイプは作れる。しかし、ページをリロードするとデータが消えるという限界がある。たとえば「いいね」ボタンを押しても、再読み込みすると元に戻る——これはFigma Makeがフロントエンドのみを生成するためだ。Supabase（BaaS：Backend as a Service）と連携すると、この限界を超えられる。
メールアドレス・パスワードでのログイン機能。「誰が操作したか」を記録できるようになる
「いいね」「タスク追加」「フォーム送信」などの操作がデータベースに保存され、リロードしても消えない
シークレット管理を含む外部APIとの接続。本番環境に近い検証が可能になる
Figma Makeのファイル設定からSupabase連携を選択。または「認証を追加して」とプロンプトで指示するだけで有効化できる
連携の設定はFigma Makeが自動で接続を提案してくる場合もある（ファイルを作成して作業を始めると「Supabaseに接続しませんか？」と促されるケースもある）。事前にSupabaseのアカウント作成が必要。
5. 料金とシート体系——「誰に何を割り当てるか」の設計
料金は「プラン × 付与したシート数」で決まる。重要なのは、どの機能が使えるかはプランではなくシート（席の種類）で決まるという点だ。Figma Make単独の有料プランは存在せず、Figma本体の契約に準拠する。
シート別の操作権限
| シート種別 | Design編集 | Makeのコード編集 | Publish（Web公開） | Dev Mode | 主な用途 |
|---|---|---|---|---|---|
| Full seat | ✓ | ✓ | ✓ | ✓ | デザイナー・メインのエンジニア・公開担当者 |
| Dev seat | — | コード閲覧のみ | ✗ | ✓ | コード取得・Dev Mode中心のエンジニア |
| Collab seat | — | — | ✗ | — | レビュー・コメント・FigJam/Slidesでの協働 |
| View seat | — | — | ✗ | — | 閲覧のみ。無料で利用可 |
プラン別の主な違い
| プラン | 月額(年払い/Full) | AIクレジット | 公開 | セキュリティ | コンテンツトレーニング |
|---|---|---|---|---|---|
| Starter（無料） | $0 | 1日150・月500 | Figma Community経由のみ | なし | ON（要手動オフ） |
| Professional | $16〜/月 | 月3,000 | 独立URLで公開可 | チーム管理 | ON（要手動オフ） |
| Organization | $55/月 | 月3,500 | 社内限定公開対応 | SSO・集中管理 | OFF（デフォルト） |
| Enterprise | $90/月 | 月4,250 | 社内限定公開対応 | SCIM・EUホスティング | OFF（デフォルト） |
コスト最適化のシート設計フロー
① 誰がPublishするか？→ その人にFull seat。
② 実装者はコードのZIPダウンロードが必要か？→ 必要ならDev seat。
③ レビュー・承認だけの人は？→ Collab seat。
④ 公開要件：独立URLで社外共有したいか？→ YesならStarter不可、Professional以上。
⑤ 機密情報を扱うか？SSO必要か？→ Organization以上が安心（コンテンツトレーニングがデフォルトOFF）。
6. AIクレジットの実態——プロンプト何件分か
| プラン | 月間AIクレジット | プロンプト換算目安 | 日次上限 |
|---|---|---|---|
| Starter（Full） | 月500 | 約8〜15件 | 1日150 |
| Professional（Full） | 月3,000 | 約50〜70件 | なし（月次上限のみ） |
| Organization（Full） | 月3,500 | 約60〜80件 | なし |
| Enterprise（Full） | 月4,250 | 約80〜100件 | なし |
| Dev/Collab/Starter一般 | 日次＋月次の二重制限 | レビュー・軽微な試行向き | あり |
7. 基本的な使い方
最初のプロトタイプを3分で生成する
Figmaにログイン後、左メニューから「Make」を選択するか、新規ファイル作成時に「Figma Make」を選ぶとエディターが起動する。左パネルにAIとのチャット、右パネルに生成されたプレビューが表示される。
シンプルなタスク管理アプリのホーム画面を作成してください。
タイトル、タスクリスト（3項目）、追加ボタンを配置してください。
// 生成後の修正例
「ボタンの背景色を青に変更してください」
「タスクリストを2列に配置してください」
「タイトルを『今日のタスク』に変更してください」
生成時間の実測値
| 操作の種類 | 生成時間の目安 |
|---|---|
| シンプルな1画面（ランディングページ・フォーム等） | 30秒〜1分 |
| 複数画面・複雑なレイアウト | 2〜4分 |
| 大規模な変更・リファクタリング | 5〜10分 |
プロンプトの3原則
具体性——要素を明示する
NG：「シンプルなアプリ」
OK：「タイトル・3項目のリスト・追加ボタンを持つタスク管理アプリ」
→ 詳細に書くほど修正回数が減る
構造——画面構成を順序立てて説明
「上部にナビゲーションバー、中央にコンテンツエリア、下部にフッター」のように場所と要素をセットで指定する
段階的指示——大枠から細部へ
最初：レイアウトと主要要素 → 次：色・フォント・余白 → 最後：アニメーション・インタラクション。一度に全部指定しない。
8. 【重要】Figma Designとの連携時の注意点
既存のFigma Designで作成したフレームやコンポーネントを、Figma Makeのプロンプトに添付して渡すことができる。これにより、自社のデザインシステムと整合したコードが生成できる——ただし致命的な注意点がある。
FrameをそのままFigma Makeに渡しても、AIはそのコンポーネントが「何なのか」を正確に認識できない場合がある。
悪い例：レイヤー名が「Rectangle 1」「Frame 23」のまま → AIが「これは何のコンポーネントか」を判断できず、動作が期待と異なる
良い例：レイヤー名を「submit-button」「user-name-input」「product-card」のように具体的に命名 → AIが「これはボタンだな」と理解し、クリック時の動作や適切なアニメーションを自動で実装してくれる
- Figma Designで既存フレームのレイヤー名を確認する
- 「Rectangle 1」「Frame 23」などの自動命名を具体的な名前に変更する
- ボタンは「submit-button」「cancel-btn」、入力欄は「email-input」「password-field」のように英語で命名するとAIの認識精度が高い
- 命名後にフレームをMakeのプロンプト欄に添付して指示を出す
9. 役割別活用法
デザイナーの使い方
- Figma Designのコンポーネントを渡して、インタラクション付きプロトタイプを生成
- クライアントプレゼン前に「触れるデモ」を30〜60分で準備
- 静的デザインをそのまま渡して「動的なバリエーション探索」
- ユーザーテスト用プロトタイプを複数パターン並行生成
- プレビューをコピーしてFigma Designで継続して反復も可能
エンジニアの使い方
- デザインから仕様を読み取るコード書き起こし時間を大幅削減
- ベースコード生成→GitHubにプッシュ→本番向けにリファクタリング
- MCP連携でCursor等のAIエディタと組み合わせて活用
- Supabase接続でバックエンドを含むプロトタイプを生成
- Dev seatでコード閲覧・ZIPダウンロードのみの運用もあり
ノンエンジニアの使い方
- 「こういう管理画面が欲しい」をエンジニアに渡す前に自分で形にする
- 完成品ではなく「仕様伝達の精度を上げる中間成果物」として活用
- 社内申請ツール・問い合わせフォームの仮形を自力で作成
- 提案書のデモ画面をプレゼン当日に急遽作る使い方も実用的
10. 【企業必読】コンテンツトレーニング設定の手順
Figmaには「コンテンツトレーニング」という設定がある。AIモデル改善のため、ユーザーのデザインコンテンツが学習に使われる設定だ。Starter・ProfessionalプランではデフォルトでON（オプトアウト方式）になっており、何も設定しなければ入力したプロンプト・生成されたコード・添付したFigmaデザインがAIの学習に使われる可能性がある。
機密情報を含むデザインや、顧客データを扱う場合は今すぐオフに設定すること。OrganizationプランとEnterpriseプランではデフォルトOFFのため、中〜大企業の導入はこれらのプランが推奨される理由の一つでもある。
コンテンツトレーニングをオフにする手順（Starter・Professionalプラン）：
- Figmaにログインし、対象チームのダッシュボードを開く
- 左サイドバーの「Settings（設定）」をクリック
- 「AI」タブをクリックし「Manage AI settings」を選択
- 「Content training」のトグルをクリックしてOFF（グレーアウト状態）に切り替える
- 保存後、それ以降の新規コンテンツ・編集内容がAI学習に使用されなくなる
11. 業務シーン別プロンプト集——即使える8パターン
効果的なプロンプトは「短文（まず出す）→標準（実務レベル）→詳細（最初から精度を上げる）」の3段階で考えるとよい。以下はコピペしてそのまま使える実務向けプロンプトだ。
ノンエンジニア向け
左にカテゴリ別のサイドバー（営業・技術・一般の3カテゴリ）、
中央に一覧表（件名・担当者・ステータス・受付日付）、
右に詳細パネルが表示されるレイアウトにしてください。
ステータスは「未対応」（赤）「対応中」（黄）「完了」（緑）の
3種類でラベル色を変えてください。
ステータスの色まで指定することで、デザイン修正ゼロで使えるプロトタイプが生成されやすい。エンジニアへの仕様伝達コストを大幅削減できる。
マーケター向け
構成：①ファーストビュー（キャッチコピーとCTAボタン「無料相談はこちら」）
②サービス特徴を3列カードで紹介
③実績数字（支援社数・平均ROI改善率・継続率）をビジュアルで表示
④料金プラン比較表（3プラン）
⑤よくある質問（FAQ アコーディオン形式）
⑥フォーム（会社名・氏名・メール・相談内容）
カラーは黒とライムグリーンを基調にしてください。
クライアントへの初回提案前に、スライドより「触れるデモ」を用意する用途。「構成の合意」を取るだけなら精度は十分。
デザイナー向け
ヘッダー（ロゴ・検索バー・カートアイコン）、
左サイドバー（カテゴリフィルター・価格範囲スライダー・評価フィルター）、
中央に商品カード一覧（4列グリッド、各カードに商品画像・商品名・価格・星評価）、
「カートに追加」ボタン。
カード数は8枚表示してください。モダンでクリーンなデザインで。
デモ用の画像はFigmaのUnsplashプラグインから自動で取得・配置してくれる場合がある。画像ダミーの手配が不要になる。
業務改善担当向け
入力項目：申請者名・部署・申請日・費用種別（交通費/接待費/消耗品/その他のプルダウン）・
金額・使用目的・領収書ファイルアップロード欄・承認者選択（プルダウン）。
送信後は「申請中」ステータスで一覧表示され、
承認者は一覧画面から承認/却下ができるようにしてください。
承認/却下時はコメント入力欄を表示してください。
エンジニアへの「こういうものが欲しい」という伝達より、プロトタイプを見せる方が要件の誤解が大幅に減る。
営業・提案向け
3ページ構成：
①予約カレンダー（月表示・日付クリックで予約スロット表示）
②予約リスト（顧客名・日時・ステータス・操作ボタン）
③新規予約入力フォーム（顧客名・日付・時間帯・メモ欄）
ページ間はサイドバーナビゲーションで遷移可能にしてください。
全体的にクリーンで信頼感のあるデザインにしてください。
商談中にその場でFigma Makeで作り、その場で見せる使い方も現実的になってきた。スライドより合意形成が速い。
プロダクト向け
ステップ1：ようこそ画面（プロダクト名・概要・「始める」ボタン）
ステップ2：プロフィール設定（氏名・会社名・役職・チーム人数プルダウン）
ステップ3：最初のプロジェクト作成（プロジェクト名・テンプレート選択カード3種）
ステップ4：チームメンバー招待（メールアドレス入力で招待）
各ステップはプログレスバーで進捗を表示してください。
多ステップのフロー設計は「実際に触れる」方がUXの問題点を早期発見しやすい。ユーザーテスト前の最速プロトタイプとして活用できる。
広告運用向け
一覧表示：クリエイティブ名・媒体（Meta/Google/TikTok）・配信ステータス・
CTR・CPC・消化金額・直近7日のトレンドグラフ（スパークライン）。
フィルター：媒体・ステータス・期間。
各クリエイティブをクリックするとサムネイル・コピーテキスト・
パフォーマンス詳細が右パネルに表示されるようにしてください。
LIF Tech（株式会社LIFRELL）でも実際に活用しているシナリオ。広告運用チームへのレポートUIをプロトタイプとして提示し、開発要件の合意を取るフローで有効。
HR・人事向け
トップ：企業ロゴ・ナビゲーション（会社紹介/募集職種/社員インタビュー/エントリー）・
ヒービジュアル（求職者向けキャッチコピーとCTAボタン）。
募集職種ページ：職種カード一覧（職種名・雇用形態・勤務地・簡単な説明）・
クリックで詳細ページへ遷移。
エントリーページ：氏名・メール・応募職種・自己PR・ファイルアップロード欄。
全体的に親しみやすく温かみのあるデザインにしてください。
採用ページを外注する前に社内で叩き台を作る用途。デザイン会社への要件伝達の精度が上がり、戻しが減る。
12. メリット・デメリット——正直な評価
- 正確なコード生成——コンポーネントからレイアウト・アニメーションまで一度に大量生成
- リリース可能な品質——「ハリボテ」ではなくそのままリリースも検討できるコード
- 大量のコード管理能力——膨大なコードベースでもプロンプトで箇所を指定して部分修正可能
- 巻き戻し機能——バージョン管理でワンクリック復元。修正が壊れても怖くない
- Figmaに統合——デザインシステム・ライブラリと一貫したツール上で完結
- 日本語対応——日本語プロンプトで十分な精度。英語の方が精度が高い場面もあり
- 待ち時間——複雑な変更・大規模修正で5〜10分の待ち時間が発生する場合あり
- コード品質の課題——冗長な部分・ハードコーディングが見られる場合あり。本番投入前にエンジニアによるリファクタリングを推奨
- GitHub連携の制約——既存リポジトリへの直接送信・双方向同期は不可
- コメント機能なし——現時点でFigma Make内にコメント機能がない
- 逆変換不可——Make→Figma Designのデザインデータ変換は不可
- 文字化け——稀に原因不明の文字化けが発生することあり
13. 類似ツール比較——職種・目的別の選び方
本記事対象
- Figmaユーザーに最適
- デザインシステムと統合
- Claude 3.7搭載
- Supabase連携
- MCP・Cursor対応
Web公開重視
- 公開まで含めてWeb完結
- CMS・SEO機能内蔵
- Figma連携はインポートのみ
- アニメーション豊富
エンジニア向け
- React/Next.js特化
- Vercelへ直接デプロイ
- スクリーンショット→コード
- Figma連携なし
CMS連携重視
- 既存サイトへの組み込み
- CMS運用が主目的
- Figmaからの取り込み可
- マーケター向け
2025年新機能
- FigmaデザインをWeb公開
- コード生成ではない
- Makeとの併用が増加
- Full seat対象
| あなたの状況・目的 | 推奨 | 理由 |
|---|---|---|
| すでにFigmaをデザイン基盤として使っている | Figma Make | 既存デザインシステム・ファイルを活用でき、切り替えコスト最小 |
| React/Next.jsで開発チームが主導する | v0（Vercel） | Next.js環境への直接デプロイ・高品質なコードエクスポートが開発フローに近い |
| WebサイトをCMS付きで公開・運用したい | Framer / Builder.io | CMS連携・SEO対応・コンテンツ管理者による更新が主目的の場合 |
| FigmaデザインをそのままWebサイトとして公開したい | Figma Sites | コードなしにFigmaをレスポンシブWebとして公開する最速手段 |
| アニメーション豊富なWebサイトを公開まで一貫して作りたい | Framer | アニメーション・CMS・ドメイン設定まで1環境で完結 |
14. LIF Tech視点——マーケ・コンサルでの活用
AIマーケティングコンサルが「Figma Make」を使う場面
株式会社LIFRELLはAIマーケティングコンサルティングと複数のアフィリエイトメディアを運営している。その実務視点から、Figma Makeが「デザインツール」より「アイデアを仕様に変換するコミュニケーションツール」として機能する3つの場面を整理する。
- クライアント提案でのリアルデモ生成：広告管理画面や分析ダッシュボードの提案時、スライドではなく「触れるプロトタイプ」を30〜60分で用意。合意形成のスピードが変わった
- アフィリエイトメディアのLP叩き台：新規メディアのLPや問い合わせフォームの骨格をFigma Makeで即生成→エンジニアへ渡すフローで開発工数削減。「仕様の誤解」起因の戻しが激減した
- エンジニアがいないチームでの「擬似PoC」：新規プロダクトの仮検証。完成品ではなく「これで方向性は合っているか」を確認する段階で、Figma MakeはエンジニアなしでPoC的な動くものを作れる
