OpenAIのCodexとFigma、コードとデザインの往復作業を可能にする新連携

今回の連携は、オープンソース標準「MCP」を利用して実現されています。これにより、CodexとFigmaの間でデータをやり取りする「ラウンドトリップ」ワークフローが可能になりました。

具体的には、エンジニアが書いたUIのコードを基に、編集可能なFigmaのデザインファイルを自動生成できます。逆に、デザイナーがFigmaで作成した画面や、プロトタイピングツール「Figma Make」、ホワイトボードツール「FigJam」で描いたアイデアをCodexに渡せば、実装用のコードに変換できます。

Figmaのチーフデザインオフィサー、ロレダナ・クリサン氏は、「ソフトウェアを作れるかどうかの壁が下がる中で、重要になるのは『何を』作り、どう際立たせるかです」と述べています。この連携により、チームは最初のアイデアだけでなく、最良のアイデアを基に構築できるようになるとしています。

Codexのプロダクトリード、アレクサンダー・エンビリコス氏は、「この連携により、Codexはより幅広い制作者にとって強力なツールになります。『まずデザイナーである』とか『まずエンジニアである』という前提がなくなるからです」とコメント。役割間の境界が柔らかくなり、意図と実装の間をシステムが継続的に翻訳してくれる点をメリットとして挙げています。

Codexは2025年1月にCLIツールとして登場し、現在は週間100万人以上が利用しています。利用量は年初から400%以上増加しており、CiscoやNVIDIA、Datadogといった大企業から、HarveyやSierraなどのスタートアップまで、幅広い組織で採用が進んでいます。

今回のFigma連携は、Codexデスクトップアプリ（macOS）に「Figma MCPサーバー」をインストールすることで利用を開始できます。

A. エンジニアは書いたコードから直接Figmaのデザインを生成して視覚的に確認でき、デザイナーは作ったデザインをCodexに渡して実装コードを得られます。

A. エンジニアとデザイナーの協業が必要なプロダクト開発チーム全体です。互いの作業領域を行き来する手間が減り、アイデアの試行錯誤が速くなります。

A. AIエージェントが外部のツールやデータと接続するためのオープンソースの標準規格です。これを使ってCodexとFigmaが通信しています。

O!Productニュース編集部からのコメント

コードとデザインの間でファイルを変換するだけでなく、編集可能な状態で「往復」できるのが肝ですね。デザイン調整のたびに実装を一から確認する手間が、かなり減りそうです。

引用元：OpenAI