Figma Make: 概要、仕組み、クレジット、および制限 (2026)9 min read

Figma Make は、Figma の AI プロンプトからアプリへのツールです。必要なものを記述するか、Figma 設計から開始すると、プレビュー、チャットで調整、コードで編集、公開できる実用的なプロトタイプまたは Web アプリが構築されます。 これは専用の Make ファイルとして Figma 内に配置されるため、デザインとライブラリをコンテキストとして使用できます。デザイナー、プロダクト マネージャー、そしてアイデアを人々がクリックできるものに変える必要がある人を対象としています。

2026 年 11 月 1 日に Figma Make ページおよび Figma ヘルプ センターに基づいて事実が確認されました。プラン、クレジット、機能は頻繁に変更されるため、購入前に Figma で最新の詳細を確認してください。

このガイドでは、Figma Make とは何か、Figma Make がどのように段階的に機能するか、重要な機能、誰が使用できるか、AI クレジットの仕組み、公開およびエクスポートの方法、およびその制限について説明します。ツールを選択する場合は、 Figma Make と Anima Playground の比較 代替案をカバーします。

Figma Makeとは何ですか?

Figma は、Figma Make を、アイデアや既存の Figma デザインを機能的なプロトタイプ、Web アプリ、インタラクティブ UI として実現できる、AI 駆動のプロンプト-トゥ-アプリ ツールであると説明しています。ライブ プレビューの横にあるチャットで作業し、構築するものはすべてコードに基づいて行われるため、プレビュー、ポイント アンド クリックによる編集、コード自体の間で切り替えることができます。

Figma は Config 2025 で Make を発表しました。Make は、単一コンポーネントのアイデアから、プラン モード、コード エディター、バックエンド、パブリッシング、統合を備えた完全な製品に成長しました。これは Figma Design とは別のものです。下書きで Make ボタンを使用して、他の Figma ファイルを作成するのと同じ方法で Make ファイルを作成します。

Figma Make では何を構築できますか?

• ユーザーと一緒にテストするためのフローまたは機能のクリック可能なプロトタイプ。
• トランジションとロジックを備えた既存の Figma デザインのインタラクティブ バージョン。
• データとサインイン用のバックエンドを備えた小規模な Web アプリまたは内部ツール。
• パブリック URL に公開できるランディング ページまたはマイクロサイト。

Figma Make の仕組み、ステップバイステップ

1. Makeファイルを作成します。 Figma ファイル ブラウザで下書きを開いて、 Make 右上隅にあります。テンプレートから開始することも、GitHub リポジトリのクローンを作成して開始することもできます。
2. プロンプトを書きます。 チャットで何を構築したいかを説明します。入力したり、口述したりできます。ユーザー、主なタスク、画面について具体的に説明します。
3. コンテキストを追加します。 Figma デザインを添付するかフレームをチャットに貼り付け、Figma ライブラリ (有料プラン) からスタイル コンテキストを取得し、バックエンドを追加し、MCP コネクタを介してツールを接続し、Make に Web 検索や URL を取得させます。
4. コントロールしたい場合は、まず計画を立ててください。 有料プランでは、プラン モードにより、コードを記述する前に編集できる構造化されたプランが生成されます。
5. プレビューを確認します。 Make はアプリをビルドし、ライブで表示します。ユーザーと同じようにクリックしてください。
6. リファイン。 チャットを続けたり、ポイントと編集を使用して特定の要素を変更したり、注釈を追加して一緒に送信したり、コード エディターを開いてコードを直接変更したりできます。
7. 共有または公開します。 コメント付きのフィードバック用にファイルを共有したり、プレビューをレイヤーとして Figma Design にコピーして戻したり、パブリック URL に公開したり、コードをダウンロードしたりできます。

Figma のドキュメントからの実践的なヒント: Figma ファイルにリンクを貼り付けるのではなく、フレームまたはコンポーネントを添付してください。 Make は URL からデザインを読み取らないため、リンクを貼り付けると予期しない出力が発生する可能性があります。

Figma Make の主な機能

Figma Make 対 Figma コード層対 Figma Sites

この３人は混乱します。 Figma Make は、アプリをビルドして公開する専用のファイルで動作します。コード レイヤーを使用すると、Figma Design キャンバス上のデザインの隣でインタラクティブなアイデアを検討できます。のガイドを参照してください Figma コード層と仕様。 Figma Sites は、Figma で設計された Web サイトを公開するためのものです。出力がアプリのように動作する必要がある場合は Make を選択し、静的デザインの横にインタラクティブな要素が必要な場合はコード レイヤーを選択します。

Figma Make を使用できるのは誰ですか? AI クレジットの料金はいくらですか?

Figma Make は、Starter (制限付き)、Professional、Organization、Enterprise、Education (高等教育およびブートキャンプ ユーザー)、および Government プランで利用できます。座席によって何ができるかが決まります。

Make は AI クレジットで実行されます。すべてのシートにはクレジットが含まれており、毎月リセットされ、共有したりロールオーバーしたりすることはできません。 2026 年 10 月の Figma ドキュメントの時点では、次のようになります。

プロンプトで使用されるクレジットの数は、選択したモデルとタスクによって異なります。 Figma 自身の例では、2026 年 2 月のデフォルト モデルに基づいて、およそ 30 クレジット以上でフォントを更新し、およそ 75 以上で添付デザインをインタラクティブにするなどの小さな変更を加えています。小規模な編集には軽量のモデルを選択し、大規模なビルドにはプラン モードを使用すると、クレジットを長持ちさせることができます。

パブリッシュ、バックエンド、成果物の取り出し

公開

[公開] をクリックし、タイトルを設定すると、Make から次のようなパブリック URL が表示されます。 three-random-words.figma.site。サポートされているプラ​​ンではカスタム ドメインに接続できます。公開されたアプリは、Cloudflare を介したルーティングにより Amazon Web Services でホストされ、デフォルトでは検索エンジンによってインデックスが作成されません。Make には分析ダッシュボードが組み込まれていませんが、設定で Google Analytics ID を追加できます。

バックエンド

データを保存してサインインをサポートするには、Make にデータベース、ファイル ストレージ、認証、管理パネルを備えた Payload を利用したバックエンドを作成するよう依頼するか、Make 設定から独自の Supabase プロジェクトを接続することができます。

コードをエクスポートする

フル シートまたは開発シートを持つユーザーは、[ファイル] タブのファイル アクションから Make ファイル内のすべてのファイルを ZIP としてダウンロードできます。ダウンロードをプロトタイプのコードベースとして扱います。ローカルで実行し、レビューして、ビルドする前にリファクタリングします。

デザインを Figma に戻します

有料プランでは、現在のプレビューをデザイン レイヤーとしてコピーし、Figma Design に貼り付けることができます。レイヤーは編集可能ですが、スナップショットです。これらはインタラクティブではなく、Make ファイルにリンクされず、設計システムに自動的に関連付けられません。

始める前に知っておくべき Figma Make の制限

• ほとんどの機能には有料プランのフルシートが必要であり、大規模なビルドではクレジットがすぐになくなる可能性があります。
• プロトタイプや単純なアプリ向けに構築されています。実稼働ソフトウェアには依然としてエンジニアリングのレビュー、テスト、セキュリティ、メンテナンスが必要です。
• Figma Design でコピーされたレイヤーに加えた変更は、Make ファイルには戻されません。
• モデルに Supabase を使用するよう要求し、統合が接続されていない場合、機能する接続の代わりにモック コードが生成される可能性があります。
• 公開サイトの SEO コントロールと分析は最小限です。
• Figma リンクを渡してファイルを読み取ることを期待することはできません。フレームを取り付けるか貼り付けます。

実際のフロントエンド コード、Web サイトのクローン、または Figma の外にあるアプリが必要な場合は、次のような代替手段を検討してください。 Anima Playground。正直に比較してみます Figma Make 対 Anima Playground.

Figma Make の即案

ユーザー、タスク、状態に名前を付ける特定のプロンプトを使用すると、最初の結果が向上します。これらを試してみてください:

• 「予算作成アプリの 3 ステップのオンボーディング フローを構築します。進行状況インジケーターを表示し、各フィールドを検証し、成功画面で終了します。」
• 「添付された価格設定フレームをインタラクティブなページに変えます。各プラン カードに月次と年次の切り替えとホバー状態を追加します。」
• 「チケットを優先順位付けするエージェント用のサポート ダッシュボードを作成します。フィルター、空の状態、読み込み中の状態を含めます。」
• 「ゲスト チェックアウト、住所検証、注文確認機能を備えたモバイル チェックアウトのプロトタイプを作成します。」

Anima Playground を使用して動作するアプリを構築する

エクスポートして出荷できる実際の Web サイトまたはアプリをお好みですか?それを記述すると、Anima がビルドします。

Figma Make よくある質問

Figma Makeとは何ですか？

Figma Make は、Figma の AI 駆動のプロンプトからアプリへのツールです。プロンプトまたは既存の Figma 設計を、プレビュー、チャットまたはコードで編集、公開できる機能的なプロトタイプ、Web アプリ、または対話型 UI に変換します。

Figma Makeは無料ですか?

Starter プランでは、1 か月あたり 500 AI クレジットと 1 日あたりの制限を含む、制限付きで Figma Make を無料で探索できます。有料プランのフルシートでは、より多くのクレジットと、チーム ライブラリ コンテキスト、プラン モード、共有、公開などの機能を利用できます。プランは変更されるため、Figma の価格を確認してください。

Figma Make の使用方法を教えてください。

Figma ドラフトで、Make をクリックし、チャットにプロンプ​​トを書き込み、デザインまたはスタイル コンテキストがある場合は添付して送信し、チャット、ポイント アンド エディット、またはコード エディターで結果を調整します。次に、それを共有、公開、またはエクスポートします。

Figma Make はコードをエクスポートできますか?

はい。フル シートまたは開発シートを持つユーザーは、[ファイル] タブから Make ファイルのコードを ZIP 形式でダウンロードできます。これは、運用環境で使用する前にレビューするプロトタイプのコードベースとして扱うのが最適です。

Figma Make アプリを公開できますか?

はい。フルシートは公開 figma.site URL に公開できますが、初心者ユーザーは Figma Community にも公開する場合にのみ公開できます。サポートされているプラ​​ンではカスタム ドメインを追加できますが、公開されたアプリはデフォルトでは検索エンジンによってインデックス付けされません。

Figma MakeとAnima Playgroundの違いは何ですか?

Figma Make は、Figma エコシステム内でプロトタイプとアプリを構築します。 Anima Playground は、プロンプト、Figma デザイン、URL、またはイメージから開始して、エクスポート、引き継ぎ、公開できる編集可能な HTML または React を生成するスタンドアロン ワークスペースです。詳細については比較をご覧ください。