CodexとFigmaを連携するには？MCPの設定方法活用法も紹介
CodexとFigmaはどうやって連携するの？
料金はかかるのかな…
Codexを使い始め「Figmaと連携できる」そんな情報を見聞きし、気になっている人は多いですよね。
ただ、いざ連携しようにもやり方がわからない人もいるはず。そもそも繋ぐと何が変わるのか、お金はかかるのかなど、詳細を把握してから連携するかを決めたい人もいるでしょう。
そこでこの記事では料金や活用事例も交え、CodexとFigmaの連携方法を解説します。連携できないときの対処法も紹介するので、ぜひ参考にしてください。
- CodexとFigmaを連携するとデザインの確認から実装までの作業を効率化できる
- Figma MCPは無料プランでも基本的な機能を利用できる
- 連携設定は3ステップで完了し15分程度で始められる
『ClaudeCodeに興味はあるけど、どうやって使えばいいんだろう…』
そんな方へ、
- ClaudeCodeに作業や仕事を任せる方法
- ClaudeCodeを使いこなすたった1つのコツ
- 業務効率化や収入獲得に活かすClaudeCodeの実演
を、無料のオンラインセミナーで凝縮してお伝えします！
パソコンはもちろん、スマホから気軽に参加OK。この時間が、あなたを変える大きなきっかけになりますよ。
CodexとFigma連携で何が変わる？
CodexとFigmaを連携すると、デザインから実装までの作業を効率化できます。
従来はデザイナーがFigmaで作成したデザインを、エンジニアが目視で確認し、HTML/CSSやReactなどのコードへ手作業で落とし込むのが一般的でした。そのため、色やフォントサイズの読み取りミスが発生したり、修正のたびにデザインとコードを照らし合わせたりする手間がかかることが課題でした。
CodexとFigmaを連携すると、次のようなメリットがあります。
- Figma上のデザイン情報を参照しながらHTML/CSSやReactコンポーネントなどのコード生成を支援できる
- カラーコードやフォント情報を正確に参照できるため、実装時の認識違いを減らせる
- デザイン変更後も最新のデザインをもとにコードの修正や再生成を効率よく行える
とくにゲーム開発やWebアプリ開発では、UIデザインが頻繁に変更されることがあります。CodexとFigmaを連携しておけば、最新デザインを参照しながら実装を進められるため、修正作業の負担を軽減可能です。
デザインと実装の連携をスムーズにし開発効率を高めたい方にとって、CodexとFigmaの連携は有効な手段です。
CodexとFigma連携に必要なもの
CodexとFigmaを連携するには、事前に2つの準備が必要です。
ここからは連携に必要な準備物を、2つにまとめて解説します。
ChatGPTアカウント（無料~）
CodexはOpenAIが提供するコーディングエージェントであり、利用するにはChatGPTのアカウントが必要です。
ChatGPTのアカウント自体は無料で作成できますが、Codexを利用するには対応プランへの加入が必要です。
| プラン | 月額料金 | Codexの利用可否 |
|---|---|---|
| Free | 0円 | 利用不可 |
| Plus | 3,000円 | 利用可能 |
| Pro | 1万6,800円~ | 利用可能（利用上限が大きい） |
Codexを継続的に利用する場合は、まずPlusプランから始めるのがおすすめです。
ChatGPTの使い方を詳しく知りたい人は、次の記事を参考にしてください。
Figma MCP（無料~）
Figma MCPは、AIツールがFigmaのデザイン情報を参照するための仕組みです。Figmaでは、Dev Mode MCPサーバーを利用してAIツールと連携できます。
MCPとは「Model Context Protocol」の略で、AIが外部サービスの情報を安全に取得するための共通規格です。Figma MCPを設定すると、Codexがデザイン情報を参照しながらコード生成や修正を行えるようになります。
| プラン | 月額料金 | MCP利用の可否 |
|---|---|---|
| Starter（無料） | 0円 | 読み取り専用で利用可能 |
| Professional | 2,250円 | フル機能で利用可能 |
無料のStarterプランでもMCPを利用できるため、まずは無料プランで試し、必要に応じてProfessionalプランへ移行するとよいでしょう。
CodexとFigmaは連携すべき？
CodexとFigmaの連携は、すべての人に必要なわけではありません。デザインからコードへの変換が多いかどうかによって、導入効果は大きく変わります。
ここからは連携が適しているケースと、Figma単体で十分なケースを紹介します。
連携が適しているケース
CodexとFigmaの連携は、デザインからコードを作成・修正する機会が多い人におすすめです。デザイン変更に合わせて実装内容を更新しやすくなり、作業効率の向上が期待できます。
たとえば、次のようなケースで効果を発揮します。
- 画面数が多いWebアプリやモバイルアプリのUI開発
- ゲーム開発でメニュー画面やHUDなどのデザインが頻繁に変更されるプロジェクト
- デザインから実装まで一人で担当する個人開発者やフリーランス
- デザイナーとエンジニアが密に連携する開発チーム
デザインとコードを行き来する機会が多いほど、CodexとFigmaを連携するメリットを実感しやすいでしょう。
Figma単体で十分なケース
一方で、コード生成や実装支援が不要な場合は、Figma単体で十分です。
たとえば、次のケースでは連携する必要性は高くありません。
- ロゴやバナーなどグラフィックデザインが中心の業務
- コーディングを別の担当者や開発チームが担当している場合
- 一度制作して公開すれば修正がほとんど発生しないWebページの制作
- ワイヤーフレームやプロトタイプの作成・共有が目的の場合
また、Figma Sitesを使えば、簡単なWebページをFigma上で直接公開できます。ランディングページなど小規模なサイトであれば、Figma単体でも十分に対応可能です。
CodexとFigmaの連携手順
ここからは、CodexとFigmaを連携する手順を解説します。
全体の流れは3ステップで、15分程度で完了します。
1.Codexにサインインする
まず、Codexを利用できる環境を用意します。ChatGPTのWeb版またはCodex CLIから利用可能です。
ChatGPTのWeb版を使う場合は、次の手順でサインインしてください。
- ChatGPTにログインする
- 「Codex」を選択して利用を開始する
Codex CLIを利用する場合は、事前にインストールしたうえで、画面の案内に従ってChatGPTアカウントで認証します。
2.Figma MCPサーバーを設定する
次に、CodexからFigmaのデザイン情報を参照できるよう、 Figma MCPサーバーを設定します。
Codex CLIでは、MCP設定ファイルにFigma MCPサーバーを追加します。設定例は次のとおりです。
```json
{
"mcp": {
"servers": {
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR_API_KEY"]
}
}
}
}
```「YOUR_API_KEY」にはFigmaで発行した個人アクセストークンを入力します。アクセストークンはFigmaの「Settings」→「Personal access tokens」から生成可能です。
なお、アクセストークンは発行時にしか表示されません。後から確認できないため、安全な場所に保管しておきましょう。
3.接続を確認し動作テストする
設定が完了したら、正常に連携できているかテストします。
- Figmaでテスト用デザインを開く
- Codexにデザインファイルを指定し「このデザインをHTMLとCSSに変換してください」などと指示する
- コードが生成されれば連携成功
初回は、ボタンやテキストだけのシンプルなデザインで動作を確認すると、問題の切り分けがしやすくなります。
連携できない時の対処法
設定どおりに進めてもうまくいかない場合は、次の項目を順番に確認してください。
- APIキーを確認する：入力ミスや不要なスペース、改行が混入していないか確認する
- アクセストークンの権限を確認する：必要な読み取り権限が付与されているか確認する
- Node.jsのバージョンを確認する：`node -v`でバージョンを確認し、必要に応じて最新版へ更新する
- ネットワーク環境を確認する：VPNやファイアウォールが通信を妨げていないか確認する
上記で解決しない場合は、MCP設定を削除して最初からやり直してみてください。
CodexでのAPI利用について詳しく知りたい人は、次の記事を参考にしてください。
Codex×Figma連携後の基本的な使い方
連携が完了したら、実際の業務での活用が重要です。
ここからは、よく使われる3つの活用パターンを紹介します。
1つ目は、Figmaのデザインをもとにコードを生成するパターンです。
Figmaのデザインファイルを指定し「このデザインをReactコンポーネントに変換してください」や「HTMLとCSSで実装してください」と指示すれば、デザインを参考にしたコードの生成を依頼できます。
ゼロからコーディングする手間を減らせるため、UI実装を効率化したい場合に便利です。
2つ目は、デザイン変更に合わせてコードを更新するパターンです。
たとえば、Figmaでボタンやレイアウトを変更した後に、Codexに「デザインの変更箇所を反映してください」と指示すると、変更点を考慮したコードの修正を依頼できます。
デザインの更新が頻繁に発生するWebアプリやゲーム開発では、修正工数の削減を実現可能です。
3つ目は、デザインと実装内容を比較するパターンです。
たとえば「Figmaのデザインと実装を比較し、違いがある箇所を教えてください」と指示すると、色や余白、フォントサイズなどの差異を確認しやすくなります。
デザインレビューや品質チェックの効率化にも役立つでしょう。
なお、どのパターンでも、Codexへの指示はできるだけ具体的に書くことが重要です。
「Tailwind CSSを使ったReactコンポーネントとして出力してください」や「TypeScriptで実装してください」のように、使用するフレームワークや言語、出力形式を明確に指定すると、期待に近い結果を得やすくなります。
まとめ
本記事では、CodexとFigmaをMCPで連携する方法や、設定手順・活用方法について解説しました。
CodexとFigma MCPを連携すれば、CodexがFigmaのデザイン情報を参照しながらコード生成や修正を行えるようになり、デザインから実装までの作業を効率化可能です。
デザインからコードへの変換作業が多い人は、まず無料のFigma Starterプランで連携を試してみましょう。効果を実感できたら、有料プランへの切り替えも検討してみてください。
こちらの記事もおすすめ
Codexの利用制限について詳しく知りたい人は、次の記事を参考にしてください。
Codexのおすすめ設定を詳しく知りたい人は、次の記事を参考にしてください。
