FigmaがMCPサーバーをアップデート AIがデザインからコード生成可能に

米デザインツール大手のFigmaが、自社のMCP(モデル・コンテキスト・プロトコル)サーバーとCode Connectのアップデートを発表しました。これにより、AIモデルがFigmaと直接連携を取り、デザインをデータレベルで理解してコードを生成できるようになります。

今回のアップデートの最大の特徴は、Figmaが持つデザイン情報をIDE(統合開発環境)やAIエージェント、ブラウザベースの開発モデルからリモートで直接活用可能になった点です。従来は画像として扱われることの多かったデザインデータですが、今後はレスポンシブレイアウトやインタラクション、さらにデザインのコンポーネント階層やデザイントークンといった情報が、リアルタイムに開発環境へ連携されることになります。

この新機能はすでにAffirmやSalesforce、Coinbaseなどの大手企業で試験導入されており、開発スピードが「桁違いに」向上したという声も挙がっています。また、Figmaが提供するプロトタイプ作成ツール「Make」も新たにMCPサーバーと接続され、プロトタイプだけでなく本番用コードをAIが直接読み取れる仕組みが整いました。

特に注目されるのが、Anthropicが開発するAIコーディングエージェント「Claude Code」との連携です。Claude CodeはFigma内のデザイン情報を元に、コンポーネント階層やデザイントークンを自動的に本番用のコードへ変換します。その結果、適切な指示さえあれば、専門的なプログラミングスキルがなくとも、高品質な製品の制作が可能となりました。

Figmaによると、Code Connectを利用することで、これまでターミナルを使った手動セットアップが必要だったデザインとコードのマッピングが、アプリ内の直感的なインターフェースで完結します。これにより、人間だけでなくAIエージェントも効率的かつ正確に製品開発を支援できるようになります。

また、今後のさらなる機能強化として、外部の開発環境で得られた情報をFigmaに取り込む「双方向」のコンテキスト連携も計画されています。これが実現すれば、よりリアルで実用的なプロトタイプ作成や、開発とデザイン間の無駄な修正作業が削減されると期待されています。

現在、これらの新機能はベータ版として公開中であり、Figmaはさらなる改善を行いながら本格的な提供を目指すとしています。ユーザーは、自分の使い慣れたIDEやAIエージェントとFigmaを統合することで、これまで以上に効率的かつ革新的なプロダクト開発が可能になるでしょう。


出典:Design Context, Everywhere You Build | Figma Blog

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次