Figma Makeは、Figmaの AI戦略のもう半分を担っています。Design Agentがキャンバス上でビジュアルデザインを作成する一方で、Makeはそれらのデザイン（または文章での説明）を動作するコードに変換します。つまり、クリックして操作でき、共有でき、実際のユーザーでテストできる機能的なプロトタイプを作成します。これは、この1年間で登場したv0、Bolt.new、その他すべてのプロンプト・トゥ・コードツールに対するFigmaの答えです。
Makeは、Figmaで最も議論を呼ぶ機能でもあります。うまく機能すれば、数日間のプロトタイピング作業を節約できます。うまく機能しなければ、使えない出力でクレジットを消費してしまいます。いつ使うべきか、そしていつ代替手段を使うべきかを理解することが、この機能から価値を得る鍵となります。
重要なポイント
Makeは、シンプルから中程度の複雑さのプロトタイプに最適です：ランディングページ、単一画面のアプリ、コンポーネントのデモなど。複雑な複数ステップのフロー、条件付きロジック、ステートフルなインタラクションには苦戦します。Makeは探索とステークホルダーのデモに使用し、本番コードには使用しないでください。そして、具体的なプロンプトを書いてください。再生成のたびに、回復できないクレジットが消費されます。
Figma Makeは実際に何ができるのか？
| 入力 | 出力 | 品質レベル | 最適な用途 |
|---|---|---|---|
| テキスト説明のみ | ゼロから動作するプロトタイプ | シンプルなものは良好、複雑なものは可変 | 迅速なコンセプトテスト |
| 既存のFigmaデザイン | デザインのコード版 | 良好 — ビジュアルデザインを参照として使用 | デザインからコードへの変換 |
| デザイン + テキスト指示 | 動作を含むインタラクティブプロトタイプ | 最良 — ビジュアル + インタラクション仕様 | ステークホルダーデモ |
最良のワークフロー：まず画面を視覚的にデザインし（Design Agentで、または手動で）、次にMakeを使用してそれを動作するプロトタイプに変換します。これにより、Makeにビジュアルデザインとテキスト指示という2つのコンテキストソースを提供でき、どちらか単独の入力よりも高品質なコードが生成されます。
クレジットコストの現実：誰も教えてくれないこと
MakeはFigma AIの機能の中で最もクレジット消費の多い機能です。コストは、すぐには明らかでない方法で複雑さに応じてスケールします：
| プロトタイプタイプ | 生成あたりのクレジット | 典型的な反復回数 | 総コスト |
|---|---|---|---|
| シンプルなランディングページ | 10-20 | 1-2 | 20-40クレジット |
| 単一画面アプリ | 20-40 | 2-3 | 40-120クレジット |
| 複数画面フロー | 50-80 | 3-4 | 150-320クレジット |
| ステートを持つ複雑なアプリ | 80-100+ | 3-5 | 240-500+クレジット |
「典型的な反復回数」の列が隠れた乗数です。最初の生成で必要なものが正確に生成されることはまれです。プロンプトを調整し、再生成し、レビューし、再度調整します。各反復で同じレートでクレジットが消費されます。「50クレジット」のプロトタイプが、4回の反復で簡単に「200クレジット」のプロトタイプになります。
これが、特にMakeにおいて具体的で詳細なプロンプトを書くことが非常に重要な理由です。避けられる再生成はそれぞれ、直接的にクレジットを節約します。無料のPrompt Optimizerは反復を減らす構造を追加し、Makeとは異なり、使用にクレジットは一切かかりません。
Figma Makeは代替手段と比べてどうか？
| ツール | Figma読み取り | コード品質 | 料金モデル | 最適な用途 |
|---|---|---|---|---|
| Figma Make | はい（ネイティブ） | デモには良好 | クレジット（高額） | デザインからプロトタイプへ |
| v0 (Vercel) | いいえ | より良い（React/Next.js） | 無料プラン + サブスクリプション | テキストからコードへ |
| Bolt.new | いいえ | 良好（フルスタック） | 無料プラン + サブスクリプション | フルスタックアプリ |
| Claude Code via MCP | はい（MCP経由） | 最良（本番対応） | 月額20ドルのサブスクリプション | 本番コード |
| Cursor | プラグイン経由 | 最良（本番対応） | 月額20ドルのサブスクリプション | コードファーストの開発 |
正直な推奨：Figmaデザインの統合が重要なステークホルダーデモには、Figma Makeを使用してください。Figmaの統合が不要な迅速なスタンドアロンプロトタイプには、v0またはBolt.newを使用してください。本番コードにはClaude CodeまたはCursorを使用してください。これらの出力品質は、シンプルなページを超える用途では、Makeよりも大幅に高いです。
Figma Makeからより多くを得るための5つのコツ
1. テキストだけでなく、ビジュアルデザインから始める。 Makeは参照としてFigmaデザインがある場合により良いコードを生成します。まず画面をデザインし（粗くても可）、次にMakeにデザインとテキスト指示の両方を提供します。2つの入力 > 1つの入力。
2. テクノロジースタックを指定する。 「これをReactとTailwind CSSで構築してください」は、技術選択をMakeに任せるよりも異なる（そして通常はより良い）出力を生成します。フレームワーク、スタイリングアプローチ、使用したいライブラリについて明確にしてください。
3. レイアウトだけでなく、インタラクションを説明する。 「ユーザーがSubmitをクリックしたとき、2秒間ローディングスピナーを表示し、その後成功メッセージを表示する」は「送信ボタンを追加する」よりもはるかに有用です。Makeはインタラクティブな動作を生成できますが、指定した場合のみです。
4. 複雑なプロジェクトは画面に分割する。 「アプリ全体を構築してください」とプロンプトしないでください。「ログイン画面を構築してください」→レビュー→「ダッシュボードを構築してください」→レビューとプロンプトします。順次の単一画面生成は、1つの巨大な複数画面プロンプトよりも良い品質を生成します。
5. 最初にPrompt Optimizerを使用する。 Makeでクレジットを使用する前に、無料のPrompt Optimizerでプロンプトを実行してください。明確なコンテキスト、制約、詳細を含む再構築されたプロンプトは反復を減らし、直接的にクレジットを節約します。
よくある質問
Figma MakeとFigma Sitesは同じですか？
関連していますが異なります。Makeはプロトタイプを生成します（テストとデモ用）。Figma Sitesはウェブサイトを公開します（本番用）。Makeの出力は機能的ですが本番対応ではありません。Sitesの出力は実際のデプロイメント向けです。Makeをプロトタイピング、Sitesを公開と考えてください。
Makeのコードをエクスポートしてプロジェクトで使用できますか？
Makeは動作するコードを生成しますが、本番ではなくデモンストレーション用に最適化されています。コード品質はプロトタイピングとステークホルダーデモには十分ですが、本番使用には通常大幅なリファクタリングが必要です。Figmaデザインからの本番コードには、MCPサーバー経由でClaude Codeを使用してください。
v0はFigma Makeより良いですか？
スタンドアロンのコード生成では：多くの場合はい — v0はよりクリーンなReact/Next.jsコードを生成し、クレジットの代わりにサブスクリプションモデルを使用します。デザインからコードへの変換（Figmaファイルを入力として使用）では：Makeの方が良いです。デザインシステムを読み取るからです。異なる出発点に対応します：v0はテキストから、MakeはFigmaデザインから。
Makeを学ぶべきか、コーディングを学ぶべきか？
コーディングなしでプロトタイプを作成したいデザイナーには：Makeは即座の価値を提供します。本番機能を構築し、実装についてより深く理解したいデザイナーには：コーディングを学び、Claude Codeを使用してください。長期的には、コーディングスキルはMakeの習熟度よりも多用途でキャリアに価値があります。
現実的なプロトタイプのクレジットコストはいくらですか？
2-3回の反復を含む複数画面プロトタイプには100-300クレジットを予算してください。シンプルな単一ページプロトタイプは20-40クレジットと少ない場合があります。ナビゲーション、ステート、条件付きロジックを含む複雑なアプリは、複数回の生成と改良を通じて500クレジットを簡単に超える可能性があります。
開示：この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。