Figma、GitHub Copilotなどと連携し「コードをデザインに変換」する機能を拡充

公開日:2026年03月16日

Webデザインツール

Figma Japan株式会社は、AIを活用したコーディングツールとの連携を強化しました。GitHub CopilotやCursorなど5つの新たなパートナーを加え、「Code to Canvas」機能の対応範囲を広げます。これにより、AIが生成したコードを、Figma上で直接編集可能なデザインに変換できるようになります。デザインとコードの間を行き来する作業が、より円滑になるでしょう。

この記事をシェア

ポイント

1
GitHub CopilotやCursorなど、5つのAIコーディングツールと新たに連携
2
AIが書いたUIコードを、Figma上で編集可能なデザインに一発変換
3
デザインからコードへの「双方向」の変換も可能に

デザインとコードの「ラウンドトリップ」を実現

Figmaは、AIエージェント型のコーディングツールと連携する「Code to Canvas」機能のパートナーを拡充しました。新たにGitHub Copilot、Cursor、Warp、Factory Augment Code、Firebenderの5つが加わります。これらツールで生成されたUIのコードを、Figmaのキャンバス上で直接、編集可能なデザイン要素に変換できるようになります。

同社の共同創業者兼CEO、ディラン・フィールド氏は、「コードとキャンバスのループをどこから始めても完結できるよう、MCPパートナーをさらに拡充しています」と述べています。この連携は、Figmaが提供する「MCPサーバー」を介して実現されます。これにより、コードからデザイン、またデザインからコードへと、コンテキストを失うことなく双方向に変換する「ラウンドトリップ」が可能になります。

開発フローの効率化を目指す

Figmaのデザインファイルは、単なる静的な画像ではなく、レスポンシブなレイアウトやインタラクションの詳細を含んでいます。今回の拡充により、開発者は普段使っているコーディング環境を離れることなく、Figmaのデザイン情報を参照・活用できるようになります。これによって、デザイナーと開発者の間の調整手間が減り、プロダクト開発の反復サイクルを効率化することが期待されます。

この機能は、既に連携しているOpenAI CodexやAnthropic Claude Codeの対応範囲も広げます。GitHub CopilotユーザーはVS Code内でこの機能を利用可能で、Copilot CLIへの対応も近日予定されています。リモートのFigma MCPサーバーは、すべてのFigmaプランで利用できます。

Q&A

Q. 「Code to Canvas」機能とは何ですか？

A. AIコーディングツールが出力したコードを、Figma上で直接編集できるデザイン要素に自動変換する機能です。

Q. どのツールと連携するようになったのですか？

A. GitHub Copilot、Cursor、Warp、Factory Augment Code、Firebenderの5つが新たに加わりました。

Q. 開発者にとってのメリットは？

A. コードからデザインへの変換が容易になり、デザインの意図を確認したり、微調整したりする手間が省けます。

関連リンク

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

AIが書いたコードをFigmaデザインに即変換できるのは便利そうです。特に、プロトタイプを素早く作って検証するフェースで、開発者の試行錯誤が加速しそうですね。

引用元：PR TIMES

この記事の著者

O!Productニュース編集部

O!Productニュース編集部は、IT・SaaS・AI業界のニュースをリアルタイムに解析・発信するメディアチームです。ビジネス向けのプロダクトに関する最新情報をなるべく分かりやすく簡潔にまとめてニュースを提供します。
「日本のすべての企業に、AIトランスフォーメーションを。」をミッションに掲げているGigantic Technologies株式会社によって運営されています。
AIに精通し、2017年設立時から企業のDX支援に取り込んでおり、十分な実績とノウハウを元に情報を発信しています。
公式SNSは以下からフォローできます。
・X：https://x.com/o_product
・Facebook：https://www.facebook.com/oproduct.jp
・LinkedIn：https://www.linkedin.com/company/oproduct/