Codex Design と Figma のコードレイヤーの比較。

Figma のコードレイヤーと Codex Design がねらう課題は同じです。デザインの隣で、実際に動く UI をキャンバス上で見ること。Figma は、チームがすでにデザインしている Figma にコードを持ち込みます。Codex Design は、コードがすでに書かれている Codex にキャンバスを持ち込みます。違いと、それぞれが向いている場面を説明します。

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

結論から

チームが Figma でデザインしているなら、コードレイヤーは自然な次の一歩です。フレームを同じキャンバス上の動くプロトタイプに変え、チームメイトがそのままコメントできます。Codex で開発しているなら、Codex Design はデザインの工程をコードの隣に置きます。独自の AI クレジットはなく、受け渡しも要りません。

• Figma のコードレイヤーを選ぶ：デザインとデザインシステムが Figma にあり、チームが Figma のファイルでレビューしていて、静的なフレームの隣にインタラクティブなプロトタイプを置きたいとき。
• Codex Design を選ぶ：すでに Codex を使っていて、作り始める前にいくつかの方向性を並べて比べたく、結果を自分のコードベースに残したいとき。

それぞれのツールとは

Figma のコードレイヤーは、実際に動くコードを Figma のキャンバスに置き、デザインを元のフレームの隣でライブでインタラクティブなプロトタイプにします。Figma は 2026 年 6 月の Config で発表し、2026 年 10 月 15 日に全プランでオープンベータを始めました。選んだフレーム、Figma の Chrome 拡張機能で取り込んだ Web ページ、接続した GitHub リポジトリ、Figma の MCP サーバー経由のコーディングツール、または空のレイヤーと Figma のエージェントへのプロンプトから作れます。あわせて Figma Specs という、デザインの背景情報をまとめた Markdown のドキュメントをキャンバスに置けます。

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

並べて比較

有料プランでコードレイヤーを無料で使える期間は 2026 年 11 月 4 日に終わり、その後はほかの Figma エージェント機能と同じく AI クレジットを使います。クレジットは翌月に繰り越されません。Starter プランと閲覧シートには 1 日 150 クレジットの上限があり、フレームからコードレイヤーを 1 つ作るのに足りません。クレジット数は Figma 自身の目安で、複雑な作業ではもっとかかります。この比較は、2026 年 11 月 7 日時点の両製品の公式サイトとドキュメントにもとづいています。

Figma のコードレイヤーを選ぶべきとき

• デザインがすでに Figma にある。 フレームを選んでエージェントに頼めば、ファイルを離れずにコードレイヤーにできます。
• チームが Figma でレビューしている。 コードレイヤーはほかのものと同じキャンバスにあるので、コメント、複製、バージョンの並べて比較が、チームのいつものやり方のまま使えます。
• 本物のサイトやリポジトリから始めたい。 Chrome 拡張機能で公開中のページを取り込むか、GitHub から軽量なプロトタイプ用コードベースをクローンして作り込めます。
• 仕様をデザインの隣に置きたい。 Figma Specs は要件や背景情報をキャンバスに置き、エージェントは Spec からコードレイヤーを作れます。

Codex Design を選ぶべきとき

• すでに Codex で開発している。 キャンバスはコードを書くエージェントの中にあるので、デザインと開発のあいだに受け渡しがありません。選んだ方向性を、既存のプロジェクトで Codex に実装させるだけです。
• 決める前に探りたい。 Codex Design は、いくつもの方向性を 1 つのキャンバスに並べて、リファレンスやモックアップ画像の隣で比べるために作られています。
• モデルを自分で選びたい。 Codex Design は、Codex に設定したモデルをそのまま使います。GPT-6.1 Terra と Sol の UI デザイン比較も参考にしてください。
• クレジットの仕組みをこれ以上増やしたくない。 Codex Design には独自の AI クレジットがありません。キャンバスのプロジェクト 1 つは無料で、Pro は月 5 ドル。Codex の利用分は Codex のプランから引かれます。
• 作業を自分のマシンに置いておきたい。 キャンバスのプロジェクトはホストされたファイルではなく、ローカルに保存されます。

よくある質問

Figma のコードレイヤーは無料ですか？

有料プランでは、もう無料ではありません。2026 年 11 月 4 日までは作成と編集が無料でしたが、いまは Figma の AI クレジットを使います。フレームからコードレイヤーを作ると約 250 以上で、Figma Make や Figma エージェントと同じ月ごとの枠から引かれます。

Codex は Figma のコードレイヤーと一緒に使えますか？

Codex は Figma の MCP サーバーに接続でき、コーディングツールはそれを通じて Specs を読み書きし、キャンバスにコードレイヤーを作れます。Codex Design は逆の道を選んでいて、キャンバスを Codex の中に置くので、Figma のファイルはそもそも要りません。

Codex Design は Figma のコードレイヤーの代わりになりますか？

Codex で開発していて、実際に動く UI でデザインしたいなら、代わりになります。どちらもライブなインターフェースをキャンバスに置きます。Figma のコードレイヤーはデザインとレビューを Figma で行うチームに、Codex Design は Codex でデザインと開発をし、結果を自分のコードベースに残したい人に向いています。

続けて読む

• Codex Design と Figma Make の比較Figma のプロンプトからアプリを作るツールと、Codex の中のデザインキャンバスの比較。
• GPT-6.1 Terra と Sol の UI デザイン比較Codex で同じ 3 つのプロンプト。スクリーンショット、速度、トークン、両者に共通する見た目。
• Codex で UI デザインする方法6 ステップのワークフローと、コピーして使えるプロンプト。