Codex Design と Figma Make の比較。

Figma Make と Codex Design は、どちらも AI で説明文から動くインターフェースを作ります。Figma Make は Figma の中で動き、できあがったものを Web アプリとして公開できます。Codex Design は Codex にキャンバスを加えるので、コードを書く場所でそのままデザインを探り、比べられます。

2026年11月6日 更新 · 約 6 分で読めます

結論から

チームが Figma でデザインしているなら、Figma Make が自然な選択です。既存のフレームやライブラリをもとに動き、動作するプロトタイプを共有用の URL で公開できます。Codex で開発しているなら、Codex Design でデザインの工程をコードと同じ場所に置けます。画面はローカルのキャンバス上のライブ HTML です。

• Figma Make を選ぶのは、デザインとデザインシステムがすでに Figma にある、ブラウザで開ける動くプロトタイプがほしい、チームが Figma のファイルで共同作業している場合です。
• Codex Design を選ぶのは、すでに Codex を使っていて、作る前に複数の方向性を並べて比べたい、そしてデザインをホスティングされたアプリではなく自分のコードベースに落とし込みたい場合です。

それぞれのツールとは

Figma Make は、Figma のプロンプトからアプリを作るツールです。AI エージェントとチャットし、Figma のデザインからフレームやコンポーネントを貼り付けると、操作できるアプリを作ります。生成されたコードは Make 内で編集でき、ダウンロードも、データを保存するバックエンドの追加もできます。完成したものは figma.site のアドレスか独自ドメインで Web アプリとして公開できます。Make キットを使えば、デザインシステムのパッケージ、変数、スタイルを取り込めます。

Codex Design は、私たちが開発した Codex 向けの独立したプラグインです。ローカルのキャンバスを追加し、Codex がデザインした画面をライブ HTML ページとして、モックアップ画像やリファレンスの隣に並べます。要素を選んでサイドバーでフォント、色、余白を変えることも、Codex に頼んで磨き込み続けることもできます。キャンバスのプロジェクトはお使いのコンピューターに保存されます。

並べて比較

Figma の AI クレジットはすべての AI 機能で共有され、Make の一部の機能はプランやシートの種類によって変わります。この比較は、2026 年 11 月 6 日時点の両プロダクトの公式サイトとドキュメントの内容にもとづいています。

Figma Make を選ぶべきとき

Figma Make が向いているのは、次のような場合です。

• デザインがすでに Figma にある。 フレームやコンポーネントをチャットに貼り付けるか、デザインの URL をコンテキストとして加えれば、Make がそれをもとに作ります。
• 今日中に、みんながクリックして試せるものが必要。 Make のファイルを独自の URL で Web アプリとして公開し、独自ドメインを設定し、プロトタイプにデータの保存が必要になればバックエンドを加えられます。
• デザインシステムが Figma にある。 Make キットには、npm パッケージに加えて、デザインライブラリの変数とスタイル、そしてその使い方のガイドラインを含められます。
• レイヤーに戻したい。 対象のプランでは、プレビューのスナップショットをレイヤーとしてコピーし、Figma Design に貼り付けられます。
• チームで Figma を使って作業している。 チームメンバーは同じ Make の会話を共有し、コメントを残し、生成されたコードを同時に変更できます。

Codex Design を選ぶべきとき

• すでに Codex で開発している。 キャンバスはコードを書くエージェントの中にあるので、デザインと実装のあいだにダウンロードや引き継ぎは要りません。選んだ方向性を、既存のプロジェクトに実装してもらえます。
• 決める前に探りたい。 Codex Design は、複数の方向性をひとつのキャンバスに並べて、リファレンスやモックアップ画像の隣で比べるためのものです。
• ビジュアルですばやく調整したい。 HTML のモックアップで要素を選び、フォント、色、余白などのプロパティをサイドバーで調整できます。
• 作業を自分のマシンに置いておきたい。 キャンバスのプロジェクトは、ホスティングされたファイルではなくローカルに保存されます。
• クレジットの仕組みをこれ以上増やしたくない。 Codex Design には、独自の AI クレジットもトークンのウォレットもありません。キャンバスプロジェクト 1 つは無料で、Pro は月額 $5 です。Codex の利用分は Codex のプランから消費されます。

よくある質問

Codex Design は Figma Make の代わりになりますか？

デザインの段階に限れば、Codex を使っているなら代わりになります。どちらも説明文から動くインターフェースを作ります。Figma Make は Figma の中にあってアプリを公開でき、Codex Design は Codex の中にあって、デザインを探り磨き込むことに集中します。そのデザインを Codex があなたのコードベースで実装します。チームが Figma で作業していて、公開できるプロトタイプが必要なら、Figma Make のほうが合います。

Figma のデザインを Codex Design で使えますか？

キャンバスには画像とライブ HTML ページを置けるので、Figma からフレームを画像として書き出し、Codex がデザインした画面の隣に、比べるためのリファレンスとして置けます。Codex Design は Figma のファイルを直接インポートすることはできません。

Figma Make は Figma の無料プランに含まれますか？

Figma は Make を有料プランだけでなく Starter プランでも提供していて、Figma AI クレジットを使います。Starter には月最大 500 AI クレジットが含まれます。コードの表示とダウンロードや、有料プランでの公開など、一部の機能はシートの種類によって変わります。

続けて読む

• Codex で UI デザインする方法6 ステップのワークフローと、コピーして使えるプロンプト。
• AI で UI モックアップを作る方法1 文の説明からワイヤーフレーム、高精度のモックアップまで。
• DESIGN.md：Codex にデザインシステムを渡すデザインシステムを一度書き出して、すべての画面に守らせる。