Figma、MCP経由でAIエージェントがキャンバスを直接操作——デザインツール初のエージェント統合

概要

本記事は公開情報をもとに編集部が再構成したサマリです。一次情報は出典欄をご参照ください。

FigmaはMCP（Model Context Protocol）サーバを公式提供し、AIエージェントがFigmaキャンバスを直接操作できる統合機能をリリースした。Claude・GitHub Copilot・Cursor等の外部AIエージェントがFigmaに接続し、デザインコンポーネントの生成・レイアウト変更・スタイル適用・アセット整理を自律的に実行できる。デザインツールにおける本格的なエージェント統合は業界初であり、「デザインとコード開発の一元化」を推進するFigmaの戦略的な位置づけとなっている。

事実のポイント

• Figma MCP Server（公式提供）:
  • AIエージェントがFigmaキャンバスを読み取り・編集・新規作成できるAPIブリッジ
  • Claude・GitHub Copilot・Cursor等のMCP対応エージェントがそのまま接続可能
  • デザイントークン・コンポーネントライブラリへのアクセスも含む
• 主なユースケース:
  • コードから対応するFigmaコンポーネントを自動生成
  • デザインシステムへの準拠チェックとAI自動修正
  • テキスト・画像の一括置換・多言語対応
• Figma AI の既存機能との連動: 「Make Designs」（テキスト指示からデザイン生成）・Auto Layout AI（レイアウト自動調整）との組み合わせで、エージェントが複合タスクを実行可能に

用語・背景の補足

MCP（Model Context Protocol）: Anthropicが提唱したオープンプロトコル。AIエージェントが外部ツール・データソースと標準的な方法で接続できるよう規格化したもの。対応ツールが増えるほどAIエージェントの活用範囲が広がる。

デザインシステム: UI/UXの一貫性を保つためにコンポーネント・カラー・タイポグラフィを集中管理する仕組み。Figmaのコンポーネントライブラリやトークンがその実体となることが多い。

Figma Dev Mode: 開発者向けにデザインの仕様情報を自動抽出・出力する機能。MCP統合と組み合わせることで、デザイン→コード変換の自動化が進む。

注意点

• FigmaのMCPサーバはAPIアクセス権限が必要であり、Organization・Enterprise プランでの利用が前提となる場合がある
• AIエージェントによるキャンバス編集は元に戻せない変更を含む可能性があるため、バージョン管理（Figmaのバージョン履歴）との併用を推奨
• 機密性の高いデザインデータを外部AIエージェントに送信する際は、データ処理ポリシーの確認が必要

編集部見解

（追記予定）