Figma MakeFigmaのランタイム内のアプリRiviera MakeファイルFigmaのランタイムで実行エクスポートReact/TSX ZIPまたはGitHubプッシュ編集：より穏やかな見出しポイントしてプロンプト、追加クレジット
Figma Make 
OpenDesign シートやクレジット上限のないFigma Makeの代替ツール：OpenDesign
OpenDesignは、無料でオープンソース、ローカルファーストのFigma Makeの代替ツールです。プロンプトから動作するUIを作成するという同じタスクを、独自のキーを使用した独自のコーディングエージェントで実行し、リポジトリ内のファイルとして保存します。有料のシートや月ごとのクレジット枠は不要です。このページでは、キャンバスとしてのFigmaではなく、Figma Make単体を比較し、Makeが依然として優れている点も説明します。
タスク別の結論09 / Figma Make
OpenDesign vs Figma Make、3つの異なるニーズ
適切な場所から始める
このページ · 選択
OpenDesignかFigma Makeか？
状況別の結論、両方のツールでの1回の簡単な実行、日付入りの機能比較、および答えを覆す条件。
結論を読む すでにFigma Makeを使用しているFigmaのランタイムからアプリを取り出す
Makeのエクスポートから移行するもの、FigmaのランタイムとSupabaseに結びついたままのもの、およびファイルとして継続するための4つのステップ。
移行するものを見る 別の質問デザインツールとしてのFigmaを離れる？
それは別の比較です：キャンバス、コラボレーション、およびDev Mode。このページはMakeのみに関するものです。
OpenDesign vs Figmaを読むそれぞれのツールの特徴
Figma Make vs OpenDesign：各ツールの特徴
Figma MakeとOpenDesignは、プロンプトから動作するUIを作成する点で重複しています。アプリの保存場所、作成できる人、および反復の支払い方法が異なります。このページではMake単体を比較します。OpenDesignは自社のプロダクトについてこれを書いており、Figmaとは提携していません。
短い回答。 OpenDesignは、無料でオープンソース（Apache-2.0）、ローカルファーストのFigma Makeの代替ツールです。独自のコーディングエージェントが、ブリーフとポータブルなDESIGN.mdから動作するUIをレンダリングし、リポジトリ内のファイルとして保存します。任意のモデルを使用でき、有料のシートや月ごとのクレジット上限はありません。Figmaのフレームに添付したり、Figma内で公開したりすることはありません。チームがキャンバス上で活動し、そこを離れずにホストされたプロトタイプを必要とする場合は、Figma Makeを維持してください。
Figma Make
Figma Makeは、Figma内のAIサブプロダクトであり、2025年7月から一般提供され、Claude Sonnetを搭載しています。プロンプトを書くか、既存のFigmaフレームを添付すると、Figmaのサンドボックス化されたランタイムでレンダリングされるライブReactアプリが生成されます。チャット、要素の指定、またはキャンバス上での編集によって反復します。Supabaseバックエンドを追加し、FigmaがホストするURLに公開できます。
- 実行環境Figmaのホストされたクラウドのみ。サンドボックス化されたランタイム
- モデルClaude Sonnet、固定
- 出力React/TSXアプリ。ZIPまたはGitHubへのエクスポート
- コスト作成のための有料のフルシート、および月ごとのAIクレジット金額は再記載されていません
OpenDesign
OpenDesignは、ローカルファーストのオープンソースデザインエージェントであり、独自のコーディングエージェントを向けることができます。スキルとポータブルなブランドはリポジトリ内のファイルとして存在し、デスクトップアプリが結果をレンダリングしてレビューします。
- 実行環境デスクトップアプリとマシンのローカルデーモン
- エージェント独自のもの：Claude Code、Codex、Cursor、Gemini、OpenCode、Qwenなど
- 出力プロジェクトディレクトリ内のファイル
- コストApache-2.0。APIの使用料は自身のプロバイダーに支払います
重複する部分
プロンプトから動作するクリック可能なインターフェースを作成し、要素を指定して反復すること。これが、このページの残りの部分でOpenDesignと比較するFigma Makeの唯一の部分です。
このページで主張していないこと
OpenDesignがFigmaのフレームに添付されること、Figma内で公開されること、Supabaseを自動で接続すること、または切り替えに損失がないこと。所有権やコストよりもキャンバスに留まることが重要な場合、以下の結論はFigma Makeを維持することを示しています。
結論
Figma MakeかOpenDesignか？状況別の結論
次の場合にFigma Makeを選択…
- 実際の既存のFigmaフレームを信頼できる情報源として添付し、キャンバスに留まりたい場合。
- ワンクリックでホストされる公開とFigma Sitesのパスが必要な場合。
- Supabase認証が組み込まれたデザイナー主導のプロトタイプが成果物であり、シートの支払いがすでに済んでいる場合。
OpenDesignを選ぶべき場合…
- 最初のレンダリングから、完全に所有権のあるファイルとして自分のリポジトリに出力したい場合。
- シートごとのペイウォールや月ごとのAIクレジット上限をなくしたい場合。
- 自分のキーを使って、任意のモデルと任意のコーディングエージェントを使用したい場合。
- 監査、セルフホスト、またはCIでの実行が可能なオープンソースを求めている場合。
両方実行すべき場合…
- デザイナーがフレームからMakeで探索し、エンジニアが採用案をDESIGN.mdの下でファイルとして再構築する場合。
- チームは描画のためにFigmaのキャンバスを求めているが、プロダクトはコードベースに存在しなければならない場合。
- 月の途中でクレジットが切れ、残りのイテレーションを自身のエージェントに移行する必要がある場合。
同じブリーフ、2つの結果
Figma MakeとOpenDesignでの同じブリーフ
比較の誠実さは入力によって決まります。同じ要件と同じブランドをFigma MakeとOpenDesignに入力し、何が返ってくるか、イテレーションのコストをどう支払うか、そしてアプリが最終的にどこに配置されるかを比較します。以下のパネルはスクリーンショットではなくイラストです。20分間のテストで、ご自身で要件を実行できます。
ブリーフ · 両ツールで同一
スロートラベルの滞在を予約する小さなスタジオのランディングページをデザインしてください。強い見出しのあるヒーロー1つ、注目の場所3つ、予約方法に関する短いメモ、そして最後のアクション喚起（CTA）。デスクトップとスマートフォン対応。
- ブランド
- 紙の背景、Albert Sans、緑のアクセント1つ、8pxの角丸
- ブレイクポイント
- デスクトップ1440、モバイル390、横スクロールなし
- 編集テスト
- 最初の結果の後：「見出しをより穏やかにし、2番目の場所を入れ替える」
- 記録
- モデル、日付、最初の結果までの時間、必要な編集、エクスポート形式
Figma MakeFigmaのランタイム内のアプリOpenDesign + あなたのエージェントリポジトリ内のファイルriviera-landing.html新規 · v2DESIGN.mdバインド済み編集：より穏やかな見出し要素をポイントし、エージェントが修正
例示両方のパネルはこのページのために描かれたイラストであり、どちらのツールのスクリーンショットでもありません。また、結論はこれらに依存するものではありません。以下の20分間のテストでご自身で要件を実行し、2つの結果を公平に比較できるように、ここに記載されているポイントに注意してください。
注目すべき点 · 両方のツール
モデルとバージョン、実行日、最初の使用可能な結果までの時間、「完了」に達するまでの編集回数、エクスポートに含まれていたもの。
注目すべき点 · Figma Make
シートの種類と消費されたクレジット、エクスポートがFigma外で実行されたかどうか、Supabaseの配線が何に依存していたか、Fullシートを持たないチームメイトが何を行えたか。
注目すべき点 · OpenDesign
使用されたエージェントとキー、再プロンプトなしでDESIGN.mdが尊重されたかどうか、両方のブレイクポイントが確認されたか、バージョンがファイルとして保持されたか。
機能ごとの比較
OpenDesign対Figma Make、機能ごとの比較
OpenDesignとFigma Makeが実際に異なる9つの側面：ライセンス、ランタイム、アクセス、コスト、制限、モデル、出力、バックエンド、ホスティング。Figma Makeの事実は2026-09-06に公開情報と照合して確認されています。シート価格とクレジット量は意図的に再記載していません。
| 側面 | OpenDesign | Figma Make |
|---|---|---|
| ライセンス | Apache-2.0、GitHub上の完全なソース | プロプライエタリ、クローズドソース |
| ランタイム | ローカルファースト、あなたのマシンとあなたのリポジトリ | Figmaのホスト型クラウドのみ、サンドボックス化されたランタイム |
| アクセス | 不要、クローンして実行 | 作成者向けの有料Figma Fullシート |
| コスト | 無料、API使用料は自身のプロバイダーに支払う | シートと従量制のAIクレジット金額は再記載せず |
| 使用制限 | 課されない、あなたのキーによって制限される | 月ごとのクレジット枠、毎月リセット |
| モデル | コーディングエージェント経由で任意 | Claude Sonnet、固定 |
| 出力とポータビリティ | リポジトリ内のファイル：UI、コンポーネント、デザインシステム | React/TSXエクスポート、実行中のアプリはFigma内に留まる |
| バックエンド | 任意、エージェントはあなたのスタックに対してコードを書く | Supabaseのみ |
| ホスティング | デプロイ先の自身のインフラストラクチャ | Figmaホストの公開、Figma Sites |
Figma Makeが優れている点
チームがすでにFigmaで活動している場合、最初のマイルは打ち負かすのが困難です。既存のフレームを信頼できる情報源として添付し、キャンバスを離れることなくクリック可能なReactアプリを取得し、ポイントしてプロンプトで変更し、ワンクリックで公開できます。
OpenDesignが優れている点
所有権と経済性：最初のレンダリングからリポジトリ内のファイル、任意のエージェントとモデル、シートなし、クレジット上限なし、任意のバックエンド、任意のホスト、そしてフォークできないものは何もありません。
決定
OpenDesignが適切なFigma Makeの代替となる場合
Fullシートのチームをデザインする
既存のフレームからのクリック可能なプロトタイプ、内部で表示
Figma Makeフレームを添付し、生成し、パスワード付きURLに公開します。シートは有料で、キャンバスはすでに作業がある場所です。リポジトリはそれを遅らせるだけです。
適さない場合 プロトタイプが製品のコードになる必要がある場合。
プロダクトチーム
プロトタイプが製品であり、エンジニアリングが初日からそれを所有する
OpenDesignエージェントにブランドを指示します。インターフェースはファイルとしてリポジトリに配置され、独自のバックエンドに対して、独自のホストにデプロイされます。
適さない場合 チームの誰もコーディングエージェントを実行していない場合。
混合チーム
デザイナーはMakeで探索し、エンジニアは勝者を再構築する
両方を実行ブランドをDESIGN.mdに抽出し、OpenDesignに承認されたコンセプトをファイルとして構築させます。一方、探索はFigmaフレームからMakeに留まります。
適さない場合 Makeファイルとリポジトリが同期し続けることを期待している場合。それらは同期しません。
クレジットが切れたチーム
月間許容量が10日までに使い果たされる
OpenDesignイテレーションはクレジットを消費する部分です。上限のない独自のエージェントとキーに移行してください。
適さない場合 残りの作業がアプリではなくキャンバス上にある場合。
デザインを移行するか、両方を実行する
Figma MakeからOpenDesignへアプリを移行する方法
現在、Figma MakeからOpenDesignへの自動インポートはありません。移行するのは、ブランド、ブリーフ、および参照としてエクスポートされたReactソースです。実行中のアプリ、そのSupabaseの配線、およびFigmaでホストされる公開は、Figmaのランタイムに留まります。
| 移行するもの | |
|---|---|
| ブランド | エージェントをMakeのプレビューまたはソースのFigmaフレームに向けます。色、タイポグラフィ、間隔、トーンをDESIGN.mdに抽出します。 |
| プロンプト | プレーンテキスト。Makeアプリを構築したプロンプトをそのままOpenDesignプロジェクトに貼り付けます。 |
| エクスポートされたReact/TSX | ZIPまたはGitHubエクスポートは構造的な参照として機能します。エージェントはそれにパッチを当てるのではなく、DESIGN.mdの下で再レンダリングします。 |
| Figma Makeに留まるもの | |
| 実行中のアプリ | プレビュー、公開ターゲット、およびFigma Sitesのパスは、シートの背後にあるFigmaのランタイムに存在します。 |
| Supabaseの配線 | MakeのバックエンドはSupabaseのみです。OpenDesignのエージェントは、あなたが持ち込む任意のバックエンドに対して書き込みます。 |
| キャンバスの編集と履歴 | Makeファイルでのポイント＆エディットの履歴は移行されません。OpenDesignは独自のバージョン履歴を開始します。 |
-
OpenDesignをインストールし、プロジェクトを開く
デスクトップアプリをダウンロードし、アプリが存在すべきリポジトリにプロジェクトを作成します。クイックスタートでは、ソースビルドのパスを別途カバーしています。
-
Makeアプリとそのソースフレームをエクスポートする
React/TSXのZIPをダウンロード（またはGitHubにプッシュ）し、外観を維持したいFigmaフレームのPNGをエクスポートします。
-
エージェントにブランドをDESIGN.mdに抽出するよう依頼する
Figmaの変数（1つのアクセント、正しいフォント、正しい半径）と照らし合わせて、ファイルを手動で確認します。これは判断が必要な唯一の移行ステップです。
-
新しいブランドに対して元のブリーフをレンダリングする
スキルを選択してレンダリングします。独自のバックエンドに配線し、独自のホストにデプロイします。ここからすべてのバージョンはファイルとなり、クレジット許容量を消費することはありません。
両方を実行する
フレームや内部プロトタイプからの探索にはFigma Makeを維持し、出荷するアプリにはOpenDesignを使用します。Figmaの変数が変更されたらDESIGN.mdを更新します。自動的に同期するものはありません。
フォールバックと損失
Fullシートをドロップする場合は、まずエクスポートしてください。実行中のアプリ、その公開URL、およびSupabaseの配線は、OpenDesignが再作成できない部分です。OpenDesignのレンダリングが失敗した場合、最後のバージョンがディスクに残り、ブリーフは変更されません。
20分間のテスト
Figma Makeですでに作成したアプリでOpenDesignを試す
Figma Makeで生成したアプリを取り、Figmaのランタイム外で、独自のエージェントを使用してOpenDesignで再構築します。20分で使える結果にならなければ、この比較は知る価値のある何かをあなたに伝えたことになります。
1タスク
ここにエクスポートされたReactソースと、Figma Makeで作成したアプリのスクリーンショットがあります。そのブランドをDESIGN.mdに抽出し、私のデザインルールを使用して、私の独自のスタックに対して、このブリーフからメイン画面を再構築してください。デスクトップとモバイルの幅で確認してください。
- 01エクスポート入力React/TSXのZIPと、Makeアプリまたはそのソースフレームのスクリーンショット。
- 02DESIGN.md出力ブランドがリポジトリ内のファイルに抽出されます。Figmaの変数と照らし合わせて確認してください。
- 03同じ画面、レンダリング済みあなたのスタック上のデスクトップとスマートフォン、その後、要素を指して行われた1つの編集。
2成功した場合…
- DESIGN.mdがリポジトリに存在し、Figmaライブラリの値と一致している。
- 画面がFigmaのランタイム外で1440と390でレンダリングされ、水平スクロールがない。
- クレジットを消費することなく、要素を指すことで1つの編集（「より穏やかな見出し」）が適用される。
- 2つのバージョンがファイルとして並んで配置され、暗黙のうちに上書きされたものはない。
うまくいかなかった場合：エージェントが接続され、選択したモードで認証されていることを確認し、ツールを判断する前により小さなブリーフで再試行してください。
その他のオプション
その他のFigma Makeの代替手段
FAQ
Figma Makeの代替: FAQ
Figma Makeの料金はいくらですか？
作成には有料のFigmaフルシートと、アクションごとに従量課金されるAIクレジットが必要です。月間枠はリセットされ、繰り越されません。このページでは金額を再掲していません。OpenDesignは無料で実行でき、モデルの使用料はご自身のプロバイダーに支払います。
Figma Makeをセルフホストしたり、ローカルで実行したりできますか？
いいえ。Figma MakeはFigmaがホストするクラウド内でのみ動作します。OpenDesignはローカルファーストであり、完全にあなたのマシン上で動作します。Node 24が動作する場所ならどこでもセルフホスト可能です。
Figma Makeを使用するには有料のFigmaシートが必要ですか？
はい。Makeでの作成には有料のフルシートが必要です。DevおよびCollabシートではトライアルアクセスのみ可能です。OpenDesignにはアカウントやシートは必要ありません。
Figma Makeが生成したコードをエクスポートできますか？
はい。React/TypeScriptアプリをZIPとしてダウンロードするか、GitHubにプッシュできます。エクスポートされるのはソースであり、すぐにデプロイできるものではありません。実行中のアプリとSupabaseの接続はFigmaのランタイムに結びついたままです。OpenDesignを使用すると、出力は最初からリポジトリ内のファイルになります。
OpenDesignはFigma Makeの完全な代替品ですか？
文字通りではありません。プロンプトから動作するUIを作成する点では重なっていますが、OpenDesignはFigmaのフレームにアタッチしたり、Figma内で公開したりすることはありません。結論にはそれぞれの条件が記載されています。
OpenDesignはオープンソースですか？
はい。Apache-2.0、ローカルファースト、独自のコーディングエージェントとキーを使用するBYOKであり、github.com/nexu-io/open-designで公開されています。Figma Makeはプロプライエタリでクローズドソースです。
OpenDesignはFigmaと提携していますか？
いいえ。OpenDesignは独立したオープンソースプロジェクトです。FigmaおよびFigma MakeはFigma, Inc.の商標です。これはOpenDesignチームによって書かれた非提携の比較です。
1つの実際のアプリでOpenDesignを試す
Figma Makeで作成したアプリを、シートやクレジットの枠外で独自のコーディングエージェントを使用して再構築し、一連のプロセスを評価してから決定してください。あなたに合った状況を選択してください。このページはあなたのセットアップを検出しません。