代替ツール · Figma Make
デザイン向け最良の Figma Make 代替ツール。
Open Design は、Figma Make に対するオープンソースでローカルファーストな代替ツールです。あなた自身のコーディングエージェント、あなた自身のキー、あなた自身のファイル、そしてリポジトリの中に保持するポータブルなデザインシステム。Figma クラウドへのロックインも、クレジットの計測もありません。
Figma Make は Figma のプロンプト・トゥ・アプリツールです（figma.com/make）。アプリを説明する、あるいは既存の Figma フレームを信頼できる情報源として添付すると、Figma のキャンバス上でチャット、ポイント・アンド・エディット、ポイント・アンド・プロンプトを通じて磨き込める、実働するインタラクティブな React + TypeScript の Web アプリが生成されます。2025年7月24日に一般提供が開始され、Anthropic の Claude Sonnet で動き、プロンプトが求める場合には Supabase バックエンド（認証、Postgres、ストレージ）を接続できます。すでに Figma で作業しているデザイナーにとっては、フレームからクリック可能で公開可能なものへ至る最短の道です。
問題はそれらすべてがどこに存在するかです。Figma Make は Figma のホスト型クラウド内でのみ動作し、オーサリングには有料の Full シートが必要で、意味のある操作はすべて毎月リセットされ繰り越しのきかない AI クレジットを消費します。アプリ1本のフル生成で100クレジット以上かかることもあり、取り消してもクレジットは返ってきません。本ページは Figma 全体ではなく Figma Make を特に比較します（Figma 全体については Open Design vs Figma 比較をご覧ください）。比較対象は Open Design です。これは、あなた自身のコーディングエージェントで駆動する オープンソース（Apache-2.0）でローカルファーストなデザインエージェントです。Figma Make が本当に優れている点は正当に評価しつつ、そのクラウド専用・シート制・クレジット従量制のモデルがチームを他へ向かわせる箇所については具体的に述べます。
01
Figma Make とは
Figma Make は Figma の中にある AI サブプロダクトであり（figma.com/make）、2025年7月24日から一般提供され Claude Sonnet で動いています。スタンドアロンのアプリビルダーではありません。プロンプトを書くか実際の Figma デザイン/フレームを添付すると、Figma のサンドボックス化されたランタイムでレンダリングされる実働の React/TSX アプリが生成されます。反復は Figma 流に行います。チャットで挙動を変える、要素をクリックしてその要素だけにプロンプトを当てる、あるいはキャンバス上で手作業で編集する。プロンプトがデータを示唆すると、Supabase バックエンド（メール/パスワードおよびマジックリンク認証、ソーシャルログイン、Postgres データベース、ファイルストレージ、Edge Functions）の追加を提案し、あなた自身の Supabase プロジェクト経由で接続します。
出力は React + TypeScript のみです。Vue や Svelte、その他のフレームワークはありません。コードは持ち出せます（ZIP をダウンロードするか GitHub リポジトリにプッシュ）し、Figma を離れずに公開できます。チームテンプレートとして、パスワード保護された社内 URL として、あるいは一般公開のデプロイとして。同じエンジンは「Code Layers」を通じて Figma Sites にも供給されます。キャンバス上にコードレイヤーを描くと（Make ツール、ショートカット E）、Make がそこに編集可能で npm パッケージで拡張できる React を流し込みます。
商業的には、Make は Figma のシート + クレジットモデルの上にあります。オーサリングには有料の Full シートが必要で（Dev および Collab シートは試用アクセスのみ）、AI 利用は計測されます。フォントの微調整で30クレジット以上、アプリ1本のフル生成で100クレジット以上かかることもあり、繰り越しのきかない月間枠に対して消費されます。2026年3月18日時点で、これらシートごとのクレジット上限は強制され、超過分は従量課金で約 $0.03/credit です。本ページは Figma Make に特化しています。デザインツールとしての Figma 全体からの移行については Open Design vs Figma 比較をご覧ください。
- 実行場所：Figma のホスト型クラウドのみ — ローカルモードもセルフホストもオンプレミスの選択肢もなし
- 必要なもの：オーサリングには有料の Figma Full シート。チームメイトもアプリを開いて実行するにはシートが必要
- 出力されるもの：React + TSX、ZIP または GitHub にエクスポート可能。バックエンドは Supabase のみ
- かかる費用：Full シート（〜$16–$90/user/mo）に加えて AI クレジット — 500–4,250/mo、毎月リセット、繰り越しなし、取り消しても返却なし
02
Open Design vs Figma Make、機能ごとの比較
| 機能 | Open Design | Figma Make |
|---|---|---|
| ライセンス | Apache-2.0、全ソースを GitHub で公開 | プロプライエタリ / クローズドソース |
| 実行場所 | ローカルファースト、あなたのマシンとリポジトリ | Figma のホスト型クラウドのみ（サンドボックス化されたランタイム） |
| アカウント / シート | 不要 — リポジトリをクローンして実行するだけ | オーサリングには有料の Figma Full シートが必要（Dev/Collab は試用のみ） |
| 料金モデル | 実行は無料。モデルプロバイダーには自分で支払う（BYOK） | Full シート 〜$16–$90/user/mo に加え、従量制の AI クレジット |
| AI 利用上限 | 上限なし — あなたのキーによってのみ制約される | クレジット 500–4,250/mo、毎月リセット、繰り越しなし。取り消しても返却なし |
| AI モデル | 任意。あなたのコーディングエージェント経由 | Anthropic Claude Sonnet（固定） |
| 出力と移植性 | リポジトリ内のファイル — UI、コンポーネント、デザインシステム | React/TSX、ZIP または GitHub。実働アプリは Figma に留まる |
| セルフホスト / オンプレミス | 可能 — 完全にローカル | 不可 — Figma クラウドのみ |
| バックエンド | 任意 — エージェントがあなたのスタックに合わせて書く | Supabase のみ（認証、Postgres、ストレージ） |
| ホスティング / 公開 | あなたのインフラ / デプロイ先はどこでも | Figma ホスト型：テンプレート、パスワード URL、公開、Figma Sites |
| デザインシステム | あらゆるスキルが従う、ポータブルな DESIGN.md | Figma ライブラリ + Make Kits、Figma に縛られる |
| コードの所有権 | git の中でファイルを完全に所有する | エクスポートは可能。本番品質には作り直しが必要 |
Figma Make が本当に勝っている点：チームがすでに Figma で作業しているなら、最初の一マイルでこれを上回るのは難しいでしょう。実際の既存の Figma フレームを信頼できる情報源として添付でき、文章で説明し直す必要なく、キャンバスを離れず IDE を開くこともなくクリック可能な React アプリが手に入ります。チャット / ポイント・アンド・エディット / ポイント・アンド・プロンプトのループは本当にデザイナーに優しく、ワンクリック公開（社内向けのパスワード URL や一般公開デプロイ）と Figma Sites の「Code Layers」の道筋は、プロトタイプを数分で共有可能な、さらには出荷可能な面へと変えます。そして Supabase 連携は、バックエンドのセットアップなしで本物の認証と Postgres データベースを提供します。アイデアを端から端まで検証するには十分です。一方で Open Design は、所有、オープンさ、コントロールを最適化します。オープンソースでローカルファースト、出力はあなたが所有するファイルです。
03
なぜチームは Figma Make の代替ツールを探すのか
Figma に留まるなら Figma Make は有力な選択肢です。クラウド専用・シート制・クレジット従量制のモデルが障害になり始めると、チームは代替ツールを探し始めます。
- アプリはあなたのリポジトリではなく、Figma のクラウド上に存在する: Make は React/TSX の ZIP を渡せますが、実働するアプリ（プレビュー、公開先、Supabase の連携）は Full シートの背後にある Figma のランタイムに存在します。エクスポートで得られるのはソースであって、すぐにデプロイできるものではありません。レビュアーは過剰な div のネスト、薄いエラーハンドリング、相当な作り直しを要するアーキテクチャを指摘します。Open Design では出力こそが成果物です。UI、コンポーネント、デザインシステムが、ビルドや CI がすでにある自分のリポジトリの中にファイルとして着地します。
- AI の利用は従量制で、その計測が予測しづらい: Figma 自身のフォーラムで最も大きな不満はクレジットです。チームは約100回のプロンプトで毎月3,000クレジットの枠を1日で使い切り、その大半は不完全な出力の修正に向かいます。まさにこのツールが依存している反復作業です。取り消すとファイルは元に戻りますがクレジットは決して返らず、上限に達するまで予測もできません。Open Design は BYOK です。自分のモデルキーを持ち込み、プロバイダーへ直接支払うため、反復のコストは透明で上限がありません。
- オーサリングは有料の Full シートに縛られている: View シートや Dev シートでは Make で構築できません。オーサリングするだけで、クレジットに加えて有料の Full シート（〜$16–$90/user/月）が必要です。エンジニアや PM、コントラクターが UI を生成したいチームにとっては、誰かがプロンプトを1つ書くより前に立ちはだかる、人数ごとの課金壁です。Open Design は Apache-2.0 で実行は無料です。リポジトリをチェックアウトできる人なら誰でも駆動できます。
- 設計上、クローズドソースかつクラウド専用: Make は Figma のホスト型クラウド内でのみ動作します。セルフホストもローカルモードもオンプレミスの選択肢もなく、「コードを社外に出せない」ポリシーやエアギャップ要件を持つチームにとっては行き止まりです。Open Design はオープンソースでローカルファーストです。自分のマシン上で動き、コードが第三者のランタイムに触れる必要は一切なく、エージェントが何をするかを正確に監査できます。
04
ローカルファースト + BYOK とは
ローカルファーストとは、エージェントがあなたのマシン上で、あなたのリポジトリに対して動作し、生成物（コンポーネント、ページ、トークン、デザインシステム）があなたの管理するファイルとしてコミットされることを意味します。あなたの作業が存在するために、ホスト型ワークスペースが稼働し続ける必要も、Full シートの支払いを続ける必要もありません。
BYOK とは、すでに信頼しているコーディングエージェント（Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen）に あなた自身のキーで Open Design を向けることを意味します。モデルを選び、プロバイダーへ直接支払い、出力もそれを駆動するエンジンも所有します。間にクレジットの計測はありません。
この考え方に初めて触れますか？ vibe design とは何かを読み、プラグインとデザインシステムのライブラリを見て回り、Open Design のすべての比較（Figma や Lovable を含む）をご覧ください。あるいは Open Design をダウンロードしてください。
05
どちらを選ぶべきか
あなたが実際にやりたいことから手早く判断する方法：
| もしあなたが望むなら… | 最適な選択 |
|---|---|
| 出力を自分のリポジトリ内のファイルとして完全に所有すること | Open Design |
| オープンソースで、監査可能、セルフホスト / ローカルで動くこと | Open Design |
| シートごとの課金壁も、AI クレジットの上限もないこと | Open Design |
| 任意のモデルと任意のコーディングエージェントを自由に使えること（BYOK） | Open Design |
| 既存の Figma フレームを添付してキャンバス上に留まること | Figma Make |
| ワンクリックのホスト型公開 + Figma Sites 連携 | Figma Make |
| Supabase 認証を組み込んだデザイナー主導の高速プロトタイプ | Figma Make |
06
Figma Make から Open Design への移行
Figma Make のプロトタイプから Open Design のワークフローへ移るには：
- コーディングエージェント（Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen）をインストールし、自分のモデルキーを追加します。Figma シートもクレジットも不要です。
- Open Design をあなたのリポジトリに向けます。ローカルで動作し、ビルドや CI がすでにある場所に、生成された UI、コンポーネント、コードを書き込みます。
- ポータブルな DESIGN.md にブランドを一度だけ記述します。あらゆるスキルがそれに従うので、最初の生成からブランドに沿った出力になります。
- エージェントにプロンプトを与え、変更をバージョン管理上の通常のファイルとしてレビューし、自分のインフラ上にデプロイします。クラウドランタイムも、クレジットの計測も、エクスポート後の作り直しもありません。
デザインツールとしての Figma 全体からのより広範な移行については、Open Design vs Figma 比較をご覧ください。
FAQ
FAQ
-
01 Figma Make の料金はいくらですか？
オーサリングには有料の Figma Full シート（Professional で〜$16/user/mo、Enterprise で最大 $90）に加え、アクションごとに計測される AI クレジットが必要です。クレジット枠は 500/mo（Starter）から 4,250/mo（Enterprise）で、毎月リセットされ繰り越しはありません。アプリ1本のフル生成で100クレジット以上かかることもあります。Open Design は実行が無料で、あなたのキー経由でモデルプロバイダーに支払うだけです。
-
02 Figma Make をセルフホストしたりローカルで実行したりできますか？
いいえ。Figma Make は Figma のホスト型クラウド内でのみ動作します。ローカルモードもセルフホストもオンプレミスの選択肢もありません。Open Design はローカルファーストで、完全に自分のマシン上で動作します。
-
03 Figma Make を使うには有料の Figma シートが必要ですか？
はい。Make でのオーサリングには有料の Full シートが必要です。Dev および Collab シートは試用アクセスのみで、View シートではオーサリングできません。Open Design はアカウントもシートも不要です。リポジトリをクローンし、自分のコーディングエージェントで実行するだけです。
-
04 Figma Make が生成したコードをエクスポートできますか？
はい。React/TypeScript アプリを ZIP としてダウンロードするか、GitHub リポジトリにプッシュできます。ただし注意点があります。エクスポートされるのはソースであってすぐにデプロイできるものではなく、実働アプリと Supabase の連携は Figma のランタイムに紐づいたままです。Open Design では、出力は最初からリポジトリ内のファイルです。
-
05 Open Design はオープンソースですか？
はい。Apache-2.0、ローカルファースト、あなた自身のコーディングエージェント（Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen）とあなた自身のモデルキーによる BYOK です。Figma Make はプロプライエタリでクローズドソースです。
-
06 Open Design は Figma と関係がありますか？
いいえ。Open Design は独立したオープンソースプロジェクトであり、Figma と提携も推奨もされていません。Figma および Figma Make は Figma, Inc. の商標です。本ページは無関係の第三者による比較です。
出力を所有しよう — プロンプトからリポジトリまで。
Figma Make は、Figma フレームからホスト型プロトタイプへ至る最速の道です。ただし Full シートの背後でオーサリングし、AI クレジットを消費し、実働アプリを Figma のクラウドに置いておく場合に限ります。Open Design はもう一方の道を選びます。オープンソースでローカルファースト、すでに持っているコーディングエージェントとキーで駆動し、すべての生成物が自分のリポジトリの中であなたの所有するファイルとして着地します。