本日から、Figma MCP サーバーを使って Codex から Figma のデザインファイルを生成できるようになりました。この MCP サーバーは双方向の連携に対応しています。動作する UI を Figma のキャンバスに取り込むのも、コードに戻すのも簡単です。最初のアイデアにとどまらず、最も優れたアイデアを形にできます。
Codex のデスクトップアプリは、エージェント型コーディングに特化して設計されています。プロジェクトをまたいで複数のエージェントを並行して管理し、コンテキストを保ちながら進捗を追跡し、外部ツールを連携させるための専用インターフェースを備えています。このようなスムーズな作業の進め方は、Figma でもおなじみです。Figma では、チームが同じように自在に作業を進められます。キャンバスは試行錯誤を重ねるために設計されており、優れたアイデアをじっくり形にできる場所です。Figma のキャンバスと Codex をつなぐことで、自由に試行錯誤する姿勢を開発ワークフローにそのまま持ち込めます。プロトタイプから本番用アプリケーションまで、幅広いものを構築するための強力な新しい手段となります。
デザインから始めるアプリ開発
Figma MCP サーバーの主なユースケースの一つは、Figma ファイルからコンテキストを取得し、コード生成に活用することです。Figma MCP サーバーは、開発プロセスの一環として Figma Design、Make、FigJam のファイルから情報を取得し、Codex に渡すことができます。
まず、アプリケーションの元にする Figma ファイルを開きます。対象のフレームを右クリックし、「形式を指定してコピー」、「選択範囲へのリンクをコピー」の順に選択します。
この選択範囲の URL は、Figma のキャンバス上のフレームやノードに直接リンクしています。リンク先は単一の要素の場合も、複数のコンポーネントの場合もありますが、いずれもエージェントがコード生成に使う元データです。選択範囲は Figma Design、Make、FigJam のファイルから取得できます。URL を取得したら Codex を開き、新規または既存のプロジェクトを選択します。そこから、次のようなプロンプトで Codex に指示できます。
help me implement this Figma design in code, use my existing design system components as much as possible.このようなプロンプトで、Figma MCP サーバーの get_design_context ツールを呼び出すようエージェントに指示できます。このツールは、レイアウト、スタイル、コンポーネント情報など、デザインの重要な情報を Figma ファイルから抽出し、コード生成のためのコンテキストとして Codex に渡します。
Figma MCP サーバーには、デザイン情報の抽出以外にも便利なツールが多数あります。ツールの一覧はドキュメントでご確認ください。
コードからキャンバスへ
コードで改良を重ねたら、デザインをキャンバスに戻してフローを比較したり、別の案を試したり、想定を検証したりしたくなるでしょう。Figma MCP サーバーを使えば、ブラウザを見ながら手作業で再現することなく、画面を簡単に Figma に戻せます。generate_figma_design ツールを使うと、実際に動作するインターフェースを、わずか数秒ですべて編集可能な Figma のフレームに変換できます。実際に機能する UI をキャンバスに直接取り込み、チームで協力しながら、さらに深く検討できます。
まず、アプリケーションの UI をレンダリングする必要があります。ローカルでも、一般に公開されたウェブサーバーでも構いません。そのうえで、新しい Figma デザインファイルを生成するよう Codex に依頼します。
続いて、Codex が次の手順を案内します。
- 新しい Figma ファイルを作成するか、既存のファイルを使うかを決めます。
- ファイルを配置するワークスペースを決めます。
- UI をキャプチャできるようにアプリケーションを設定します。
- 新しいブラウザセッションでアプリケーションを開きます。
アプリケーションが再読み込みされると、ページの上部に新しいツールバーが表示され、次のオプションを利用できます。
画面全体： 現在表示されている画面全体のレンダリング結果をキャプチャし、Figma ファイルに送信します。
要素を選択： キャプチャする特定のコンポーネントや要素をページ上で選択します。
ファイルを開く： Figma ファイルを開き、新しく作成されたデザインレイヤーを確認します。
Figma に転送したい情報をすべてキャプチャしたら、ファイルを開くか、Codex に戻るかを選べます。Codex には Figma ファイルの URL が用意されています。
行って戻って、MCP でつながる開発
アプリを構築し、デザインファイルも用意できたら、改良を重ねる準備は完了です。ここからは、Figma のキャンバスが備える機能を存分に活用できます。たとえば、次のような作業ができます。
- デザインシステムのコンポーネントの追加
- スタイル、フォント、色への変数の適用
- レイアウトの調整と、注釈による指示の追加
- さまざまなインタラクションや空の状態のデザイン
- チームでの複数のバリエーションの作成と検討
UI を磨き上げたら、この記事の冒頭で紹介したのと同じ手順で、MCP サーバーを介して変更をアプリケーションに取り込めます。
コードとキャンバスがつながると、実装と試行錯誤をスムーズに行き来できます。この往復のプロセスによって、Figma MCP サーバーと Codex の連携が真価を発揮します。どこから始めても、スピードを犠牲にすることなく、価値のある高品質なアプリケーション体験を作り上げられます。
Figma MCP サーバーについて詳しくは、ドキュメントをご覧ください。または、Codex のデスクトップアプリに Figma MCP サーバーを直接インストールして、さっそく使ってみてください。