OpenAI CodexでFigma Dev Mode MCPサーバーを使ってみた。

業務でFigmaのデザインデータをMCPサーバーと生成AIを使ってマークアップする検証をしています。

今まではGithub CopilotやCursorを使用していて、なかなかいい感じにマークアップしてくれていたのですが、最近Codexの評判がいいので試してみたくなり、Plusプランを契約しました。

まずは簡単に導入してみようということで、vsCodeの拡張機能を使ってGUIで試してみました。

必要な環境

FigmaとChatGPTでそれぞれ有料プランが必要なので注意です。

ブラウザアプリではMCPが使えないので、最新バージョンのデスクトップアプリを用意します。

該当のデザインファイルを開き、画面下部の</>マークでDev Modeに切り替えます。

右メニューにMCPサーバーの項目が出てくるので、「デスクトップMCPサーバーを有効にする」をクリックします。

画面下部に「MCPサーバーがhttp://127.0.0.1:3845/mcpで有効になりました」のメッセージが出るので、URLをコピーします。

MCPサーバーのステータスが有効になっていればFigmaの準備OKです。

今回はvscodeの拡張機能を使用するので、まず拡張機能をインストールします。

codexで検索してOpenAIのコーディングエージェントをインストールしてください。

次に、Codexの設定ファイル~/.codex/config.tomlを開いて、figmaMCPの設定を追加します。

config.tomlはチャット欄の歯車マークをクリックして、MCP settingsのOpen config.tomlから開くことができます。

config.tomlに以下の設定を追加してください。

[mcp_servers.figma-dev-mode-mcp-server]
command = "npx"
args = ["-y", "mcp-remote", "http://127.0.0.1:3845/mcp"]

これでFigmaのデータが参照できるようになっているはずなので、#get_design_contextでFigma MCPサーバーツールが利用可能であることを確認してください。

動かない場合は、vsCodeとFigmaデスクトップアプリを再起動してみてください。

私はなかなかMCPに接続できず、PCを再起動したらあっさり繋がりました。

Codex CLIの方が色々できそうだったので、そちらも試してみたいと思っています。
軽く触ってみましたが、CLIの方でもconfigの設定は共通なので、npm install -g @openai/codexですぐ使えました。