Figma MCPとCodexの設定・確認手順と使い分け、導入前の要点

Figma MCPとCodexを組み合わせる意味

Figma MCPは、Figmaのデザイン情報をAIコーディングエージェントが読める形で取り出すための仕組みです。従来のデザインからコードへの作業では、画像、画面共有、手作業でコピーしたCSSなどを別々に渡す場面が多く、実装側が余白や文字サイズ、コンポーネントの関係を推測する必要がありました。MCPを使うと、対象のフレームやレイヤーを指定し、デザインに含まれる情報を参照しながらCodexへ依頼できます。Figmaは公式紹介で、選択したフレームからコードを作ること、変数やコンポーネントを取り出すこと、Code Connectによって実際のコード部品との対応を伝えることを説明しています。詳しくはFigma MCP Server公式ドキュメントとFigmaの公式発表を確認してください。

ここで大切なのは、Figma MCPが完成した画面をそのまま納品する機能ではない点です。CodexはFigmaから得た設計情報と、作業対象のリポジトリにあるコードを組み合わせて、実装案や修正案を作ります。既存のデザインシステムを使うのか、仮の部品で先に画面を組むのかによって、依頼の書き方と確認項目は変わります。デザインの正しさとコードの正しさは別々に確認し、片方が整っているだけで完了とは判断しないようにします。

Figma MCPがCodexへ渡す情報

Figmaの公式ガイドでは、MCPサーバーからデザインのコンテキスト、コンポーネント、変数、レイアウト、FigJamやMakeの情報を参照できると説明されています。画面の見た目だけでなく、再利用すべき部品や命名、余白の意味を読み取れるため、Codexに渡す情報の粒度を上げられます。ただし、取得できる内容は対象ファイル、選択範囲、接続方式、アカウントの権限によって変わります。毎回同じ情報が返ると決めつけず、最初の依頼でCodexに「参照できた対象」を短く説明させると確認しやすくなります。

画像を貼る方法との違い

画像は画面全体の雰囲気を伝えるのに向いていますが、画像内の数値が変数なのか、固定値なのか、既存部品なのかまでは分かりにくいことがあります。Figma MCPでは、選択したフレームやレイヤーへのリンクを起点に、構造と設計上の手がかりを参照できます。画像を補助として使う場合も、画像だけで実装を決めず、対象のリンク、利用するコンポーネント、確認したい画面幅を依頼へ添えると、出力の根拠を追いやすくなります。

2026年9月時点で確認したい提供範囲

2026年9月時点のFigma公式案内では、Codex Appのプラグインからリモート版へ接続する方法と、CLIで codex mcp add figma --url https://mcp.figma.com/mcp を実行する方法が示されています。また、Codex CLIの公式リリース0.155.0は2026年9月17日に公開され、MCPリクエストの確認や接続状態に関わる変更も含んでいます。版番号だけで利用可否を判断せず、使っている入口と公式の設定案内を照合してください。出典: FigmaのCodex設定ガイド、Codex 0.155.0公式リリース。

先に決めるべき接続方式

Figma MCPには、Figma側がホストするリモート版と、Figmaデスクトップアプリで起動するデスクトップ版があります。どちらが優れているかを一言で決めるより、普段Figmaをブラウザで開くのか、ローカルのデザインファイルを前提にするのか、読み取りだけで足りるのかを先に考える方が失敗しにくくなります。Figmaの比較ガイドでは、リモート版はブラウザ中心の利用や広い機能範囲に向き、デスクトップ版は特定の組織・企業向けの事情に合うと説明されています。現在の選択肢を次の表で整理します。

Step 1: リモート版を第一候補にする

リモート版は https://mcp.figma.com/mcp に接続し、Figmaのファイル全体または選択レイヤーのURLをコンテキストとして渡します。Figmaデスクトップアプリが開いていなくても利用でき、Codex Appのプラグインから追加する方法が公式に案内されています。初めて試す場合は、読み取り目的の小さなフレームを一つ選び、コンポーネント名と画面構造を説明できるか確認するところから始めると、接続そのものと依頼内容を分けて評価できます。

Step 2: デスクトップ版を選ぶ場面を決める

デスクトップ版を使う場合は、Figmaデスクトップアプリでファイルを開き、Dev Modeへ切り替えてMCPサーバーを有効にします。表示されたローカルURLをCodexのMCPサーバー設定へ登録し、Figmaアプリを開いた状態で接続を確認します。Figma公式はデスクトップ版を特定の組織・企業向けの用途として説明し、一般にはリモート版を推奨しています。ローカル接続が必要な理由がないなら、管理する場所が少ないリモート版から試すのが現実的です。

Step 3: 読み取りと書き込みを分ける

Figma MCPはデザイン情報の読み取りと、Figmaキャンバスへの書き込みで確認項目が異なります。読み取りなら、対象フレームの構造、変数、部品の再利用方法を確認すればよい一方、書き込みでは座席種別、編集権限、対象ファイル、変更後のレビューまで必要です。最初の接続テストで書き込みを依頼せず、読み取り結果が正しいことを確認してから、変更範囲を限定した依頼へ進みます。出典: Figmaのキャンバス書き込みガイド。

Codex AppでFigma MCPをつなぐ

Codex Appを使う場合、Figma MCPの追加は画面から進められます。Figmaの公式ヘルプでは、Codex Appの左上にあるプラグイン一覧からFigmaを選び、追加と認証を行う手順が案内されています。CLIの設定ファイルを直接編集するより、初回の接続先と認証状態を画面で確認しやすいのが利点です。ただし、プラグインが表示されない場合や、組織の設定で外部接続が制限されている場合は、利用者だけで解決できないことがあります。

Step 1: Figmaプラグインを追加する

Codex Appを開き、左上のプラグイン一覧からFigmaを探します。Figmaの公式ガイドにある「Install Figma」の案内に進み、追加が完了したことを確認します。プラグイン名が似た第三者の接続先を選ばず、Figma公式の案内から表示されるものを使うことが大切です。追加直後に大きな実装を依頼せず、まず接続済みの表示と利用できるFigma関連の道具を確認します。手順はCodex and Figma公式ヘルプに掲載されています。

Step 2: 認証と利用範囲を確認する

追加後にFigmaアカウントへのアクセスを許可し、Codexへ戻ります。ここでは「接続できた」ことと「対象ファイルを読める」ことを別に確認します。プラグインが表示されても、対象ファイルの権限がなければフレーム情報は取得できません。組織でCodexを使っている場合は、第三者プラグインの利用可否や追加の道具が承認対象になっていないかを管理担当へ確認します。認証画面に表示される対象と、実際に渡すFigmaファイルを一致させておくと、別のアカウントを使っていたという混乱を防げます。

Step 3: 最初は読み取り依頼だけ送る

FigmaファイルのURL、または特定レイヤーのリンクをCodexへ渡し、「画面を実装して」とだけ頼むのではなく、まず参照できたフレーム名、主要コンポーネント、変数、画面幅を説明させます。期待した対象が読めていることを確認した後に、既存コードのどの部品を使うか、変更するファイル、確認する画面幅を指定します。最初の読み取り結果を残しておくと、接続が切れたときにも、問題がFigma側か依頼側かを比較できます。

Codex CLIでFigma MCPをつなぐ

Codex CLIでは、Figmaが案内するコマンドでリモートMCPサーバーを登録できます。CLIを使う利点は、接続設定を端末から確認し、プロジェクトごとの作業場所で同じ入口を使えることです。一方、入力先を間違えると別の設定へ登録してしまうため、追加後に一覧と個別情報を確認してから新しいスレッドを開始します。CLIの基本的な導入やサインインの前提はOpenAIのCodex CLI公式ドキュメントを参照してください。

Step 1: 公式の接続先を登録する

Codex CLIを作業フォルダで起動できる状態にしたうえで、次のコマンドを実行します。

codex mcp add figma --url https://mcp.figma.com/mcp

サーバー名を figma として登録することで、あとから一覧や個別設定を確認しやすくなります。URLはFigmaの公式設定ガイドに記載されているものを使い、検索結果や第三者の記事から別の接続先をコピーしないようにします。登録時に認証を求められたら、表示されたFigmaの案内を確認して許可します。設定が終わった時点ではまだ実装を依頼せず、次の確認へ進みます。

Step 2: 一覧と個別設定を確認する

登録したサーバーがCodexから見えているか、次のコマンドで確認します。

codex mcp list
codex mcp get figma

一覧で figma が有効になっていること、個別表示で接続先が https://mcp.figma.com/mcp になっていることを確かめます。表示がない場合は、別の設定場所へ登録していないか、コマンドを実行したCodexと普段使うCodexが同じ環境かを確認します。OpenAIのCodexリポジトリでは、MCP設定の一覧と個別取得を確認するCLIテストも公開されています。出典: OpenAI Codex公式リポジトリ。

Step 3: URLを渡して接続結果を読む

新しいCodexスレッドで、FigmaファイルのURLまたは選択範囲へのリンクを渡します。最初の依頼は「このリンクを読み、参照できるページ名、フレーム名、主な部品、変数を確認して」とします。読み取り結果に対象が出たら、次の依頼で「この画面を既存のButtonとspacing変数を使って実装し、変更予定のファイルを先に示して」と具体化します。URLを渡さずにファイル名だけを書くと対象を特定できないため、Figma公式が説明するリンクベースの使い方に合わせます。

Figmaリンクから実装依頼を組み立てる

接続が済んでも、依頼が短すぎるとCodexはデザインの見た目だけを再現し、既存コードの部品や画面状態を取りこぼすことがあります。Figma MCPを使うときは、デザインの参照先、実装の場所、守る規約、確認方法を一つの依頼にまとめます。すべてを一度に任せるのではなく、調査、実装、確認の順に分けると、どの段階で認識がずれたかを特定しやすくなります。 依頼文を短く保ちながら、実装前に確認すべき事項を残すことがポイントです。

Step 1: 対象フレームを一つに絞る

最初の依頼では、ファイル全体ではなく一つの画面や主要フレームを指定します。FigmaのURLに加えて、実装対象のレイヤー名、対象画面幅、除外する範囲を書きます。ナビゲーション、カード、入力欄を同時に作るより、まず一つのカードを既存コンポーネントへ対応させた方が、変数や余白の扱いを確認しやすくなります。対象を絞ることは、生成量を減らすためだけでなく、Figmaとブラウザの比較範囲を明確にするためにも有効です。

Step 2: 既存コードの規約を渡す

Codexが参照するリポジトリに、コンポーネントの場所、スタイルの置き場所、テストの実行方法、変更してはいけないファイルがあるなら、依頼の冒頭で伝えます。Figma MCPから得た部品名と、実装側の部品名が異なる場合は対応表を書きます。たとえば「FigmaのPrimaryButtonは既存の Button を使い、新しいボタン部品は増やさない」と明記すると、同じ見た目の重複実装を避けられます。Figma公式も、Code Connectや実部品との対応を設けると出力が実装に寄りやすいと説明しています。

Step 3: 依頼文に確認条件を入れる

依頼の末尾には、完成とみなす条件を置きます。次のような形にすると、作業の範囲と確認方法が明確です。

このFigmaリンクの選択範囲を読み取り、既存のButtonとspacing変数を使って実装してください。
変更前に対象ファイルと変更予定を示してください。
実装後は画面幅390pxと1440pxで確認し、Figmaとの差分、未対応の状態、テスト結果を説明してください。

依頼文に正解を詰め込みすぎる必要はありませんが、対象、再利用する部品、確認する幅、報告してほしい差分の四点は残します。出力されたコードを受け取ったら、Codexの説明だけでなく実際の画面と差分を確認します。

読み取りと書き込みを分けて考える

Figma MCPの魅力は、デザイン情報を読むことだけでなく、対応するクライアントではFigmaキャンバスへ内容を書き戻せることにもあります。ただし、読み取りと書き込みは同じ軽さで扱えません。読み取りはコード実装の材料を得る作業ですが、書き込みはデザインファイルの状態を変える操作です。Figmaの公式ガイドでは、書き込みにFull seatと編集権限が必要で、Dev seatはデザイン情報やスクリーンショットを読む用途として説明されています。自分の座席と権限を確認し、まず読み取りで接続品質を見てから範囲を広げます。

読み取りで確認する項目

読み取り依頼では、フレーム名、階層、コンポーネント、変数、テキスト、画面幅、画像やアイコンの扱いを一覧にしてもらいます。その一覧がFigmaの表示と一致するかを人が照合し、実装に使う情報と参考にとどめる情報を分けます。特に画像URLは期限がある場合があるため、Figma公式の案内に従い、採用する画像は必要に応じてプロジェクト側へ保存し、期限切れのURLをそのまま残さないようにします。出典: Figmaの画像に関する公式ガイド。

書き込み前に決める範囲

書き込みを依頼する前に、変更するページ、追加するフレーム、使うコンポーネント、触らない領域を文章で決めます。「デザインを整えて」と広く頼むのではなく、「この選択範囲の下に空の状態を一つ追加し、既存のカード部品を使う」のように対象を限定します。変更後はFigma上でレイヤーの構造、変数の適用、既存部品との整合を確認し、必要なら小さな修正を重ねます。

Code Connectを使う意味

Code Connectは、Figmaのコンポーネントと実際のコード部品の対応を示すための仕組みです。対応が登録されていれば、Codexは見た目の近い部品を新しく作るのではなく、既存の実装例や読み込み方法を参照しやすくなります。導入時はすべての部品を登録しようとせず、ボタン、入力欄、カードなど繰り返し使う部品から始めます。Figmaの公式ガイドでは、Code Connectの情報がインポート文、部品の使い方、プロパティ対応を伝えると説明されています。出典: Code Connect公式ガイド。

接続できないときの切り分け

Figma MCPが使えないとき、すぐにCodexのモデルやプロンプトを疑う必要はありません。接続先が登録されているか、認証が済んでいるか、Figma側で対象が開かれているか、組織の設定で利用が許可されているかを順に確認します。Figma公式のトラブルシューティングでも、デスクトップ版ではFigmaアプリが起動し、ファイルが開かれ、MCPサーバーが有効になっているかを先に確認するよう案内しています。原因を層に分けると、やり直す範囲を小さくできます。

ツール一覧にFigmaが出ない場合

Codex Appではプラグイン一覧とMCPサーバー設定を開き、Figmaが追加済みかを確認します。CLIでは codex mcp list と codex mcp get figma の結果を見て、登録名とURLを照合します。Figma側では、対象のファイルを開き、必要ならDev ModeとデスクトップMCPサーバーを有効にします。接続を直した後は既存スレッドを使い続けるより、新しいスレッドで対象リンクをもう一度渡す方が、古い接続状態の影響を受けにくくなります。

認証や権限で止まる場合

認証画面が完了しない、ファイルが見つからない、特定のフレームだけ読めない場合は、接続先の許可とFigmaファイルの権限を分けて確認します。組織でCodexを管理している場合は、Figmaプラグインの利用が許可されているか、追加の道具が承認対象になっていないかを管理担当へ確認します。個人のファイルで再現するかを一度試すと、アカウントや組織設定に関係する問題かどうかを切り分けやすくなります。

出力がデザインと合わない場合

接続が成功しているのに画面が合わない場合は、Figmaリンクがファイル全体を指しているのか、選択範囲を指しているのかを確認します。次に、変数、既存コンポーネント、画面幅、画像の扱いを一つずつ照合します。Figma公式は、明確なレイヤー名、コンポーネント、変数、Auto Layout、注釈、開発用リソースがデザイン意図を伝える助けになると説明しています。デザイン側の情報が不足しているときは、依頼を長くするより、Figmaファイルの構造を整えてから再度読み取る方が効果的です。出典: Figmaファイル構成の公式ガイド。

CodexとFigma MCPの使い分け

Figma MCPは、デザインと実装を行き来する作業に向く一方、すべての画面で必須ではありません。小さな余白の修正や単一のCSS値だけなら、Dev Modeから数値を確認して直接直す方が早い場合があります。逆に、複数のコンポーネント、変数、レスポンシブ幅を含む画面では、リンクを起点に設計情報をまとめて渡せる利点が大きくなります。接続したこと自体を成果にせず、確認の手戻りが減ったか、既存部品の再利用が増えたかで導入効果を判断します。

リモート版を使う判断

ブラウザでFigmaを使うことが多く、複数の作業場所から同じファイルを参照したいなら、リモート版が第一候補です。Codex Appのプラグインから追加する方法、またはCLIで公式URLを登録する方法を選べます。ファイルやレイヤーのリンクを毎回明示し、読み取り結果を確認してから実装へ進むことで、対象違いを防ぎます。利用できる機能や権限は更新される可能性があるため、最新のFigma公式ガイドを基準にします。

デスクトップ版を使う判断

Figmaアプリを開いた状態でローカル接続したい、または組織の規定で外部の接続先を使えない場合は、デスクトップ版を検討します。Dev Modeでサーバーを有効にし、表示されたローカルURLをCodexへ登録します。Figmaアプリを閉じると接続できなくなるため、作業開始時にアプリと対象ファイルが開いているかを確認します。設定を増やすほど切り分け箇所も増えるため、必要性が明確な場合に限定するのが堅実です。

手作業で十分な場面

一つのアイコンのサイズ、単一の色、既存のCSS変数名の確認だけなら、Dev Modeの情報を読んでCodexへ短く渡す方法でも十分です。MCPを使わない選択は後退ではなく、対象と確認項目が小さいときに適した選択です。画面全体の再現や複数状態の実装へ進む段階で、Figma MCP、Code Connect、既存コンポーネントの対応を組み合わせると、接続の準備に時間をかける価値が生まれます。

まとめ

Figma MCPとCodexを使うと、デザインを画像だけで渡すのではなく、フレーム、コンポーネント、変数、レイアウトを参照しながらコードを作れます。2026年9月時点では、Figma公式がCodex Appのプラグイン追加と、Codex CLIで https://mcp.figma.com/mcp を登録する方法を案内しています。まずはリモート版で読み取りを試し、必要な事情がある場合にデスクトップ版を選ぶと、設定の切り分けを小さくできます。

接続後は、Figmaリンクを一つに絞り、既存コードの部品と変数を指定し、生成結果をFigmaとブラウザで確認します。読み取りとキャンバスへの書き込みは権限と確認範囲が違うため、最初から広く任せず、対象を限定して結果を見ます。公式情報は更新されるので、設定や利用範囲に迷ったときはFigmaのCodex設定ガイド、OpenAIのCodex CLI公式ドキュメント、Codex公式リリース一覧を確認してください。