本日より、Figma MCP サーバーを使って、Codex から Figma のデザインファイルを生成できるようになりました。この MCP サーバーは、動作中の UI を Figma のキャンバスに取り込む操作にも、キャンバス上の変更をコードに戻す操作にも対応しています。どちらも手軽にできるので、最初の案にとどまらず、試してみて最もよかったアイデアをもとに開発を進められます。
Codex デスクトップアプリは、エージェント型コーディングのために設計されています。複数のプロジェクトにまたがって複数のエージェントを並行して管理し、各作業の文脈を保ちながら進捗を確認できます。外部ツールとの連携も同じインターフェースで行えます。Figma を使うチームにとって、こうした作業のしやすさはなじみのあるものです。Figma のキャンバスは、さまざまな案を試し、繰り返し手を加えながら、よいアイデアを形にできるように設計されています。キャンバスと Codex をつなぐと、開発の中でも同じように試行錯誤できます。プロトタイプから本番アプリケーションまで、幅広い開発にこの新しい手法を活用できます。
デザインを起点にしたアプリ開発
Figma MCP サーバーの主な用途の一つは、Figma ファイルからコンテキストを取得してコード生成に活用することです。アプリの開発時に、Figma Design、Make、FigJam のファイルから情報を取得し、Codex に渡せます。
まず、アプリのもとにする Figma ファイルを開きます。使いたいフレームを右クリックし、「形式を指定してコピー」から「選択範囲へのリンクをコピー」を選びます。
コピーした URL は、Figma のキャンバス上のフレームやノードを直接指しています。選択範囲は単一の要素でも、複数のコンポーネントの集まりでもかまいません。その範囲のデータをもとに、エージェントがコードを生成します。選択範囲へのリンクは、Figma Design、Make、FigJam のいずれのファイルからも取得できます。URL を取得したら、Codex を開き、新規または既存のプロジェクトを選びます。たとえば、次のようなプロンプトで Codex に指示します。
この Figma デザインをコードで実装してください。既存のデザインシステムのコンポーネントをできるだけ使ってください。このようなプロンプトを受け取ると、エージェントは Figma MCP サーバーの get_design_context ツールを呼び出します。このツールは、レイアウト、スタイル、コンポーネントの情報など、実装に必要なデザイン情報を Figma ファイルから抽出し、コード生成に使うコンテキストとして Codex に渡します。
Figma MCP サーバーには、デザイン情報の抽出以外にもさまざまなツールが用意されています。ツールの一覧はドキュメントをご覧ください。
コードからキャンバスへ
コード上で改良を重ねたら、デザインをキャンバスに戻して、操作の流れを比較したり、別の案を試したり、想定が正しいか確かめたりできます。Figma MCP サーバーを使えば、ブラウザを見ながら画面を手作業で再現することなく、そのまま Figma に取り込めます。generate_figma_design ツールを使うと、動作中の UI を数秒で、すべての要素を編集できる 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 サーバーを直接インストールします。